Creating a Form - HTML5 - page 153

The question mark after the name of the referenced page ( mailForm.php ) indicates that what fol-
lows is one or more name/value pairs. With forms, the name portion of the pair corresponds to a
form control's id value, which, here, is fullName . The value that follows is what was entered in the
form text field, in this case Joseph Lowery . The %20 between the first and last names is a URL-
encoded value for a space.

usinG TeXT and TeXTarea Fie XT XT area Fie Lds

Text fields come in two flavors. When an <input> tag's type attribute is set to text , a single-line
text field is rendered in the browser, best used for a limited set of characters. Use the < textarea>
tag when you want a more open-ended multi-line entry, capable of handling larger blocks of text.

Take a look at the smaller text field first. The code for creating a basic text field is straightforward:

<input type=”text” name=”firstName” id=”firstName” />

Although it's apparently redundant, it is best to include both the name and id attributes with the
same value. The name attribute is required and should be both meaningful and unique on the page.
The id attribute is important for accessibility, most notably providing a hook for the <label> tag's
for attribute.

With CSS you can set the width, alignment, and font characteristics for a text field.

HTML5 brings a wide range of new attributes to the <input> tag. However, most are not supported
across all browsers as of this writing. Some of the more interesting ones to keep an eye on are:

➤ ➤

: When this attribute is set to on , browsers remember previous entries and will
display them in a list when the user types the first couple of letters. If set to off , the entries
are stored.

autocomplete

➤ ➤

: Allowed only once per form, it establishes the active form control when the page
loads. Use the following syntax for the attribute: autofocus=”autofocus” .

autofocus

➤ ➤

: Determines the maximum number of characters allowed. max

➤ ➤

: Sets the minimum number of characters allowed.

min

➤ ➤

: The value of this attribute is initially shown in the text field and then removed
when the form control is given focus.

placeholder

➤ ➤

: Ensures that the form field has an entry when the form is submitted. required

Currently, support for these attributes is most complete in Opera 10.x and Safari 5.x browsers.

Many other form controls share the <input> tag with the text type. Web
designers often add a custom CSS class to their text fields to allow for more
selective customization.