A Primer on HTML Lists and Forms

A Primer for using an HTML List in Displays and Forms

The most common lists are HTML Unordered and Ordered lists for displaying content on Websites. Unordered (bulleted) lists are a great way to convey related information in a modest space. Ordered (numbered) lists display content when the order of the items is relevant. Less common are Definition Lists which contain an alternating set of terms and definitions. Definition lists are used commonly for glossaries.

Lists can also be displayed in Forms. A form can contain Multiple Select, Option, Radio Button, and Checkbox input elements. Lists and forms can also be further enhanced with labels and design elements…but that is outside the realm of this initial primer.

This document assumes you have a basic understanding of HTML and is intended to be a quick reference. Feel free to test drive any of the code from this page on the Alpha Lists HTML Editor. Future documents will drill into additional lists functionality and design considerations for enhancing your lists.

Unordered List

Unordered lists start with a <ul> tag and end with a </ul> tag. Every list item is preceded with a <li> tag and followed with a </li> tag.

<ul>
   <li>List item</li>
   <li>List item</li>
   <li>List item</li>
</ul>

The unordered list items are marked with bullets when viewed in a browser as shown above in Table 1. You can try out the code and create your own lists on Alpha Lists HTML Editor.

Ordered List

Ordered lists start with a <ol> tag and end with a </ol> tag. Every list item is preceded with a <li> tag and followed with a </li> tag.

The ordered list items are marked with numbers when viewed in a browser as shown above in Table 1. You can try out the code and create your own lists on Alpha Lists HTML Editor.

Definition List

Definition lists start with a <dl> tag and end with a </dl> tag. Every term item is preceded with a <dt> tag and followed with a </dt> tag. Definitions add detail to the terms and are placed between <dd> and </dd> tags.

<dl>
   <dt>Term 1</dt>
        <dd>Term Definition 1
   <dt>Term 2</dt>
        <dd>Term Definition 2
</dl>

The definition list terms and definitions alternate and appear with a simple indent when viewed in a browser as shown above in Table 1. You can try out the code and create your own lists on Alpha Lists HTML Editor.

Lists in Forms

The goal of a list in forms is to engage Website visitors and have them interact with lists and select one or more items. The following examples use the Counties in Rhode Island (ricounty) as data points.

The <form> tag is used to create an HTML form:

<form>
             input elements
</form>

Multiple Select

<select name="ricounty" multiple=”multiple” size =”3”> defines a multiple select list. This format lets a user select ONE or ALL the choices in a box that displays 3 items. The option values go inside the select element. You can try out the code and create your own lists on Alpha Lists HTML Editor.

<select name="ricounty" multiple="multiple" size="3"> <option value="Bristol">Bristol</option> <option value="Kent">Kent</option> <option value="Newport">Newport</option> <option value="Providence">Providence</option> <option value="Washington">Washington</option> </select>

Option

<select name="ricounty"> defines a single select list. This format lets a user select ONE of the choices in a drop-down box that displays multiple items. The option values go inside the select element. You can try out the code and create your own lists on Alpha Lists HTML Editor.

<select name="ricounty"> <option>Bristol</option> <option>Kent</option> <option>Newport</option> <option>Providence</option> <option>Washington</option> </select>

Radio Button

<input type="radio" /> defines a radio button. Radio buttons let a user select ONE of a number of list choices. All grouped radio buttons must share the same name and have a different value for the value attribute. You can try out the code and create you own lists on Alpha Lists HTML Editor.

<input type="radio" name="ricounty" value="Bristol" /> Bristol<br /> <input type="radio" name="ricounty" value="Kent" /> Kent<br /> <input type="radio" name="ricounty" value="Newport" /> Newport<br /> <input type="radio" name="ricounty" value="Providence" /> Providence<br /> <input type="radio" name="ricounty" value="Washington" /> Washington<br />

Checkbox

<input type="checkbox" /> defines a checkbox. The checkbox format lets a user select from ONE to ALL of the list choices. You can try out the code and create your own lists on Alpha Lists HTML Editor.

<input type="checkbox" name="ricounty" value="Bristol" /> Bristol<br /> <input type="checkbox" name="ricounty" value="Kent" /> Kent<br /> <input type="checkbox" name="ricounty" value="Newport" /> Newport<br /> <input type="checkbox" name="ricounty" value="Providence" /> Providence<br /> <input type="checkbox" name="ricounty" value="Washington" /> Washington<br />

HTML List Tags

Forms can contain other internally nested tags. The following tags can further define the form elements that appear within the form. HTML form code can include many tags, most of these tags are presented below.

Tag: <form>

Tag: <input>

Tag: <select>

Tag: <option>