Input Elements in HTML

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">

• 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" />

• 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">

• 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">

• 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>

• 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">

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.