# HTML Forms

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FunPJlhqSX0MdjOIvdlJJ%2Fimage.png?alt=media&#x26;token=22bcea0f-6572-42a5-8389-54ece4f6eb48" alt=""><figcaption></figcaption></figure>

### The \<form> Element

The HTML `<form>` element is used to create an HTML form for user input:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
.
form elements
.
</form>
```

{% endcode %}

The `<form>` element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

### The \<input> Element

The HTML `<input>` element is the most used form element.

An `<input>` element can be displayed in many ways, depending on the `type` attribute.

Here are some examples:

| Type                     | Description                                                      |
| ------------------------ | ---------------------------------------------------------------- |
| \<input type="text">     | Displays a single-line text input field                          |
| \<input type="radio">    | Displays a radio button (for selecting one of many choices)      |
| \<input type="checkbox"> | Displays a checkbox (for selecting zero or more of many choices) |
| \<input type="submit">   | Displays a submit button (for submitting the form)               |
| \<input type="button">   | Displays a clickable button                                      |

### Text Fields

The `<input type="text">` defines a single-line input field for text input.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>
```

{% endcode %}

### The \<label> Element

Notice the use of the `<label>` element in the example above.

The `<label>` tag defines a label for many form elements.

The `<label>` element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The `<label>` element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the `<label>` element, it toggles the radio button/checkbox.

The `for` attribute of the `<label>` tag should be equal to the `id` attribute of the `<input>` element to bind them together.

***

### Radio Buttons

The `<input type="radio">` defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>
```

{% endcode %}

### Checkboxes

The `<input type="checkbox">` defines a **checkbox**.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>
```

{% endcode %}

### The Submit Button

The `<input type="submit">` defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's `action` attribute.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
```

{% endcode %}

### The Name Attribute for \<input>

Notice that each input field must have a `name` attribute to be submitted.

If the `name` attribute is omitted, the value of the input field will not be sent at all.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>
```

{% endcode %}

### The Action Attribute

The `action` attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

In the example below, the form data is sent to a file called "action\_page.php". This file contains a server-side script that handles the form data:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
```

{% endcode %}

### The Target Attribute

The `target` attribute specifies where to display the response that is received after submitting the form.

The `target` attribute can have one of the following values:

| Value       | Description                                              |
| ----------- | -------------------------------------------------------- |
| \_blank     | The response is displayed in a new window or tab         |
| \_self      | The response is displayed in the current window          |
| \_parent    | The response is displayed in the parent frame            |
| \_top       | The response is displayed in the full body of the window |
| *framename* | The response is displayed in a named iframe              |

The default value is `_self` which means that the response will open in the current window.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php" target="_blank">
```

{% endcode %}

### The Method Attribute

The `method` attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with `method="get"`) or as HTTP post transaction (with `method="post"`).

The default HTTP method when submitting form data is GET.&#x20;

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
```

{% endcode %}

### The HTML \<form> Elements

The HTML `<form>` element can contain one or more of the following form elements:

* `<input>`
* `<label>`
* `<select>`
* `<textarea>`
* `<button>`
* `<fieldset>`
* `<legend>`
* `<datalist>`
* `<output>`
* `<option>`
* `<optgroup>`

### The \<input> Element

One of the most used form element is the `<input>` element.

The `<input>` element can be displayed in several ways, depending on the `type` attribute.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
```

{% endcode %}

### The \<label> Element

The `<label>` element defines a label for several form elements.

The `<label>` element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The `<label>` element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the `<label>` element, it toggles the radio button/checkbox.

The `for` attribute of the `<label>` tag should be equal to the `id` attribute of the `<input>` element to bind them together.

***

### The \<select> Element

The `<select>` element defines a drop-down list:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
```

{% endcode %}

The `<option>` elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the `selected` attribute to the option:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<option value="fiat" selected>Fiat</option>
```

{% endcode %}

#### Visible Values:

Use the `size` attribute to specify the number of visible values:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
```

{% endcode %}

#### Allow Multiple Selections:

Use the `multiple` attribute to allow the user to select more than one value:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
```

{% endcode %}

### The \<textarea> Element

The `<textarea>` element defines a multi-line input field (a text area):

{% code overflow="wrap" lineNumbers="true" %}

```markup
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<!-- You can also define the size of the text area by using CSS -->
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
```

{% endcode %}

### The \<button> Element

The `<button>` element defines a clickable button:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
```

{% endcode %}

### The \<fieldset> and \<legend> Elements

The `<fieldset>` element is used to group related data in a form.

The `<legend>` element defines a caption for the `<fieldset>` element.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
```

{% endcode %}

### The \<datalist> Element

The `<datalist>` element specifies a list of pre-defined options for an `<input>` element.

Users will see a drop-down list of the pre-defined options as they input data.

The `list` attribute of the `<input>` element, must refer to the `id` attribute of the `<datalist>` element.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
```

{% endcode %}

### The \<output> Element

The `<output>` element represents the result of a calculation (like one performed by a script).

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>
```

{% endcode %}

### HTML Input Types

Here are the different input types you can use in HTML:

* `<input type="button">`
* `<input type="checkbox">`
* `<input type="color">`
* `<input type="date">`
* `<input type="datetime-local">`
* `<input type="email">`
* `<input type="file">`
* `<input type="hidden">`
* `<input type="image">`
* `<input type="month">`
* `<input type="number">`
* `<input type="password">`
* `<input type="radio">`
* `<input type="range">`
* `<input type="reset">`
* `<input type="search">`
* `<input type="submit">`
* `<input type="tel">`
* `<input type="text">`
* `<input type="time">`
* `<input type="url">`
* `<input type="week">`

### Input Type Text

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>
```

{% endcode %}

### Input Type Password

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>
```

{% endcode %}

### Input Type Submit

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's `action` attribute:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<!-- If you omit the submit button's value attribute, the button will get a default text -->

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>
```

{% endcode %}

### Input Type Reset

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
```

{% endcode %}

### Input Type Radio

Radio buttons let a user select ONLY ONE of a limited number of choices.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>
```

{% endcode %}

### Input Type Checkbox

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>
```

{% endcode %}

### Input Type Button

{% code overflow="wrap" lineNumbers="true" %}

```markup
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
```

{% endcode %}

### Input Type Color

Depending on browser support, a color picker can show up in the input field.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>
```

{% endcode %}

### Input Type Date

Depending on browser support, a date picker can show up in the input field.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>
```

{% endcode %}

You can also use the `min` and `max` attributes to add restrictions to dates:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
```

{% endcode %}

### Input Type Datetime-local

Depending on browser support, a date picker can show up in the input field.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
```

{% endcode %}

### Input Type Email

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>
```

{% endcode %}

### Input Type Image

The path to the image is specified in the `src` attribute.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
```

{% endcode %}

### Input Type File

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>
```

{% endcode %}

### Input Type Hidden

A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.

**Note:** While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>
```

{% endcode %}

### Input Type Month

Depending on browser support, a date picker can show up in the input field.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>
```

{% endcode %}

### Input Type Number

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
```

{% endcode %}

### Input Restrictions

Here is a list of some common input restrictions:

| Attribute | Description                                                                                                    |
| --------- | -------------------------------------------------------------------------------------------------------------- |
| checked   | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled  | Specifies that an input field should be disabled                                                               |
| max       | Specifies the maximum value for an input field                                                                 |
| maxlength | Specifies the maximum number of character for an input field                                                   |
| min       | Specifies the minimum value for an input field                                                                 |
| pattern   | Specifies a regular expression to check the input value against                                                |
| readonly  | Specifies that an input field is read only (cannot be changed)                                                 |
| required  | Specifies that an input field is required (must be filled out)                                                 |
| size      | Specifies the width (in characters) of an input field                                                          |
| step      | Specifies the legal number intervals for an input field                                                        |
| value     | Specifies the default value for an input field                                                                 |

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
```

{% endcode %}

### Input Type Range

The `<input type="range">` defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the `min`, `max`, and `step` attributes:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>
```

{% endcode %}

### Input Type Search

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>
```

{% endcode %}

### Input Type Tel

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
```

{% endcode %}

### Input Type Time

Depending on browser support, a time picker can show up in the input field.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>
```

{% endcode %}

### Input Type Url

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>
```

{% endcode %}

### Input Type Week

Depending on browser support, a date picker can show up in the input field.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>
```

{% endcode %}