Input Tag

HTML <input> Tag

The <input> tag is used to create form fields and controls for user input. Different types of inputs allow text, numbers, dates, passwords, files, colors, and more.

Common Input Types

  • text – single-line text field
  • submit – button to submit form data
  • password – masked input for sensitive info
  • radio – select one option from a group
  • checkbox – select one or more options
  • button – trigger custom actions/JS
  • color – color picker
  • date – calendar-based date picker
  • file – file upload control
  • month – month & year picker
  • time – time picker
  • datetime-local – date & time picker
  • week – select a week
  • number – numeric input with min/max
  • range – slider control

Example Form 

<form>
   <label for="fname">First Name</label>
   <input type="text" id="fname" name="fname"><br><br>

   <label for="lname">Last Name</label>
   <input type="text" id="lname" name="lname"><br><br>

   <label for="userpassword">Password</label>
   <input type="password" name="userpassword">
   <input type="submit" value="Sign Up">
   <input type="reset" value="Reset"><br><br>

   <p>Gender:</p>
   <input type="radio" name="gender" value="Male"> Male
   <input type="radio" name="gender" value="Female"> Female<br><br>

   <p>Hobbies:</p>
   <input type="checkbox" name="hobby1" value="Reading"> Reading<br>
   <input type="checkbox" name="hobby2" value="Writing"> Writing<br><br>

   <input type="button" value="Click Me" onclick="alert(2+2)"><br><br>
   <input type="color" name="bgcolor" value="#ffffff"><br><br>
   <input type="date" name="dob"><br><br>
   <input type="file" name="myfile" accept=".pdf,.jpg"><br><br>
   <input type="month"><br><br>
   <input type="time"><br><br>
   <input type="datetime-local"><br><br>
   <input type="week"><br><br>
   <input type="number" min="1" max="20"><br><br>
   <label>Select Age</label>
   <input type="range" min="0" max="120" value="20">
</form>

Additional Attributes

  • disabled – disables input (not editable)
  • readonly – makes input read-only
  • autocomplete – enables/disables autofill
  • capture – controls file input source (camera/mic)
  • min / max – restricts range of values
  • maxlength / minlength – restricts text length
  • placeholder – shows hint text inside input
  • value – sets initial/default value

Example with Attributes 

<input type="text" name="username" disabled value="VedNath">
<input type="text" name="username2" readonly value="Ved1">
<input type="text" name="email" autocomplete="on">
<input type="file" name="userphoto" capture="user">
<input type="number" name="userage" min="10" max="30" value="15">
<input type="tel" name="userphone" maxlength="10" minlength="9">
<input type="text" placeholder="Enter Something">
<input type="submit" value="Submit">

Example Output