Forms & HTML
HTML form input types explained with examples
A beginner's reference to the most common HTML input types, including text, email, passwords, radio buttons, and checkboxes.
The magic of HTML forms lies within the <input> tag. By simply changing the type="" attribute, you can completely change how a form field behaves, from a simple text box to a date picker or file upload.
1. Text type="text"
The default input type. Used for single-line plain text like names, cities, or short responses.
<label for="first_name">First Name</label>
<input type="text" id="first_name" name="first_name">2. Email type="email"
Looks identical to text on a computer, but triggers a specialized keyboard (with an @ symbol) on mobile phones. The browser will also automatically validate that the text entered contains an "@" sign before submitting.
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>3. Password type="password"
Masks the characters (usually with dots or asterisks) as the user types, ensuring people nearby cannot read the password.
<label for="password">Password</label>
<input type="password" id="password" name="password" required>4. Number type="number"
Restricts input to numbers only, often adding up/down arrows (spinners) to the right side of the field.
<label for="age">Age</label>
<input type="number" id="age" name="age" min="18" max="100">5. Radio Buttons type="radio"
Used when the user must select exactly one option from a list. All radio buttons in a group must share the exact same name attribute.
<p>Choose your subscription tier:</p>
<label>
<input type="radio" name="tier" value="free" checked> Free
</label>
<label>
<input type="radio" name="tier" value="pro"> Pro
</label>6. Checkboxes type="checkbox"
Used for yes/no toggles (like "I agree to the terms") or when the user can select multiple options from a list.
<label>
<input type="checkbox" name="agree_terms" value="yes" required>
I agree to the Terms of Service
</label>Other notable types
type="date": Opens a native calendar date-picker.type="file": Allows the user to upload a file from their device.type="tel": Triggers the numeric keypad on mobile devices for phone numbers.