Forms cheat sheet

Tags

  • <form method="post" action="…">

    • Tag that wraps around all the form elements.

    • action points to where the data should be submitted.

  • <fieldset>

    • Used to group elements together, like radio buttons.

    • Must always have a legend.

  • <legend>

    • Adds a title to the fieldset.

    • Must be inside a fieldset.

  • <button type="submit">

    • Every form needs a button.

  • <label for="…">

    • Adds a name to any field.

    • Every field must have a label.

  • <input id="…" type="…">

    • Adds an input field of varying types.

    • Must always have an id to associate a label.

    • The type="…" attribute defaults to text.

  • <textarea id="…">

    • Adds a large, multi-line text field.

    • Must always have an id to associate a label.

  • <select id="…">

    • Creates a drop-down choice input.

    • Populate the choices with <option> tags.

    • Must always have an id to associate a label.

  • <datalist id="…">

    • Creates a list of items for autocompletion.

    • Populate the choices with <option> tags.

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

  • <option>

    • 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">

  • <optgroup label="…">

    • Creates a group of options inside a <select>.

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

  • <output for="…">

    • Represents the result of a calculation performed by JavaScript.

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

Input types

  • text default

    • Single line text field.

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

  • number

    • Accepts numbers; has a up/down switch.

  • email

    • Accepts valid email addresses.

  • tel

    • For telephone numbers.

    • There is no restricted format to accommodate all different countries.

  • url

    • Accepts a valid website URL.

  • password

    • For passwords; hides typed characters.

  • time

    • For accepting time: hours, minutes, seconds.

  • date

    • For accepting dates; shows a calendar picker.

  • time

    • For accepting times; shows a time picker.

  • datetime-local

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

  • week

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

  • month

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

  • color

    • For picking a specific colour; shows a colour palette.

    • Outputs as a hex colour.

  • range

    • For selecting from a range of numbers.

  • file

    • For choosing a file to upload.

    • Use accept="…" to limit filetypes.

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

  • search

    • Specifies the input as a search field.

  • checkbox

    • Turns the input into a check toggle.

  • radio

    • Turns the input into a radio button.

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

  • hidden

    • Makes the input field invisible.

Input attributes

Some of these attributes also apply to select and textarea.

  • required

    • Define the input as being compulsory.

    • <input id="dino" required>

  • checked

    • Whether the radio or checkbox are selected.

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

  • value="…"

    • Puts a default value into the field.

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

  • placeholder="…"

    • 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>

  • autocomplete="off"

    • Disable auto completion in the field.

  • autocapitalize="none"

    • Disable auto capitalization in the field.

    • Non-standard: only works in iOS.

  • inputmode="…"

    • Hint the browser to display a specific keyboard.

    • verbatim, numeric, etc.

  • list="…"

    • The id of an associated <datalist>

  • maxlength="…"

    • For setting a maximum number of characters.

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

  • minlength="…"

    • For setting a minimum number of characters.

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

  • min="…"

    • Sets a minimum numerical value on range & number.

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

  • max="…"

    • Sets a maximum numerical value on range & number.

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

  • step="…"

    • Controls how the number will increment in range & number.

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

  • pattern="…"

    • 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">

  • multiple

    • For allowing multiple entries in the field.

    • Works for: <select>, email, file

  • spellcheck

    • Trigger the browser to perform spell checking in the field.

  • readonly

    • Stops the user from modifying the value of the field.

  • disabled

    • Stops any interaction on the field.

  • autofocus

    • 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.

CSS selectors

  • :focus

    • Style an element when its keyboard focused.

  • :optional

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

  • :required

    • Style an element when it does have the required attribute.

  • :valid

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

  • :invalid

    • Style an element when its contents are not acceptable.

  • :checked

    • Style a checkbox or radio button when it is selected.

  • :disabled

    • Style an input when it has the disabled attribute.

  • :enabled

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

  • :in-range

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

  • :out-of-range

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

  • :indeterminate

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

Examples

  • Simple form

    • <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>
      
  • Radio button group

    • <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>
      
  • Autocomplete field

    • <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>