🌱BeginnerForms
Input Types
Master the many <input> types: text, password, email, number, checkbox, radio, date, and more.
Overview
The <input> element is the workhorse of HTML forms. Its type attribute determines what kind of data it accepts and how it appears. HTML5 added many new input types that provide built-in validation, mobile-friendly keyboards, and better UX without JavaScript.
Key input types:
- text, password, email, url, tel text-based inputs
- number, range numeric inputs
- date, time, datetime-local, month, week date/time inputs
- checkbox, radio selection inputs
- file file uploads
- hidden invisible values submitted with the form
- color a color picker
Key Points
- •type="email" validates email format automatically on submit
- •type="number" restricts input to numbers and shows a stepper
- •type="password" masks the typed characters
- •type="checkbox" creates a toggleable tick box (submit value when checked)
- •type="radio" creates an option within a group (group by same name)
- •type="date" shows a native date picker on supported browsers
- •type="hidden" sends invisible data without a visible field
Examples
Text-based input types
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="email" name="email" placeholder="email@example.com">
<input type="url" name="website" placeholder="https://example.com">
<input type="tel" name="phone" placeholder="+1 555 0100">Numeric and range inputs
<input type="number" name="age" min="1" max="120" step="1">
<input type="range" name="volume" min="0" max="100" step="10">min, max, and step attributes constrain the value range.
Checkboxes and radio buttons
<!-- Checkboxes: multiple can be checked -->
<input type="checkbox" name="agree" id="agree" value="yes">
<label for="agree">I agree to the terms</label>
<!-- Radio buttons: only one in the group can be selected -->
<input type="radio" name="plan" id="free" value="free">
<label for="free">Free</label>
<input type="radio" name="plan" id="pro" value="pro">
<label for="pro">Pro</label>Radio buttons in the same group share the same name attribute.
Date, file, color, and hidden
<input type="date" name="birthday">
<input type="time" name="meetingTime">
<input type="file" name="avatar" accept="image/*">
<input type="color" name="theme" value="#ff6600">
<input type="hidden" name="csrfToken" value="abc123xyz">Common Mistakes
- Using type="text" for emails you miss browser validation and mobile keyboard optimization
- Grouping radio buttons with different name attributes they won't behave as a single group
- Forgetting value attribute on checkbox/radio the submitted value will be "on" by default
Note
Always use the most specific input type available. type="email" gives you free validation and the correct mobile keyboard with an @ key. type="number" gives you a numeric keypad on mobile.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4