📖 Notes LESSON 04 OF 32

HTML Forms — All Input Types

⏱️ 25 min
🌐 HTML5 Foundations

Forms — User Interaction

Forms are how users send data. Learn every input type.

One Tag, Many Jobs

✏️
text
Free-form text
📧
email
Validates @ format
🔒
password
Masks characters
🔢
number
Numeric spinner
☑️
checkbox / radio
Multi vs single choice
📅
date / file / range / color
Native pickers

Key Attributes

  • name — the key sent to the server (e.g. name="email")
  • required — browser blocks submission until filled
  • placeholder — hint text, not a substitute for a label
A Registration Form
HTML
<form action="/register" method="POST">
  <input type="text" name="name" required placeholder="Full name">
  <input type="email" name="email" required>
  <select name="role">
    <option>Student</option>
    <option>Teacher</option>
  </select>
  <button type="submit">Register</button>
</form>
💡
The name attribute is what actually gets sent
The server never sees your placeholder text or the input's id — only name="key" pairs travel in the request, which is why forgetting the name attribute is the #1 reason a form "does nothing" when submitted.
🗒 Cheat Sheet 📝 Worksheet