HTML5 and CSS3, Second Edition

Describing the Form

Let’s create a new HTML5 page with a basic HTML form that does a POST

request, with the assumption that at some point there’ll be a page that pro-

cesses this form. Since there’s nothing special about the project’s name field,

we’ll use the trusty text type for this first input:

html5_forms/index.html

<formmethod="post"action="/projects/1">

<fieldsetid="personal_information">

<legend>ProjectInformation</legend>

<ol>

<li>

<labelfor="name">Name</label>

<inputtype="text"name="name"id="name">

</li>

<li>

<inputtype="submit"value="Submit">

</li>

</ol>

</fieldset>

</form>

We’re marking up this form with labels wrapped in an ordered list. Labels are

essential when creating accessible forms. The for attribute of the label refer-

ences the id of its associated form element. This helps screen readers identify

fields on a page. The ordered list provides a nice way of listing the fields

without resorting to complex table or <div> structures. This also gives us a

way to mark up the order in which we’d like people to fill out the fields. Once

we build the entire form, we’ll use some CSS rules to line things up.

Creating a Slider Using range

Sliders are common for letting users decrease or increase a numerical value

and could be a great way to quickly allow managers to both visualize and

modify the priority of the project. So let’s implement a slider with the range

type:

html5_forms/index.html

<labelfor="priority">Priority</label>

<inputtype="range"min="0"max="10"

name="priority"value="0"id="priority">

We add this to the form within a new