The Input element in HTML

The Input element in HTML

Introduction

The tags and the contents written inside are combined to form an HTML element. To get the data from the user, we have to provide an input field like form inside the user interface. This is done using input tags in HTML. Input tags are used for accepting many types of input from the user, it can be normal text, number, email, password, colour, date, time and many more. In this article, we will be discussing the input element in more detail.

The syntax for the input element is shown below:

<input type="text">

Output:

When we write the above code we get an empty box in the browser, where we can enter our text or number or characters. The default input type is text.

There are various input types which are used for different use cases, input type="button" can be used when we need a button on the webpage, submit can be used for submitting the user inputs, reset can be used for resetting the entered values to default, colour for selecting a colour, the password can be used for accepting user's password etc.

button

The syntax for the button input type is shown below:

<input type="button" value="Button">

Output:

In the image above, the left button is created using the input element while the right one is created using the button tag. The output is the same in both cases.

email

The syntax for email input type is below:

<input type="email">

Output:

An input box will be rendered on the webpage, where we can enter the email id.

checkbox

The checkbox is used when we have to give one or more options to a user at a time. The syntax for the checkbox input type is as follows:

<label for="checkbox">Select one or more:</label>
<input type="checkbox" name="firstCheckbox" id="checkbox">
<input type="checkbox" name="secondCheckbox" id="checkbox">
<input type="checkbox" name="thirdCheckbox" id="checkbox">

There is a label tag in the HTML form which is used for labelling the input element on the webpage. To attach the label with their respective input elements the id attribute is used. If there are three checkboxes for ticking and all are associated with the same question, in that case, the ids of all the three input elements must be the same as shown. When the label is connected with the input if the user interacts with the label the focus moves to the respective input element. This is enhancing the user experience and accessibility of the webpage.

Output for the above checkbox:

radio

The input-type radio is similar to a checkbox but the main difference is only one option can be ticked at a time. The syntax for radio is:

<label for="radio">Choose one option:</label>
<input type="radio" name="radio" id="radio">
<input type="radio" name="radio" id="radio">
<input type="radio" name="radio" id="radio">

In the case of the radio button, we have to select only one option from the available multiple options, so the name should also be the same, the id is used inside the attribute of the label to functionally attach the input element.

Output:

color

The input value color is used for taking the colour input from the user, the syntax for the same is :

<input type="color">

There is an RGB colour palette rendered on the webpage, user can select a colour from it. When clicked a colour palette as shown below is appeared.

password

The input type password is used for password input. The syntax is:

<input type="password">

Output:
Be it any letter, number or character the browser will hide it and a dot will be appeared against every keystroke, one such password input box is shown below.

file

In many cases, we have to upload some files to the website. Suppose, we have to compress an image online or edit an image using some online AI tool. To perform any action on our locally stored image, the image must be uploaded to the website first. Accept files from the user, the input type will be a file, and the syntax will be:

 <input type="file">

Output:

When a user interacts with the choose file option the local files will be shown to select the desired one.

date

For date, the date input type can be used, it will load a calendar on the webpage. The syntax and the browser output are shown below:

<input type="date">

Output:

On clicking the calendar icon, the calendar is shown so that the user can enter the date.

month

The month type is for entering the month and year from the user without the time zone. The syntax and output are shown below:

<input type="month">

Output:

The calendar contains only the month and year, in this case.

range

The input type range is written inside the HTML document as follows:

<input type="range">

It will be used when we have to provide a slider to select the value. The browser output looks like this:

time

This input type is used for entering the time without a time zone. When the user clicks on the clock icon to select an hour and minute option will appear.

<input type="time">

Output:

url

This input type will help users in entering an URL to the webpage.

<input type="url">

It will look similar to the name, email or password input box.

Different attributes of the input tag

There are various attributes of input tags other than the type attribute. Some of the attributes are name, id, checked, disabled, max, min, height, width, required etc.

name

The name attribute is used for the name of the form control.

<input type="password" name="password">

id

The id attribute is used for targetting the input element.

<label for="radio">Choose the correct one:</label>
<input type="radio" name="option1" id="radio">
<input type="radio" name="option2" id="radio">
<input type="radio" name="option3" id="radio">

With the id "radio", in all three options, the three input elements get associated with the label "Choose the correct one:".

required

When the required attribute is used inside an input tag that means the user can't skip that information before submitting the form.

<input type="text" required>

If the user is skipping that required field a warning will be popped.

checked

The checked attribute set the default value for checkboxes and radio buttons, the example is shown below:

<label for="radio">Choose the correct one:</label>
<input type="radio" name="option1" id="radio">
<input checked type="radio" name="option2" id="radio">
<input type="radio" name="option3" id="radio">

Since the checked attribute is written inside option 2 it will be checked by default on the webpage. We can change the option when we want, but if we refresh the page without saving it will get back to default.

placeholder

The placeholder attribute is used for telling the user what to enter inside the input box, it helps in making the webpage more accessible.

The use of placeholder attributes is shown in the example below:

<input type="password" name="password" id="password" placeholder="password">

Output:

min and max

The min and max attributes are used to set the minimum and maximum acceptable values. Example:

<input type="number" min="3" max="15">

In the above example, the number entered should range between 3 and 15.

disabled

When the disabled attribute is used the input element is disabled, it will be grey and the user can't interact with it. An example is shown below:

<p>Normal Button</p>
<input type="button" value="Normal Button">
<p>Disabled Button</p>
<input type="button" value="Disabled Button" disabled>

The difference between the normal button and the disabled button can be easily identified.

There are many more attributes, kindly refer to the MDN docs for more explanation.

Thanks for reading and GOOD LUCK.