Common form elements, attributes, and styles

This template includes example fieldsets, legends, inputs, labels, textareas, select options, and buttons which can be used inside form tags.

View the source of this page to see how tags are nested, closed, and embellised with accesskeys and tabindexes.

Accesskeys are labeled with an underline and can be used with the Alt-Shift (Windows) or Control (Mac) keys.

The following topics used in the form controls below may NOT be used for the Assignments. Define the purpose, text, values, to be unique from the demos.

Input controls with various type attributes Type Text. Type Email with pattern. Type URL for web address with pattern. Type Tel for telephone numbers with pattern. Or, improve useability and accuracy with three patterns.
()- - Type Search with pattern. Type Password with pattern and autocomplete. Type Number with up/down arrows. Type Date with calendar picker.
Similar types include datetime-local, month, time, and week. Type Range with steps, tickmarks, and output Type File with acceptable list of file types.

Input types for multiple or single selections.

Checkboxes for multiple selections.

boxes a boxes b (this one is checked) boxes c

Radio buttons for a single selection.

radio1 radio2 radio3

Dropdown list of select options in groups. Select multiple options

Disabled Input This input is disabled until a required field has input.

Multi-line text field with scrolling Textarea field

Use the drag corner to stretch the textbox to the right and down.

Buttons Submit with an image. Submit with a . with an Input of type Submit. to empty the form.