Loading...

HTML Input Types

One tag — input — many behaviors. The type attribute chooses the control style and hints the expected value.

Direct answer

Set type to values such as text, email, password, number, checkbox, radio, date, file, hidden, or submit. Pair every visible input with a label. Browsers may show specialized keyboards on phones for email and number.

📊 Starter input types

type Use
text General single-line text
email Email addresses
password Masked secrets
number Numeric values
checkbox On/off options (many can be checked)
radio Pick one from a named group
date Calendar date
file Upload a file
submit Submit button-style input (or prefer button)

Several input types

html
HTML Code 
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

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

<label><input type="checkbox" name="news" value="yes"> Newsletter</label>

<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>

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

Try it

  1. Build a form with email + password
  2. Add a checkbox and a two-option radio group sharing one name
  3. Submit locally and observe which values are intended
  4. Try type="number" for an age field

Easy mistakes

  • Radio buttons with different name values when they should be one group
  • Using text for passwords
  • Forgetting labels on checkboxes/radios

Summary

  • type selects the input behavior
  • Match type to the data
  • Radios share a name; checkboxes can stand alone
  • Always label visible inputs

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
6
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial