Checks for email-like input and improves mobile keyboards.
Platform under construction
Input Types
Learn Input Types with practical examples for form structure, input behavior, validation, autocomplete, accessibility, backend safety and live practice.
HTML forms
Input types tell the browser what kind of data the user should enter.
The input element changes behavior through its type attribute. A type="email" field is not the same as type="text". It gives the browser validation hints and often a better mobile keyboard.
Input types can improve speed, reduce mistakes and make forms feel more professional. Email, tel, url, number, date, checkbox, radio, file and hidden all have different jobs.
The type attribute is a user-experience hint, not a complete security layer. The backend must still validate every submitted value.
tel
Shows phone-friendly keyboards without enforcing one global format.
radio
Lets users choose one option from a group.
checkbox
Lets users toggle one or more independent choices.
Syntax and behavior
Choose the narrowest input type that still fits the real answer.
Better input types make the browser a helpful assistant instead of a passive text box.
Typed controls that match the answer
<label for="email">Email</label> <input id="email" name="email" type="email" required> <label for="phone">Phone</label> <input id="phone" name="phone" type="tel" autocomplete="tel"> <label> <input name="terms" type="checkbox" required> I accept the terms </label>
Everything as plain text
<input name="email" type="text" placeholder="Email"> <input name="phone" type="text" placeholder="Phone"> <input name="terms" type="text" placeholder="yes or no">
Rules that matter
Forms should guide users clearly and protect the backend carefully.
Strong form markup is readable, accessible, secure by design and easy to connect to real server-side validation.
Use email for email addresses
The browser can help catch obvious mistakes before submit.
Use tel for phone numbers
Phone formats differ, so tel gives keyboard help without strict global validation.
Use radio for one choice
All radio buttons in one group share the same name.
Use checkbox for independent choices
Checkboxes can be one toggle or many selectable values.
Use number carefully
Postal codes and phone numbers are usually not numbers.
Use hidden only for non-secret state
Hidden inputs are visible and editable in DevTools.
Production thinking
Forms connect frontend quality with backend responsibility.
Why does this matter?
This matters because a form should guide the user to the right answer instead of letting every mistake happen first.
Accessibility
Correct input types help assistive technology and can make mobile completion much easier.
Production note
Never trust input type alone. Attackers can change the HTML or send requests directly.
SEO note
Good input UX supports conversions on landing pages, forms and lead flows, which is often the real business goal behind search traffic.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Add a phone input using type="tel".
- Add two radio buttons with the same name.
- Try changing type="email" to type="text" and explain what you lose.
Practice assignment
Do this before moving to the next lesson.
- Create a profile form with email, phone, date and checkbox fields.
- Give every submitted field a name attribute.
- List which fields need backend validation and why.
Try it yourself
Improve input types
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?