FosseryWeb

Text input

<input type="text">

Accepts any characters. Often used to prompt username.

Number input

<input type="number">

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

Email input

<input type="email">

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

Password input

<input type="password">

Displays dots instead of characters.

Checkbox

<input type="checkbox"> I agree with the Terms of Condition

A box which has a checked and unchecked state.

Radio button

<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<input type="radio" name="gender"> Other

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

<input type="date">

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

File input

<input type="file">

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

Color input

<input type="color">

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

Range

<input type="range" min="8" max="64">

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

<textarea cols="69" rows="3"></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

<select>
  <option>(choose an option)</option>
  <option>Male</option>
  <option>Female</option>
  <option>Other</option>
</select>

A dropdown input with predefined options.

Required attribute

<input type="email" required>

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

Write short explanation to input fields

<label>Username: <input type="text"></label>

Or:

<label for="username">Username:</label>
<input type="text" id="username">

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

<input type="reset" value="Reset">

Deletes all values provided by the user.

Submit button

<input type="submit" value="Submit">

Or:

<input type="submit" value="Submit">

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.

<form>
  <label>Email: <input type="email" required></label>
  <label>Password: <input type="password" required></label>
  <button>Login</button>
</form>

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.

<form>
  <fieldset>
  <legend>Personal information</legend>
  <label>Name: <input type="text" required></label>
  <label>Age: <input type="number"></label>
  <label>Gender: </label>
  <label><input type="radio" name="gender"> Male</label>
  <label><input type="radio" name="gender"> Female</label>
  <label><input type="radio" name="gender"> Other</label>
</fieldset>
<fieldset>
  <legend>Contact information</legend>
  <label>Email: <input type="email" required></label>
  <label>Matrix: <input type="text"></label>
</fieldset>
<button>Submit</button>
</form>

Example for a functional form

<form action="https://airform.io/youremail@proton.me" method="POST">
  <fieldset>
  <legend>Personal information</legend>
  <label>Name:
  <input type="text" name="name" required></label>
  <label>Age:
  <input type="number" name="age"></label>
  <label>Gender: </label>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
  <label><input type="radio" name="gender" value="other"> Other</label>
</fieldset>
<fieldset>
  <legend>Contact information</legend>
  <label>Email:
  <input type="email" name="email" required></label>
  <label>Matrix:
  <input type="text" name="matrix"></label>
</fieldset>
<button>Submit</button>
</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.