CIS195 Web Authoring 1: HTML
Brian Bird

More HTML Form Elements and Validation


Introduction


Overview

  • Selection lists
  • Option buttons
  • Check boxes


Selection Lists

Selection lists present the user with a set of options from which they may select one (or more?). Selection lists are often displayed by the browser as a drop-down list or a scrollable list.

<label for="hike">Hiking Trails</label>
<select name="hike" id="trail" size="3">
    <option value="pisgah">Mt. Pisgah Summit</option>
    <option value="spencer">Spencer Butte</option>
    <option value="fall">Fall Creek</option>
    <option value="alsea">Alsea Falls</option>
</select>


The size attribute determines how many options are shown without scrolling the list.

Selection of multiple items

By default, only one selection is allowed. Setting the attribute multiple="multiple" allows multiple items to be selected.
The shift or control keys can be used when selecting multiple items.

Option groups for selection lists

Option Groups allow a developer to organize the options into labeled groups:

<select name="hike" id="trail" size="4">
    <optgroup label="Near Eugene">
    <option value="pisgah">Mt. Pisgah Summit</option>
    <option value="spencer">Spencer Butte</option>
    </optgroup>
    <optgroup label="Further Out">
    <option value="fall">Fall Creek</option>
    <option value="alsea">Alsea Falls</option>
    </optgroup>
</select>


Practice: Select element on W3Schools

Reference: Select element on MDN


Option Buttons

Also known as radio buttons

The checked attribute specifies the default selection

<input type="radio" name="difficulty" value="easy" checked> Easy<br>
<input type="radio" name="difficulty" value="intermediate"> Moderately challenging<br />>

<input type="radio" name="difficulty" value="challenging"> Very challenging<br />

Radio buttons can be grouped by the name attribute.
Selection of buttons with the same name will be mutually exclusive.

<input type="radio" name="length" value="short">Short trail<br>
<input type="radio" name="length" value="long">Long trail<br>
<input type="radio" name="steepness" value="flat">Level trail<br>
<input type="radio" name="steepness" value="intermediate"> Steep trail<br>

Radio button practice on W3Schools


Access Keys

The accesskey attribute specifies a keyboard shortcut for moving the focus to (activating) a particular element.

<input type="radio" name="length" value="short" accesskey="s">Short trail<br>
<input type="radio" name="length" value="long">Long trail accesskey="l"<br />

To use the access key in Chrome, Edge or Safari, hold down the alt key while pressing the shortcut key. In Firefox, hold down the alt and shift keys while pressing the access key.

Access Key Practice on W3Schools


Input Validation

We can improve the way our form works and give our users a better experience, if we let them know when they have entered information that isn't valid for a particular form field. There are several ways we can do this using HTML. (There are even more ways to do this with JavaScript running on our web page or with code running on the server.)

Validation using HTML5 input types

These <input> types are all essentially variants of the "text" type, but they limit the range of characters that the user is allowed to enter and change the appearance of the control to match the input type.


Code example:
<input type="email" name="name" placeholder="person@example.com">
Running in the browser:

Validation using the required attribute

Use the required attribute to ensure that the user enters something in a field.

Code example:
<input type="tel" name="telephone" required>


Validation using regular expressions

The pattern attribute allows us to use a special pattern-matching string called a regular expression, also called a regex. It must be a valid JavaScript regular expression. This means:


Code example:
<input name="zip" placeholder="97405-1234" pattern="^\d{5}(-\d{4})?$">
Running in the browser:

Regex reference