Introduction to Web Forms

What are web forms?

Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage, or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

A web form's HTML is made up of one or more form controls. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons.

Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and visually impaired users.

The
element

All forms start with a <form> element, like this:

<form action="/my-handling-form-page" method="post">…</form>

The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted.

The method attribute defines which HTTP method to send the data with (usually get or post).

Single line text fields

A single line text field is created using an <input> element whose type attribute value is set to text.

Password field

One of the original input types was the password text field type. Each input character is shown as a dot.

Hidden content

Another original text control is the hidden input type. This is used to create a form control that is invisible to the user, but is still sent to the server along with the rest of the form data once submitted. For example, you might want to submit a timestamp to the server stating when an order was placed.

If you create such an element, it's required to set its name and value attributes.

Checkboxes and Radio Buttons

Checkable items are controls whose state you can change by clicking on them or their associated labels. There are two kinds of checkable items: the checkbox and the radio button. Both use the checked attribute to indicate whether it is checked by default or not.

In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name. If they are checked but have no value, the name is sent with a value of on.

Checkbox

A checkbox is created using the <input> element with a type attribute set to the value checkbox. Related checkbox items should use the same name attribute.

Radio button

A radio button is created using the <input> element with its type attribute set to the value radio.

Several radio buttons can be tied together. If they share the same value for their name attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at a time; this means that when one of them is checked all the others automatically get unchecked.

When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.