Form Input Types
Today we change the input type: email and password for login fields, plus a checkbox as one choice control.
- 1
What input types are
Last lesson we built a form with one plain text field. Today the same
<input>tag changes shape when you changetype.We practise three types:
email,password, andcheckbox. Radio and number follow the same idea — a differenttypevalue — and wait for later practice. - 2
Beyond Plain Text: Specialized Inputs for Diverse Data Types
A single generic text box cannot securely mask a secret password, validate an email format, or allow quick toggle selections without typing.
By simply changing the
typeattribute on the versatile<input>element, HTML transforms the UI control and activates specialized browser behavior—masking passwords, validating syntax, and launching specialized mobile keyboards. - 3
How Browsers Validate and Tailor Virtual Keyboards per Input Type
On smartphones,
type="email"instantly modifies the soft keyboard to include prominent@and.comshortcuts. Browsers also perform client-side pattern checks before form submission.type="password"conceals characters behind security dots to thwart shoulder surfing.type="checkbox"operates as a binary toggle—it is only submitted if checked. - 4
Hands-On: Crafting a Production-Ready Login & Preferences Form
Interact with the live example below. Notice how the password field masks your characters as you type, and how the checkbox toggles when you click anywhere on its label.
- 5
Selecting the Semantically Precise Input Type
Do not use plain
textfor secrets or email addresses when a better type exists. Keepnameon every field you want to submit.
Provides browser-level security (masked asterisks) and mobile-optimized keyboard overlays (@ and domain keys).
Binary state selection. Unlike text inputs, checkboxes only send their value to the server if actively checked upon submission.
What you'll learn
- 1type changes how an input behaves
- 2email expects an address with @
- 3password hides what you type
- 4checkbox is an on or off choice
- 5name still decides what gets sent
Line by line
type="email"An email field. Browsers can show an email keypad and check for a basic address shape.
type="password"A password field. Characters are masked so people nearby cannot read them easily.
type="checkbox" value="yes"A tick box. If checked, the form sends
remember=yes. If unchecked, that name is omitted.
Try it yourself
Build a tiny signup form with type="email", type="password", and a checkbox labelled “I agree”. Keep labels and names on every field.
Hint: Same form pattern as last lesson — only the type values change.
Common mistakes
- 1.Using
type="text"for passwords. The secret stays visible on the screen. - 2.Forgetting
valueon a checkbox when you need a clear submitted answer.
Interview prep
Q: Why use type="email" instead of type="text"?↓
It instructs mobile devices to bring up a specialized email keyboard (with @ and domain shortcuts) and allows the browser to perform built-in HTML5 email syntax validation before submission.
Q: Does type="password" encrypt data during transmission?↓
No. It only obfuscates the display on screen to prevent visual snooping. Data encryption in transit must be handled by HTTPS (SSL/TLS) combined with HTTP POST.
Q: When is a checkbox value submitted to the server?↓
Only when the box is in a checked state. If unchecked, the key-value pair is completely omitted from the form submission payload.