Text input

Accepts any characters. Often used to prompt username.

Number input

Accepts only numbers and decimal point. Can be used to prompt the age of the user.

Email input

Accepts only a valid email address - which contains both at (@) and dot (.) character.

Password input

Displays dots instead of characters.

Checkbox

A box which has a checked and unchecked state.

Radio button

Similar to checkbox but only one radio can be checked in the same group (radios which have name attribute with the same value).

Date input

When clicked it displays a calendar where user can pick a day.

File input

When clicked it opens the file picker of the OS where the user can upload a file.

Color input

When clicked it displays the color picker of the OS where user can choose a color.

Range

Displayed as a line which has a head pointing at a number value between the min and max values (8 and 64 in the example). Min is 0, max is 100 when not specified.

You can see an example in the Password generator of FosseryWeb (Number of characters).

Textarea

Multi-line text input, which can be resized by the user (unless it's disabled by the CSS property resize). Cols and rows attributes provide the default size (when page is loaded).

Select one

A dropdown input with predefined options.

Required attribute

The required attribute prevents the form from being submitted if the field is left empty.

Write short explanation to input fields

Or:

In the second example the label and input element are connected with the id and for attributes (which both have the same value). If user clicks the label the input gets focus.

Reset button

Deletes all values provided by the user.

Submit button

Or:

Submits the user provided data to the server.

Form container

You want to embed input fields and submit button into a form element which defines which fields' values should browser send to the server when form is submitted.

Fieldsets

If you have a longer form with a lot of input, a practical solution is to organize inputs into different fieldsets (which are displayed with a border by default). You can also give them a name by providing a legend element.

Example for a functional form

The form element has an action attribute which defines where to submit the form. In this example the form is submitted to youremail@proton.me via a 3rd party service called AirForm. (If you have your own server, you may want to set action to / or whatever route you want). The method defines what browser should do with the filled form. POST is the most common value which means sending a form to somewhere.

Each input fields have a name attribute. User provided values are paired to the values of these name attributes when the form is submitted. In case of checkbox, radio and select fields the value of the value attribute is paired to the value of the name attribute.