CIS195 Web Authoring 1: HTML
Brian Bird

Topic: HTML Forms

Introduction
Overview
  • Selection lists
  • Option buttons
  • Text area boxes
  • 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" >
    <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>

By default, only one selection is allowed. Setting the attribute multiple="multiple" allows multiple items to be selected.

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

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 defalult selection

<input type="radio" name="difficulty" value="easy" checked="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

Text Area Boxes

The textarea element allows users to enter multiple lines of text

The row and cols attributes determine the size

The wrap attribute determines the type of line warp: hard or soft

<label for="review">Describe the trail</label>   
<
textarea name="review" id="review" rows="3" cols="40" wrap="hard"></textarea>