Lesson 19 +10 XP

Selects, Textareas, and More

More form widgets: dropdowns, big text boxes, and progress bars.

select: a dropdown

<select> makes a dropdown menu. <option> is one choice. <optgroup> groups choices with a label.

<select name="country">
  <option value="">Choose a country</option>
  <optgroup label="Europe">
    <option value="fr">France</option>
    <option value="de">Germany</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="jp">Japan</option>
  </optgroup>
</select>

selected: marks the default choice.
multiple: lets you pick several options.

<select name="colors" multiple>
  <option>Red</option>
  <option>Blue</option>
</select>

textarea: a big text box

<textarea> is for long text, like a comment box. It has no type, and its text goes between the tags.

<textarea name="message" rows="5" cols="40">
Type your message here.
</textarea>

rows: how many lines tall.
cols: how wide.
maxlength: the most characters allowed.

datalist: suggestions while typing

<datalist> gives an input a dropdown of suggestions. Link them with the input's list attribute.

<input type="text" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
</datalist>

output: showing a result

<output> displays the result of a calculation (often filled by JavaScript).

<output name="result">0</output>

progress: a loading bar

<progress> shows how far something is. max is the total, value is how much is done.

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

meter: a gauge

<meter> shows a measurement, like a battery level or a score.

<meter min="0" max="100" value="80">80%</meter>

TL;DR

<select> + <option> = dropdown; <optgroup> groups choices.
<textarea> = big text box with rows, cols, maxlength.
<datalist> = autocomplete suggestions for an input.
<output> = result display.
<progress> = loading bar, <meter> = gauge.

Selects, Textareas, and More