HTML Input Types

What Is <input>?

The <input> tag creates a field for users to enter data in a form. The type attribute defines the behavior and appearance of the input.

Commonly Used Input Types

text – Default single-line input
password – Hides typed characters
email – Requires valid email format
number – Only accepts numbers
checkbox – Multiple options toggle
radio – One selection from many
submit – Sends the form
reset – Resets the form fields

Specialized Input Types

date – Calendar input
time – Time selection
file – Upload files
range – Slider for numeric input
color – Color picker input

<input type="date">
<input type="color">

Attributes That Modify Input Behavior

placeholder: Shows hint inside the field
required: Makes input mandatory
disabled: Grays out and disables the field
readonly: Prevents editing
value: Sets a default value

<input type="text" placeholder="Your Name" required>

Grouping Radio Buttons

To make radio buttons mutually exclusive, give them the same name:

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Styling and Accessibility

Wrap inputs with <label> or link using for/id for better accessibility:

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

Customize inputs using CSS to match your design system.

Practice Prompt

Build a mini form with the following fields:

Text input for name
Password input
Email input
Two radio buttons for gender
Submit button

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Your name" required><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>

  Gender:
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female<br><br>

  <button type="submit">Submit</button>
</form>

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu