HTML Cheatsheet

Forms

Use this HTML reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

`<form>` Element

<form action="/submit" method="post">
  <!-- form controls -->
  <button type="submit">Submit</button>
</form>

`<form>` Attributes

Attribute	Values	Description
`action`	URL	Where to send the form data
`method`	`get`, `post`, `dialog`	HTTP method
`enctype`	See below	Encoding type (POST only)
`novalidate`	boolean	Skip browser validation
`autocomplete`	`on`, `off`	Enable/disable autocomplete
`target`	`_self`, `_blank`, `_parent`, `_top`	Where to display response
`name`	string	Form name for `document.forms`
`accept-charset`	charset	Character encoding
`rel`	`noopener`, `noreferrer`…	For `target="_blank"`

`enctype` values

Value	When to use
`application/x-www-form-urlencoded`	Default — key=value pairs, URL-encoded
`multipart/form-data`	Required for file uploads (`<input type="file">`)
`text/plain`	Plain text, rarely used

<!-- File upload form -->
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <button type="submit">Upload</button>
</form>

`<input>` Types

Type	Renders as	Notes
`text`	Single-line text field	Default type
`email`	Email field	Validates email format
`password`	Masked text field
`number`	Number spinner	`min`, `max`, `step`
`range`	Slider	`min`, `max`, `step`, `value`
`tel`	Telephone number	No format validation
`url`	URL field	Validates URL format
`search`	Search field	May show clear button
`date`	Date picker	`YYYY-MM-DD` value
`time`	Time picker	`HH:MM` value
`datetime-local`	Date + time picker	No timezone
`month`	Month picker	`YYYY-MM` value
`week`	Week picker	`YYYY-Www` value
`color`	Color picker	`#rrggbb` value
`checkbox`	Checkbox	`checked` boolean
`radio`	Radio button	Group by same `name`
`file`	File picker	`accept`, `multiple`
`hidden`	Hidden field	Not visible
`submit`	Submit button	Submits the form
`reset`	Reset button	Resets all fields
`button`	Generic button	No default behavior
`image`	Image submit button	`src`, `alt`, `width`, `height`

<!-- Text inputs -->
<input type="text" name="username" placeholder="Username">
<input type="email" name="email" placeholder="you@example.com">
<input type="password" name="password" minlength="8">
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<input type="url" name="website" placeholder="https://example.com">
<input type="search" name="q" placeholder="Search...">

<!-- Number inputs -->
<input type="number" name="qty" min="1" max="99" step="1" value="1">
<input type="range" name="volume" min="0" max="100" step="5" value="50">

<!-- Date/time inputs -->
<input type="date" name="birthday" min="1900-01-01" max="2025-12-31">
<input type="time" name="meeting-time" min="09:00" max="17:00" step="900">
<input type="datetime-local" name="appointment">
<input type="month" name="billing-month">
<input type="week" name="sprint">

<!-- Other inputs -->
<input type="color" name="theme-color" value="#d4af37">
<input type="hidden" name="csrf" value="abc123">
<input type="file" name="doc" accept=".pdf,.doc,.docx">
<input type="file" name="photos" accept="image/*" multiple>

`<input>` Attributes

Attribute	Applies to	Description
`name`	all	Key in form submission
`id`	all	Pairs with `<label for="">`
`value`	all	Initial / submitted value
`placeholder`	text-like	Hint text (not a label)
`required`	all	Field must have a value
`disabled`	all	Field cannot be interacted with
`readonly`	text-like	Visible but not editable
`autofocus`	all	Focus on page load
`autocomplete`	text-like	Browser autocomplete hint
`spellcheck`	text-like	Enable/disable spellcheck
`pattern`	text-like	Regex validation
`minlength`	text-like	Minimum character count
`maxlength`	text-like	Maximum character count
`min`	numeric/date	Minimum value
`max`	numeric/date	Maximum value
`step`	numeric/range	Legal value intervals
`multiple`	email, file	Allow multiple values
`accept`	file	Allowed MIME types / extensions
`capture`	file	`user` or `environment` camera
`checked`	checkbox, radio	Initially checked
`indeterminate`	checkbox	Indeterminate state (JS only)
`size`	text-like	Visual width in characters
`list`	text-like	Points to `<datalist id>`
`form`	all	Associate with a `<form id>` outside ancestor
`formaction`	submit, image	Override form action
`formmethod`	submit, image	Override form method
`formenctype`	submit, image	Override form enctype
`formnovalidate`	submit, image	Override form validation
`formtarget`	submit, image	Override form target
`inputmode`	text-like	Virtual keyboard hint

`inputmode` values

Value	Shows keyboard for
`text`	Default text keyboard
`numeric`	Numbers only
`decimal`	Decimal numbers
`tel`	Phone number
`email`	Email (@ key prominent)
`url`	URL (`.com` key)
`search`	Search (go key)
`none`	No keyboard (custom widget)

`autocomplete` token values

<input type="text" autocomplete="name">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">
<input type="text" autocomplete="street-address">
<input type="text" autocomplete="postal-code">
<input type="text" autocomplete="country-name">
<input type="password" autocomplete="current-password">
<input type="password" autocomplete="new-password">
<input type="text" autocomplete="one-time-code">
<input type="text" autocomplete="username">
<input type="text" autocomplete="given-name">
<input type="text" autocomplete="family-name">
<input type="number" autocomplete="cc-number">     <!-- credit card -->

`<label>` Element

Always associate a label with its control. Clicking the label focuses the input.

<!-- Using for/id (can be far apart in DOM) -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- Wrapping (implicit association) -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Visually hidden label (still accessible) -->
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" name="q" placeholder="Search...">

`<textarea>` Element

Multi-line text input.

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" cols="40" placeholder="Tell us about yourself...">
  Existing content here
</textarea>

`<textarea>` Attributes

Attribute	Description
`name`	Field name
`rows`	Visible rows
`cols`	Visible columns
`placeholder`	Hint text
`maxlength`	Max characters
`minlength`	Min characters
`required`	Required field
`readonly`	Not editable
`disabled`	Disabled
`wrap`	`soft` (default) / `hard` (adds newlines)
`autocomplete`	Autocomplete hint
`spellcheck`	Spellcheck
`form`	Associate with external form

`<select>` and `<option>`

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">-- Select a country --</option>
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="ca" selected>Canada</option>
  <option value="au" disabled>Australia (unavailable)</option>
</select>

`<optgroup>` — grouped options

<select name="car">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Multi-select

<select name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js" selected>JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="py" selected>Python</option>
</select>

`<select>` Attributes

Attribute	Description
`name`	Field name
`multiple`	Allow multiple selections
`size`	Visible option count
`required`	Must select a value
`disabled`	Disabled
`autofocus`	Focus on page load
`form`	Associate with external form

`<datalist>` — Input Suggestions

Provides an autocomplete suggestion list for any text-like input.

<label for="browser">Browser</label>
<input type="text" id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Checkbox and Radio

<!-- Checkbox group -->
<fieldset>
  <legend>Interests</legend>
  <label><input type="checkbox" name="interests" value="code"> Coding</label>
  <label><input type="checkbox" name="interests" value="design"> Design</label>
  <label><input type="checkbox" name="interests" value="music"> Music</label>
</fieldset>

<!-- Radio group — same name, only one selectable -->
<fieldset>
  <legend>Preferred contact</legend>
  <label><input type="radio" name="contact" value="email" checked> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
  <label><input type="radio" name="contact" value="mail"> Mail</label>
</fieldset>

`<fieldset>` and `<legend>`

Groups related controls. <legend> provides an accessible label for the group.

<fieldset>
  <legend>Billing Address</legend>
  <label for="street">Street</label>
  <input type="text" id="street" name="billing-street">

  <label for="city">City</label>
  <input type="text" id="city" name="billing-city">

  <label for="zip">ZIP Code</label>
  <input type="text" id="zip" name="billing-zip" pattern="[0-9]{5}">
</fieldset>

Disable an entire group:

<fieldset disabled>
  <legend>Payment (unavailable)</legend>
  <input type="text" name="card">
</fieldset>

`<button>` Element

<!-- Submit form (default type) -->
<button type="submit">Submit</button>

<!-- Reset form -->
<button type="reset">Reset</button>

<!-- Generic button (no form action) -->
<button type="button" onclick="doSomething()">Click me</button>

<!-- Disabled -->
<button type="submit" disabled>Submit</button>

<!-- With icon -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<!-- Override form attributes -->
<button type="submit" formaction="/save-draft" formmethod="post">Save Draft</button>
<button type="submit" formaction="/publish" formnovalidate>Publish Anyway</button>

`<button>` vs `<input type="submit">`

Prefer <button> — it can contain HTML (icons, text, rich content). <input type="submit"> only takes a plain value attribute.

`<output>` Element

Displays the result of a calculation or user action.

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="0">
  +
  <input type="number" id="b" name="b" value="0">
  =
  <output name="result" for="a b">0</output>
</form>

`<progress>` and `<meter>`

<!-- Indeterminate progress (no value) -->
<progress></progress>

<!-- Determinate progress -->
<progress value="75" max="100">75%</progress>

<!-- Meter — known range with semantic zones -->
<meter value="0.6">60%</meter>
<meter value="65" min="0" max="100" low="33" high="66" optimum="80">65</meter>
<meter value="3.5" min="1" max="5" low="2" high="4" optimum="5">3.5 / 5</meter>

Form Validation Attributes

<input type="email" required>
<input type="text" minlength="3" maxlength="50" required>
<input type="number" min="1" max="100" required>
<input type="text" pattern="[A-Za-z]{3}" title="Three letters only">

<!-- Disable all native validation -->
<form novalidate>
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

Validation CSS pseudo-classes

<style>
  input:valid   { border-color: green; }
  input:invalid { border-color: red; }
  input:required { outline: 1px solid orange; }
  input:optional { /* not required */ }
  input:in-range  { /* within min/max */ }
  input:out-of-range { color: red; }
  input:placeholder-shown { /* placeholder visible */ }
  input:focus-within { /* descendant focused */ }
</style>

Associating Controls with a Form by ID

A control can live outside its <form> using the form attribute.

<form id="settings-form" action="/settings" method="post">
  <input type="text" name="username">
</form>

<!-- Elsewhere in the DOM -->
<button type="submit" form="settings-form">Save Settings</button>
<input type="hidden" name="source" value="sidebar" form="settings-form">

Complete Login Form Example

<form action="/login" method="post" autocomplete="on" novalidate>
  <fieldset>
    <legend>Sign In</legend>

    <div>
      <label for="login-email">Email</label>
      <input
        type="email"
        id="login-email"
        name="email"
        autocomplete="email"
        required
        placeholder="you@example.com"
        inputmode="email"
      >
    </div>

    <div>
      <label for="login-password">Password</label>
      <input
        type="password"
        id="login-password"
        name="password"
        autocomplete="current-password"
        required
        minlength="8"
      >
    </div>

    <label>
      <input type="checkbox" name="remember" value="1">
      Remember me
    </label>

    <input type="hidden" name="csrf_token" value="abc123xyz">

    <button type="submit">Sign In</button>
  </fieldset>
</form>

Forms

<form> Element

<form> Attributes

enctype values

<input> Types

<input> Attributes

inputmode values

autocomplete token values

<label> Element

<textarea> Element

<textarea> Attributes

<select> and <option>

<optgroup> — grouped options