HTML Input Types

Common Input Types

• text – Single-line input for plain text.
• password – Hides the input characters.
• email – Validates an email address.
• number – Allows numeric input with optional step, min, and max.
• checkbox – Enables multi-selection with on/off values.
• radio – Allows single selection from multiple options.
• date – Opens a calendar for date selection.
• file – Lets users upload files.
• submit – Submits the form data.
• reset – Resets all form fields to default.

Example Form with Various Input Types

<form action="submit.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob"><br><br>

  <label for="resume">Upload Resume:</label>
  <input type="file" id="resume" name="resume"><br><br>

  <label>Subscribe:</label>
  <input type="checkbox" name="subscribe"> Yes, sign me up<br><br>

  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>
            

Tips for Using Input Types

• Always include the name attribute for each input to ensure it is submitted.
• Use label tags to improve accessibility.
• Combine with attributes like required, placeholder, and pattern for better form validation.