# HTML Forms

## Text input

```html
<input type="text">
```

Accepts any characters. Often used to prompt username.

## Number input

```html
<input type="number">
```

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

## Email input

```html
<input type="email">
```

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

## Password input

```html
<input type="password">
```

Displays dots instead of characters.

## Checkbox

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

A box which has a checked and unchecked state.

## Radio button

```html
<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

```html
<input type="date">
```

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

## File input

```html
<input type="file">
```

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

## Color input

```html
<input type="color">
```

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

## Range

```html
<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](https://fosseryweb.codeberg.page/utils/password-generator.html) (Number of characters).

## Textarea

```html
<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

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

A dropdown input with predefined options.

## Required attribute

```html
<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

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

Or:

```html
<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

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

Deletes all values provided by the user.

## Submit button

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

Or:

```html
<button>Submit</button>
```

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.

```html
<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.

```html
<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

```html
<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>
```

Deletes all values provided by the user.

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.