Forms cheat sheet

Tag that wraps around all the form elements.

action points to where the data should be submitted.

Used to group elements together, like radio buttons.

Must always have a legend.

Adds a title to the fieldset.

Must be inside a fieldset.

Every form needs a button.

Adds a name to any field.

Every field must have a label.

Adds an input field of varying types.

Must always have an id to associate a label.

The type="…" attribute defaults to text.

Adds a large, multi-line text field.

Must always have an id to associate a label.

Creates a drop-down choice input.

Populate the choices with <option> tags.

Must always have an id to associate a label.

Creates a list of items for autocompletion.

Populate the choices with <option> tags.

Won’t be visible until the associated field is typed into.

Creates an entry inside <select> or <datalist>.

Use the selected attribute to set a default value.

For select: <option>Triceratops</option>

For datalist: <option value="Pteranodon">

Creates a group of options inside a <select>.

label="…" is used as a visible name for the group.

Represents the result of a calculation performed by JavaScript.

for="…" is a space-separate list of input ids that contributed to the calculation.

Single line text field.

If you want, you can leave type="text" off the input.

Accepts numbers; has a up/down switch.

Accepts valid email addresses.

For telephone numbers.

There is no restricted format to accommodate all different countries.

Accepts a valid website URL.

For passwords; hides typed characters.

For accepting time: hours, minutes, seconds.

For accepting dates; shows a calendar picker.

For accepting a both a date and a time; shows a calendar & time picker.

For accepting a specific week; likely shows a calendar picker.

For accepting a specific month; likely shows a calendar picker.

For picking a specific colour; shows a colour palette.

Outputs as a hex colour.

For selecting from a range of numbers.

For choosing a file to upload.

Use accept="…" to limit filetypes.

<input type="file" accept=".jpg,.png,.gif" id="photo">

Specifies the input as a search field.

Turns the input into a check toggle.

Turns the input into a radio button.

All radio buttons in the group should have the same name="…"

Makes the input field invisible.

Define the input as being compulsory.

<input id="dino" required>

Whether the radio or checkbox are selected.

<input type="checkbox" id="dino" checked>

Puts a default value into the field.

<input type="range" value="4" id="dino">

Adds a temporary, helpful hint into the field.

<input type="email" placeholder="dino@extinct.com" id="email">

Do not use this as a replacement for <label>

Disable auto completion in the field.

Disable auto capitalization in the field.

Non-standard: only works in iOS.

Hint the browser to display a specific keyboard.

verbatim, numeric, etc.

The id of an associated <datalist>

For setting a maximum number of characters.

<input type="email" maxlength="256" id="email">

For setting a minimum number of characters.

<input type="text" minlength="6" id="postal-code">

Sets a minimum numerical value on range & number.

<input type="number" min="5" id="dino">

Sets a maximum numerical value on range & number.

<input type="range" max="100" id="dino">

Controls how the number will increment in range & number.

<input type="number" step="0.1" id="dino">

A JavaScript regular expression to control what is valid input.

<input type="text" pattern="[A-Za-z][0-9][A-Za-z] ?[0-9][A-Za-z][0-9]" id="postal-code">

For allowing multiple entries in the field.

Works for: <select>, email, file

Trigger the browser to perform spell checking in the field.

Stops the user from modifying the value of the field.

Stops any interaction on the field.

When the page loads, this field will be focused.

Be really careful, only use this when the whole purpose of the page is to fill the form.

Style an element when its keyboard focused.

Style an element when it doesn’t have the required attribute.

Style an element when it does have the required attribute.

Style an element when its contents are a acceptable (email, url, pattern, etc.)

Style an element when its contents are not acceptable.

Style a checkbox or radio button when it is selected.

Style an input when it has the disabled attribute.

Style an element when it doesn’t have the disabled attribute.

Style a number or range when the selected value is within the min and max.

Style a number or range when the selected value is outside the min and max.

Style a checkbox when its set to an undetermined state by JavaScript.

<form method="post" action="//formspree.io/dino@extinct.com">
  <label for="email">Email address</label>
  <input type="email" id="email" required>
  <button type="submit">Sign up!</button>
</form>

<fieldset>
  <legend>Favourite dinosaur</legend>
  <input type="radio" id="trex" name="dinos">
  <label for="trex">T. rex</label>
  <input type="radio" id="tri" name="dinos">
  <label for="tri">Triceratops</label>
  <input type="radio" id="stego" name="dinos">
  <label for="stego">Stegosaurus</label>
</fieldset>

<label for="province">Province</label>
<input id="province" list="province-list" required>
<datalist id="province-list">
  <option value="Alberta">
  <option value="Ontario">
  <option value="Québec">
  <option value="Nova Scotia">
</datalist>