# Html Forms and Inputs

**<mark>HTML forms are used to collect user input, and input elements within forms allow users to enter various types of data</mark>**. The `<form>` element acts as a container for different input fields, and the `<input>` element is the primary way to create interactive controls for data entry. 

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

All the different form elements are covered in this chapter: [HTML Form Elements](https://www.w3schools.com/html/html_form_elements.asp).

## The &lt;input&gt; 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.

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

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

**Example:**

&lt;form&gt;  
  &lt;label for="fname"&gt;First name:&lt;/label&gt;&lt;br&gt;  
  &lt;input type="text" id="fname" name="fname"&gt;&lt;br&gt;  
  &lt;label for="lname"&gt;Last name:&lt;/label&gt;&lt;br&gt;  
  &lt;input type="text" id="lname" name="lname"&gt;  
&lt;/form&gt;

This is how the HTML code above will be displayed in a browser:  

![HTML Form Elements (With Examples)](https://www.programiz.com/sites/tutorial2program/files/html-form-inputs-legend.png align="left")

## The &lt;label&gt; 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 focuses on the input element.

The `<label>` element also helps 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.

### Example

A form with radio buttons:

&lt;p&gt;Choose your favorite Web language:&lt;/p&gt;  
  
&lt;form&gt;  
  &lt;input type="radio" id="html" name="fav\_language" value="HTML"&gt;  
  &lt;label for="html"&gt;HTML&lt;/label&gt;&lt;br&gt;  
  &lt;input type="radio" id="css" name="fav\_language" value="CSS"&gt;  
  &lt;label for="css"&gt;CSS&lt;/label&gt;&lt;br&gt;  
  &lt;input type="radio" id="javascript" name="fav\_language" value="JavaScript"&gt;  
  &lt;label for="javascript"&gt;JavaScript&lt;/label&gt;  
&lt;/form&gt;

![10+ Radio Button CSS style Examples - DEV Community](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fc260ismydk1rj54ykvpt.png align="left")

## Checkboxes :

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

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

### Example

A form with checkboxes:

&lt;form&gt;  
  &lt;input type="checkbox" id="html" name="HTML" value="HTML"&gt;  
  &lt;label for="html"&gt; this is html&lt;/label&gt;&lt;br&gt;  
  &lt;input type="checkbox" id="css" name="CSS" value="CSS"&gt;  
  &lt;label for="css"&gt; this is CSS&lt;/label&gt;&lt;br&gt;  
  &lt;input type="checkbox" id="javascript" name="JavaScript" value="Boat"&gt;  
  &lt;label for="javascript"&gt; this is JavaScript&lt;/label&gt;  
&lt;/form&gt;

This is how the HTML code above will be displayed in a browser:

![HTML <input type=”checkbox”> | GeeksforGeeks](https://media.geeksforgeeks.org/wp-content/uploads/20240519094455/HTML-Input-Type-Checkbox.gif align="left")

## 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.

### Example

A form with a submit button:

&lt;form action="/action\_page.php"&gt;  
  &lt;label for="fname"&gt;First name:&lt;/label&gt;&lt;br&gt;  
  &lt;input type="text" id="fname" name="fname" value="John"&gt;&lt;br&gt;  
  &lt;label for="lname"&gt;Last name:&lt;/label&gt;&lt;br&gt;  
  &lt;input type="text" id="lname" name="lname" value="Doe"&gt;&lt;br&gt;&lt;br&gt;  
  &lt;input type="submit" value="Submit"&gt;  
&lt;/form&gt;

[Try it Yourself »](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit)

This is how the HTML code above will be displayed in a browser:

![HTML <input type=”submit”> | GeeksforGeeks](https://media.geeksforgeeks.org/wp-content/uploads/20240519125902/HTML-Input-Type-Submit.png align="left")