Inputs

`<input>` covers most form fields. The `type` attribute decides whether it's text, email, number, date, checkbox, file, and more.

4 min read Level 1/5 #html#inputs#forms

What you'll learn

Pick the right `type` for the data
Use `placeholder`, `value`, `required`, `pattern`
Recognize the mobile keyboard wins

<input> is the workhorse of forms. The type attribute decides what kind of input it is — and what keyboard mobile users get.

Common Types

`type`	Use
`text`	Default — generic text
`email`	Email address; basic validation; ”@” keyboard on mobile
`password`	Hidden text
`number`	Numbers; spinner controls; numeric keypad
`tel`	Phone number; numeric keypad
`url`	URL; URL-friendly keyboard
`search`	Search box (sometimes with a clear button)
`date`	Date picker
`time`	Time picker
`datetime-local`	Date and time
`month`	Month picker
`color`	Color picker
`file`	File upload
`range`	Slider
`checkbox`	Toggle / multi-select
`radio`	Single-select group
`hidden`	Sent but not shown

Common Attributes

<input
  type="email"
  name="email"
  placeholder="ada@example.com"
  required
  autocomplete="email"
/>

name — required for the value to be submitted
value — current/default value
placeholder — gray hint text (NOT a substitute for a <label>)
required — must be filled in to submit
autocomplete — hint for the browser’s autofill (email, name, street-address, cc-number, etc.)
pattern — regex validation
min / max — for number, date, range

Checkboxes and Radios

<label>
  <input type="checkbox" name="newsletter" value="weekly" /> Weekly newsletter
</label>

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

Radios with the same name are a group — only one can be selected.

File Inputs

<input type="file" name="avatar" accept="image/*" />
<input type="file" name="docs" accept=".pdf,.docx" multiple />

accept restricts file types. multiple allows selecting many. For file uploads, the parent form needs enctype="multipart/form-data".

Why Picking the Right `type` Matters

Mobile keyboard fits the data (numeric for numbers, email for emails)
Built-in validation (email pattern, date range)
Browser autofill recognizes the right field
Better accessibility — screen readers announce the type

Up Next

Labels — every input needs one.

Labels →