HTML & CSS: Forms 3

Text Box

A text box allows the user to enter information. It has several attributes that can be set:
- type: "text", "password" or "hidden"
- maxlength: maximum number of characters
- size: the width of the field in characters
- autofocus: the browser will set the focus on this field
- placeholder: puts a default value or hint in the field
- value: the default for the field

In the example below, each text box is given an 'id' value. The 'size' is set to 50 characters. Also, 'placeholder' is included for all 4 text boxes, and 'autofocus' is included in the first text box.

Button

A button is also included in the example above. This is a 'reset' button; clicking it clears all the text boxes. You get a 'reset' button by setting 'type' to 'reset'. The 'value' field determines what displays on the button.

Another option for a button is 'submit'. You get a 'submit' button by setting 'type' to 'submit'.

Text Area

A text area is similar to a text box, with the difference that a text area can display several lines:

You can use CSS to control the height and width of the text area:

Here is the text area with many digits of PI:

Exercise

Use 3+ text boxes to ask the user some questions. Include these attributes: id, size, placeholder and autofocus (for one of the text boxes). Add a 'reset' button. Then add a text area. Use 'placeholder'. Use CSS to set the height, width and font of the text area.