HTML Tags: Forms

These are the HTML tags you use to make forms and their content.

<form>

Represents a form.

• action=[...] — the URL to which the form is submitted (which URL performs some action on the form data)
• method=[...] — the HTTP method with which the form is submitted; specify either post or get
• enctype=[...] — if method="post", this specifies the MIME type of the form submission. Can be:
  • application/x-www-form-urlencoded (the default value)
  • multipart/form-data (use if there is any <input type="file">)
• novalidate — don't validate form before being submitted
• target=[...] — where to display the response (read here)

• accept-charset=[...] — space-separated character encodings the server accepts, e.g. utf-8
• autocomplete=[...] — indicates whether input fields can be autocompleted by the browser; specify either on or off
• name=[...] — name of the form (must be unique)
• rel=[...] — read here

<form method="post" action="/login">
  Username: <input type="text"><br>
  Password: <input type="password"><br>
  <input type="submit" value="Login">
</form>

<label>

Represents the caption of a form field.

It's not a normal text — if you click on a label, the associated form field will receive focus.

• for=[...] — id of a form item to be associated with.

<div>
  <input type="checkbox" name="peas" id="peas">
  <label for="peas">I agree with the terms and conditions</label>
</div>

<input>

Creates an interactive input field.

• name=[...] — name of this input
• value=[...] — value of this input
• type=[...] — type of this input, read next section
• autofocus — sets focus on input when the page has finished loading
• disabled — disables input (the user cannot interact with it)
• readonly — makes the user unable to change this input's value
• required — forces the user to specify this input's value before submitting the form
• autocomplete=[...] — hints if the browser can autofill this input; specify either on or off
• form=[...] — id of a <form id="..."> this element is associated with (read here)
• list=[...] — id of a <datalist id="..."> this element is associated with

<output>

Creates an output container. Its value/content is not submitted during form submission.

Does nothing by itself; you will need to implement the behavior using JavaScript.

• name=[...] — name of this output
• for=[...] — space-separated id's of <input id="..."> elements that contribute to the output
• form=[...] — read here

<!-- TIL: Accesing `<span id="xxx">` node can be via `xxx` variable in JS,
although probably it would be better to use `document.getElementById` -->

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" id="b" name="b" value="50"> +
  <input type="number" id="a" name="a" value="10"> =
  <output name="result" for="a b">60</output>
</form>

<select>

Creates a dropdown selection.

• name=[...] — name of this input
• autofocus — sets focus on input when the page has finished loading
• disabled — disables input (the user cannot interact with it)
• required — forces the user to specify this input's value before submitting the form
• autocomplete=[...] — hints if the browser can autofill this input; specify either on or off
• form=[...] — id of a <form id="..."> this element is associated with (read here)
• multiple — allows selecting multiple values
• size=[...] — if multiple is specified, controls how many options in the scrolling list box are visible at one time

<select name="pet">
  <option value="">--- Please choose a pet ---</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
</select>

<optgroup>

Represents grouped options in <select>.

• label=[...] — label of this group
• disabled — disables all options in this group

<select id="meal">
  <option>--- Select a meal ---</option>
  <optgroup label="Vegetables">
    <option>Salad</option>
    <option>Potato</option>
  </optgroup>
  <optgroup label="Meat">
    <option>Pork</option>
    <option>Beef</option>
  </optgroup>
</select>

<option>

Represents an option inside <select> or <datalist>.

• value=[...] — value of the option (to be sent if the option is selected). If omitted, the value is taken from the tag's content.
• label=[...] — label of the option (the one displayed to the user). If omitted, the value is taken from the tag's content.
• disabled — makes option unselectable
• selected — makes option selected by default

<button>

Creates a button.

• type=[...] — type of the button. Can be:
  • submit (default: behaves like <input type="submit">)
  • reset (behaves like <input type="reset">)
  • button (behaves like normal button)
• name=[...] — if type="submit", this is name of the button when the form is submitted using this button
• value=[...] — if type="submit", this is value of the button when the form is submitted using this button
• autofocus — sets focus on button when the page has finished loading
• disabled — disables button (the user cannot interact with it)

• form=[...] — id of a <form id="..."> this element is associated with (read here)
• formaction=[...] — overrides <form action="...">
• formmethod=[...] — overrides <form method="...">
• formenctype=[...] — overrides <form enctype="...">
• formnovalidate — overrides <form novalidate>
• formtarget=[...] — overrides <form target="...">

<button type="button">Click me</button>

<textarea>

Creates a multiline textbox.

• name=[...] — name of this input
• placeholder=[...] — hint text to show when input is empty
• cols=[...] — width of input in character width
• rows=[...] — height of input in lines
• disabled — disables input (the user cannot interact with it)
• readonly — makes the user unable to change this input's value

• autofocus — sets focus on input when the page has finished loading
• autocomplete=[...] — hints if the browser can autofill this input; specify either on or off
• spellcheck=[...] — controls spellcheck; specify either on, off, or default
• wrap=[...] — controls line wrap. For both values, the browser ensures all line breaks consist of CR+LF pair. Can be:
  • hard (insert line breaks for lines exceeding cols)
  • soft (do not insert additional line breaks)
• form=[...] — id of a <form id="..."> this element is associated with (read here)

• required — forces the user to specify this input's value before submitting the form
• minlength — minimum number of characters
• maxlength — maximum number of characters

<textarea name="description" rows="5" cols="33">Wow!</textarea>

<meter>

Creates a meter.

• value — current meter value
• min — minimum value
• max — maximum value
• low — threshold to indicate low meter value
• high — threshold to indicate low meter value
• optimum — optimum meter value
• form=[...] — id of a <form id="..."> this element is associated with (read here)

<meter value="50" min="0" max="100" low="33" high="66" optimum="80">
  50/100
</meter>

<progress>

Creates a progress bar.

• value — current progres bar value
• max — maximum progress bar value

<progress value="70" max="100">70%</progress>

<datalist>

Contains a set of <option> elements that represents permissible/recommended options for a field.

You refer to this element by giving this element's id in <input list="...">.

<!-- input -->
<label for="ice-cream-choice">Choose a flavor (try double-clicking below):</label><br>
<input list="flavors" id="ice-cream-choice" name="ice-cream-choice">

<!-- data list -->
<datalist id="flavors">
  <option value="Chocolate"/>
  <option value="Strawberry"/>
  <option value="Vanilla"/>
</datalist>

<fieldset> and <legend>

<fieldset> groups fields together.

<legend> represents the caption of a <fieldset>.

<form>
  <fieldset>
    <!-- legend -->
    <legend>Choose your move</legend>
    <!-- options -->
    <input type="radio" name="move" id="scissors">
    <label for="scissors">Scissors</label>
    <br>
    <input type="radio" name="move" id="rock">
    <label for="rock">Rock</label>
    <br>
    <input type="radio" name="move" id="paper">
    <label for="paper">Paper</label>
  </fieldset>
</form>

References

• HTML elements reference (MDN) — https://developer.mozilla.org/en-US/docs/Web/HTML/Element
• What's the point of the <option> “label” attribute inside <select>? (Stack Overflow) — https://stackoverflow.com/questions/3905984/whats-the-point-of-the-option-label-attribute-inside-select