Input Elements in HTML
Tags: webdev, beginners, html, iwritecode
Published: 2023-03-21 14:04:26

##The Input Element
The `<input />` element in HTML is used to receive data from the user. The tag creates an area where the user can enter the data. There are several attributes which change the behavior of the input element based on the selected attribute. The input element is used with the HTML Form element. We can also use `<label>` element with input to associate a name with the input field. 

## The Label Element
The `<label>` element is used to label the accompanying `<input />` element. The label is connected to the input element by using `for` attribute of the label element which contains the id for the input element. The label element also used to work with screen readers for accessibility purposes. 

```
<label for="name">First name:</label>
```

## General Syntax

```
<input type="text" id="name">
```

## Some frequently used attributes of the input element. 

- Input type text

With `type="text"`, you gets a filed in which you can enter some text. This is the most frequently used attribute, this is generally used for user-name field. The field type text doesn't mean that you can only insert text in the field. 
```
<label for="txt">Type text</label>
<input type="text" id="txt">
```

![Image of text field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57ewcmu78svikgs5681j.png)

- Input type password

As the name suggests, this field is used to get the password from the user as an input. The difference between `type="text"` and `type="password"` is than when you enter your password or any text for the matter in the password field, the password is turned into star symbol or dots, depending on the browser so that others can't read your password.
```
<label for="pass">Type password</label>
<input type="password" id="pass" />
```

![Image of password field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nekqiy44rlknyxjr5ga.png)
- Input type number

In `type="number"`, you can enter numbers by default, in some browsers e.g. in Firefox you can also enter text into this field. You can use certain attributes to define the value entered. E.g. `step="20"`,`min="10"`, `max="110"` etc. With these values the input box will take the number values from 10 to 110 with 20 numbers gap between.
```
<label for="num">Type number</label>
<input type="number" name="" id="num" step="20" min="10" max="110">
```

![Image of number field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/474wrd44od2jhsekp5a6.png)
- Input type checkbox

With `type="checkbox"` you get checkboxes which you can label with the `label` element. The checkbox have two states, checked or unchecked. The checkbox is unchecked by default.
```
<label for="red">Red</label>
<input type="checkbox" name="" id="red">
						
<label for="blue">Blue</label>
<input type="checkbox" name="" id="blue">
			
<label for="green">Green</label>
<input type="checkbox" name="" id="green">
```


![Image checkboxes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pmwmlwzvlt2j23m29rj.png)
- Input type radio


In `<input type="radio" />`, you get radio buttons with accompanying options. The radio button have two states, selected or not selected. The checkbox is not selected by default .By default you can select any number of radio buttons you want just like the checkboxes, but you can change this behavior by giving the radio buttons with same `name` value. In the below code I've given `name="colors"` so I can select only one radio button at a time.
```
<input type="radio" name="colors" id="red" />
<label for="red">Red</label>

<input type="radio" name="colors" id=blue"">
<label for="red">Blue</label>

<input type="radio" name="colors" id="green" />
<label for="red">Green</label>
```

![Image of radio buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1vfnj7sgyis2uuhisab.png)

- Input type range

In `<input type="range" />`, you get a slider, the slider have the values on it from 0 to 100. You can customize the number of steps by using the `step` attribute, for example in the code below the slider will move 10 steps at a time, like 0-10, 10-20 and so on.  
```
<label for="range">10 step scale</label>
<input type="range" step="10">

```

![Image range slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jqv6q2aw0aw5ptnv87y.png)

## Conclusion 
There is a lot more I can write about the input element but in this article I've given you the basic introdunction of the input tag and some of the most common attributes which are used with the `<input>` element. 

Hope you liked the article.