HTML Input Types

Form elements mapped which tags sit inside form. Input types zoom into one tag: input. The type attribute picks the control face — email keyboard, masked password, calendar, file picker, and more. This lesson is a type catalog. Field helpers like required and placeholder come next.

Why input types matter

A bare type="text" works for almost anything, but phones show the wrong keyboard, passwords stay visible, and dates become free-typed strings. Matching type to the data improves typing, light browser checks, and the shape of submitted values. Treat this session as choosing the right face of input — not re-listing textarea or select.

Direct answer

1) Set type on input — common starters: text, email, password, number, checkbox, radio, date, file, hidden, submit.
2) Pair every visible input with a label.
3) Radios that choose one answer share the same name; checkboxes can be independent.
4) Prefer button type="submit" for send; input type="submit" still works.
5) type only chooses the control — form action/method and later attributes are separate layers.

📊 Starter input types

type	Use	Beginner tip
text	General single-line text	Default when nothing fitter exists
email	Email addresses	Mobile email keyboard + light format check
password	Masked secrets	Never store the real password in page source
number	Numeric values	Good for ages/qty — still validate on the server
checkbox	Independent on/off	Many can be checked at once
radio	One choice in a named group	Same name = one group
date	Calendar date	Browser UI varies; value is YYYY-MM-DD style
file	Upload a file	Needs multipart form encoding for real uploads
hidden	Value not shown	Still submitted with name/value

Signup: typed text fields

Build a small join form: email, password, age as number, and a start date. Notice each field keeps its own label, id, and name while type changes the UI.

Signup with typed inputs

html

<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

<label for="age">Age</label>
<input id="age" name="age" type="number">

<label for="start">Start date</label>
<input id="start" name="start" type="date">

<button type="submit">Join</button>
</form>

Reading the signup demo

type="email" hints an email UI and a basic format check
type="password" masks characters as you type
type="number" favors numeric entry (and a stepper in many browsers)
type="date" opens a date control when the browser supports it
Labels still use for/id; name keys the submitted values
Outer action/method are unchanged from earlier form lessons

Survey: checkbox, radio, and file

Toggles and uploads use the same input tag with different type values. Radios share name="plan" so only one plan is selected. A checkbox stands alone. type="file" opens a picker — real uploads also need the right form encoding (note it; details can wait).

Survey checkbox radio file

html

<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

<button type="submit">Send</button>
</form>

Reading the survey demo

Checkbox news is an independent yes/no; it does not share a radio group
Radios with the same name="plan" form one exclusive choice
Wrapping toggles in label makes the text clickable
type="file" is for uploads; enctype="multipart/form-data" supports file payloads
fieldset/legend here only frame the plan group — the focus is still type
Next lesson adds attributes like required and accept on these same inputs

Choosing the right type

Free short text: text
Email / password: email / password — not plain text for secrets
Count or age: number (or text only if the value is not purely numeric)
One of a few exclusive options: radio with a shared name
Independent toggles: checkbox
Calendar day: date
Attachment: file (+ multipart form when uploading for real)
Value the user should not edit: hidden
Multi-line essays still use textarea (previous lesson) — not an input type

Practice — switch input types

Copy the signup demo; change email to type="text" and note the keyboard/check difference on a phone if you can.
Swap password to type="text" briefly — confirm characters are visible (then switch back).
Add a second number field for quantity.
Build the plan radios; give them different names once and see both stay selected — then fix to one shared name.
Check Newsletter and pick Pro; submit locally and list which names you expect in the payload.
Try type="file" without multipart — note the learning goal is awareness, not a production upload.
Write one sentence: type chooses the input face; form elements and input attributes are neighboring layers.

Easy mistakes

Using type="text" for passwords so secrets stay visible
Radio buttons with different name values when they should be one group
Checkboxes/radios with no label (tiny click targets)
Expecting type="file" to upload without a proper form encoding
Thinking type replaces form action/method or the need for name
Using input for long multi-line answers instead of textarea
Confusing this type catalog with the next attributes lesson (required, min, …)

Summary

One input tag — many faces via type
Match type to the data: email, password, number, date, file, …
Radios share a name; checkboxes can stand alone
Always label visible inputs
Form-element tags (previous) and input attributes (next) are separate layers
Next: input attributes — rules and hints on the same controls

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top