More Form Controls and Validation

Introduction

A text box is not the only control. In this lesson you will meet the rest of the family, and learn how HTML itself can check what a visitor typed, without any JavaScript.

Textarea and select

• textarea is a multi-line text box, good for messages.
• select is a drop-down list. Each choice is an option.

A textarea has a closing tag, because its content is the starting text.

Grouping with fieldset

fieldset groups related controls and legend names the group. It is very helpful for radio buttons, because screen readers announce the legend before each option.

Built-in validation

Add attributes to a control and the browser checks it before sending:

• required: the field cannot be empty.
• minlength and maxlength: limits on text length.
• min and max: limits on numbers and dates.
• type="email": must look like an email address.
• pattern: a regular expression the text must match.

Press Join with the fields empty or wrong. In most browsers you will see a message from the browser itself. (The result panel blocks real sending, so a valid form simply does nothing.)

Validation is not security

Browser checks are friendly, but anyone can bypass them, for example by editing the page or sending data directly. A real website must check the data again on its server. Treat HTML validation as help for the visitor, never as protection.

Try it yourself

Add a number input called age that is required and only allows values from 5 to 18. Then press Join with an age of 40 to see the message.

Summary

• textarea, select/option and fieldset/legend complete your form toolkit.
• required, min, max, minlength, maxlength, pattern and special types give you free checks.
• Always validate again on a server. Browser validation is not security.