Form Elements

There are variety of elements (also sometimes called “controls” or “widgets”) that can be used for gathering information from a form. This section looks at each control and its specific attributes. Every form control (except submit and reset) requires that you give it a name (using the name attribute) so the form-processing application can sort the information. The value of the name must not have any spaces (use underscores instead).

Input Controls: <input>

The following controls are entered as attribute options within the <input> tag.

Text entry

The simplest type of form element is the text entry field, which is the default setting for the <input> element. This field allows the user to enter a single word or a line of text. By default, the browser displays a box that is 20 characters wide, but you can set it to be any length using the size attribute.

The user can type an unlimited number of characters into the field (the display will scroll to the right if the text exceeds the width of the supplied box), but you can set a maximum number of characters using the maxlength attribute.

Use the value attribute to specify text to appear when the form is loaded. This can be changed by the user. If you have a form that consists of only one text input element, hitting the Enter key will submit the form without requiring a specific Submit button in the form. The following code creates a text field with a size of 15 characters, a maximum length of 50 characters, and the text ...

Get Web Design in a Nutshell now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.