More form elements

One of the most common form elements is the drop-down list. It looks something like this.

<select>
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="grapes">Grapes</option>
  <option value="pineapple">Pineapple</option>
</select>

These allow us to restrict what the user can choose and helps us make sure we get data precisely the way we want it. If we use a text box for everything, then our users could type anything they wanted. For example, they might say Apple, or aPpple, or APPLE, and that would be bad.

Radio Button Video

What other items can you find in forms? I spoke of radio buttons and checkboxes in an earlier section. How would you implement a radio button list?

<input type="radio" name="color" value="blue">Blue<br>
<input type="radio" name="color" value="red">Red<br>
<input type="radio" name="color" value="green">Green<br>
<input type="radio" name="color" value="purple">Purple

Checkbox Video

Finally, let's look at checkboxes and the role they play in forms. They allow us to select multiple items in a list. We see these most often when a form asks us what our interests are. It may look something like this.

<h2>What kind of bikes do you like?</h2>
<input type="checkbox" name="mountain" value="mountain">Mountain<br>
<input type="checkbox" name="road" value="road">Road<br>
<input type="checkbox" name="cross" value="cross" checked>Cross<br>
<input type="checkbox" name="fattire" value="fattire" checked>Fat Tire<br>
<input type="checkbox" name="gravel" value="gravel" checked>Gravel<br>

See the Pen More Form Elements by Michael Cassens (@retrog4m3r) on CodePen.