January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

Accessible Forms

Forms aren’t the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another. Because of this, adding several elements to the form is a good idea.

Labels

Each form field should have its own explicit label. The label tag sorts this out, with a for attribute that associates it to a form element:

<form>
    <label for="yourName">Your Name</label>
    <input name="yourName" id="yourName">
    <!-- etc. -->

Labels have the added bonus of visual browsers rendering the labels themselves clickable, putting the focus on the associated form field.

Both name and id attributs are typically required; the name for the form to handle that field and the id for the label to associate it to.

Field sets and legends

You can group fields, for example name (first, last, middle, title etc.) or address (line 1, line 2, county, country, postal code, country etc.) using the fieldset tag.

Within the field set, you can set a caption with the legend tag.

<form action="somescript.php" >
    <fieldset>
        <legend>Name</legend>
        <p>First name <input name="firstName"></p>
        <p>Last name <input name="lastName"></p>
    </fieldset>
    <fieldset>
        <legend>Address</legend>
        <p>Address <textarea name="address"></textarea></p>
        <p>Postal code <input name="postcode"></p>
    </fieldset>
    <!-- etc. -->

Most browsers tend to represent field sets with a border surrounding them and the legend caption breaking the left of the top border by default. You can, of course, change this with CSS if you wish.

Option groups

The optgroup element groups options in a select box. It requires a label attribute, the value of which is displayed as a non-selectable pseudo-heading preceding that group in the drop-down list of visual browsers.

<select name="country">
    <optgroup label="Africa">
        <option value="gam">Gambia</option>
        <option value="mad">Madagascar</option>
        <option value="nam">Namibia</option>
    </optgroup>
    <optgroup label="Europe">
        <option value="fra">France</option>
        <option value="rus">Russia</option>
        <option value="uk">UK</option>
    </optgroup>
    <optgroup label="North America">
        <option value="can">Canada</option>
        <option value="mex">Mexico</option>
        <option value="usa">USA</option>
    </optgroup>
</select>

Navigating fields

Like links, form fields (and field sets) need to be navigated to without the use of a pointing device, such as a mouse. The same methods used in links to make this task easier can be used on form elements — tab stops and access keys.

The accesskey and tabindex attributes can be added to the individual form tags such as input and also to legend tags.

<input name="firstName" accesskey="f" tabindex="1">

HTML5 Forms Pt. 1: Input Types

HTML5 greatly advances form controls, with numerous additional input types, several new attributes, and a handful of extra elements.

Additional input types

Basic form fields were created using the input element, including text, password, checkbox, radio, and submit, which have already been covered in the HTML Beginner section. These types have been extended in HTML5 to accommodate more specific fields:

Search

Used for a search query text box, this performs exactly as a standard text input should.

<input type="search" name="search">

The main intention of the inclusion of this input type in the HTML5 specification is one of style. As well as making your HTML clearer, you can also target this element with a CSS attribute selector:

input[type=search] { background: url(magnifyingglass.png) right no-repeat) }

Telephone, URL, and email addresses

Other “special” text input types include tel, for telephone numbers, url, for web addresses, and email, for email addresses.

<input type="tel" name="telephone_number">
<input type="url" name="web_address">
<input type="email" name="email_address">

You can use the :valid and :invalid CSS3 pseudo classes to style these fields depending on whether their content is considered valid.

input[type=email]:valid { background: green }
input[type=email]:invalid { background: red }

This example will paint an email field’s background green if the entered text is recognized as an email address (such as “sausage@htmldog.com”) or red if it isn’t (if the user were to type “sausages?”, for example).

Numbers and ranges

A simple text box that also allows a user to directly type in a number, or cycle through numbers (usually using an up and down arrow to the side of the field), can be achieved with type="number". A further step attribute can be added to specify how much is added or subtracted from the number with each increment.

If you also want the number to have a minimum or maximum value, you can further use the min and max attributes.

<input type="number" name="quantity" step="2" min="20" max="30">

Once again, if this is supported, the user will be able either to type directly into the field or, if using the arrows, cycle between 20 and 30, two units at a time.

You can use the :valid and :invalid pseudo classes in relation to this, too. If the user were to type “12”, for example, that would be invalid, because it isn’t between 20 and 30. If they typed “23” that would also be invalid because it isn’t a multiple of 2.

An alternative to the digits-in-a-text-box approach can be achieved using type="range". By default, this should be displayed as a horizontal bar with a slider in the middle of it. The user can then adjust the slider left and right, the far left resulting in a value of “0” and the far right a value of “100”. This range can be adjusted using the min and max attributes.

<input type="range" name="temperature" min="15" max="25" step="0.5" value="18.5">

Dates and times

There are several input types for dates and times:

• type="datetime"
• type="date"
• type="month"
• type="week"
• type="time"
• type="datetime-local"

If supported (they aren’t, widely, and they are also inconsistent between browsers), these will prompt the user to enter a date or time in a specific format, either by directly typing it in, cycling through one week/day/hour/minute/etc. at a time, or by selecting from a dropdown calendar.

step, min, and max attributes can be used with dates and times, too, as can the CSS pseudo classes to style according to validity.

Color

Finally, type="color" is designed to allow a user to select a color, sending a six-digit hex code as its value.

<input name="color" type="color" value="#ff8800">