Creating a Form - HTML5 - page 154

The code for inserting a multi-line <textarea> form control is quite different from that of a stan-
dard text field:

<textarea name=”comments” id=”comments” cols=”50” rows=”5”> Tell us about yourself
in 100 words or less</textarea>

Unlike the <input> tag, <textarea> has both
opening and closing tags. Any content within the
<textarea> tag pair is displayed in the field itself
as shown in Figure 19-2. The size of the textarea
field can be set in two ways. HTML5 recognizes the
rows and cols attributes, which define the number
of lines (the height) and number of characters in
each row (the width), respectively. Alternatively, you
can create a CSS rule for the textarea selector with
width and height properties.

In HTML5, the <textarea> tag supports the
autofocus , placeholder , and required attri-
butes previously discussed. In addition, it has a
few other attributes specific to itself:

FiGure 19-2

➤ ➤

: Sets the number of characters permitted in the textarea. maxlength

: Determines how the text will be submitted. If wrap=”hard” , line breaks are added at
the cols value; if wrap=”soft” , no breaks are added.

➤ ➤

wrap

Try iT

In this Try It you learn how to create a form with text and textarea fields.

Lesson requirements

You will need the tpa_saturn.html file from the Lesson_19 folder, as well as a text editor and web
browser.

You can download the code and resources for this lesson from the topic's web
page at www.wrox.com .

step-by-step
1. Open your text editor.

2.

From the Lesson_19 folder, open tpa_saturn.html .