HTML Input: Step-by-Step Guide

The HTML input tag creates an input field in which a user can insert data. Common inputs include text fields, checkboxes, radio buttons, and email fields. An input tag should be labelled using a <label> tag.

Forms in HTML consist of a number of input elements, which are used to accept data on the front-end of a website. For instance, a web form could contain a checkbox input, a text input, and a radio button input with which the user can interact.

The <input> tag is used to define an input element in an HTML form. Data submitted through an input tag can be represented in a wide range of data types. These range from text to numbers to yes/no responses.

This tutorial will discuss, with reference to examples, how to use the <input> tag to accept form input in a front-end website. By the end of reading this guide, you’ll be a master at using the HTML <input> tag to accept user input.

HTML Forms

Forms are an essential part of many websites that allow users to interact with the site. Forms allow users to submit data to a site. This data can be processed either by the client or a back-end server and database.

In HTML, web forms are declared within the <form> element. Here’s the syntax for the <form> element:

<form>
	... Form elements ...
</form>

Inside a <form> tag is where the elements inside a form are stored. Form elements can include text fields, submit buttons, radio buttons, multiline text boxes, and other types of input data accepted in HTML.

HTML Input

The <input> element defines a form field in which a visitor can submit data. <input> supports fields such as a date picker, a checkbox, a button, and a file uploader.

The syntax for the <input> element is as follows:

<input type="inputType">

The <input> element accepts a number of attributes, but the main attribute you must specify is the type attribute. If you do not specify a type attribute, the <input> element will not appear on a web page. This is because the <input> element is empty by default.

Let’s walk through a few examples to demonstrate how the HTML <input> tag works.

We have been asked to create a form for a local sandwich and salad store, Sue’s Salads. This form should allow customers to submit feedback based on their experience in the store. The form we have been asked to create should accept:

• The customer’s name (as text)
• A checkbox to indicate if the customer is a subscriber to the store’s loyalty program (a checkbox)
• A 1-5 rating based on the customer’s experience at the store (as a number)

HTML Input Types

The <input> tag accepts a range of input types. An input type is specified using the “type” attribute. Common input types include buttons, date pickers, password fields, and text fields.

Here is a brief list of common form control input types used with the <input> tag:

• button
• file
• checkbox
• password
• number
• radio
• submit
• text (text input type)
• url
• date (date and time picker)
• image
• email (email address input control)

Input Types HTML Examples

Let’s create a few form fields using the <input> HTML tag.

Text Fields

The <input type=”text”> element is used to create a text field in HTML. Suppose we want to create a text field that asks a customer for their name. We could do so using this code:

<input type="text" placeholder="What is your name?">

In our code, we have created a text field with two attributes. The type attribute is set to text, which means our form can accept text inputs. The placeholder attribute is assigned the value What is your name?.

This text will appear as a placeholder value until a user starts typing text into the field.

Our code returns:

<input type="text" placeholder="What is your name?">

As you can see, we have created a text field with the placeholder value What is your name?

Checkboxes

In HTML, checkboxes are marked up as inputs that are of type checkbox:

<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> 
<label for="loyalty">Are you a subscriber to our loyalty program?</label>

This code creates a checkbox button that displays the text “Yes”. If the checkbox is clicked, it will be highlighted.

Our checkbox has the label “Are you a subscriber to our loyalty program?” If you click on the label, the checkbox is toggled. The label input type is essential for accessibility as it ensures the reader can easily find out about the contents of a form.

To learn more about HTML labels, read our guide on the HTML <label> tag.

Checkboxes have several attributes associated with them. 

• Type attribute. The input type needs to be set to checkbox.
• ID. Remember with ID’s they have to be unique to your file.
• Name and value. The name and value are useful to have assigned so that can deal with the data that is collected after the form is submitted.
• Checked. The checked attribute, because it is not assigned to anything, is known as a boolean attribute. Having checked there means that it is automatically set to true. The default is false, so you only have to set it if you would like for the checkbox to be checked. 

Radio Buttons

The <input type=”radio”> element is used to create a radio button in HTML.

The term “radio button” comes from the car industry, oddly enough. Car stereos used to have physical buttons where only one button could only be pushed at a time. If you were to push another selection, the previous button would be deselected. 

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

The difference between using checkboxes and a set of radio buttons is that the radio buttons let you choose only one selection. The rest of the buttons disable after you check your selection so more than one radio button can’t be selected. Checkboxes, on the other hand, can have multiple selections. 

To change checkbox inputs to radio button inputs, you have to do two things. First, change the input type to radio. Lastly, make sure the name value matches on all the radio buttons. This is what disables the rest of the buttons when one is selected.

Let’s say we want to create a field which asks whether a user is a subscriber to Sue’s Salads’ customer loyalty program. We could create the field using this code:

<label for="yes">Yes</label>
<input type="radio" value="yes" id="yes" />
<label for="no">No</label>
<input type="radio" value="no" id="no" />

Our code returns:

<label for="yes">Yes</label>
<input type="radio" value="yes" id="yes">
<label for="no">No</label>
<input type="radio" value="no" id="no">

In our code, we created two radio buttons. The first radio button is assigned the label Yes and has the value yes. Our second radio button is assigned the label No and has the value no.

Number Fields

The <input type=”number”> element is used to accept numeric input in a form.

Suppose we wanted to create a form that asks a customer at Sue’s Salads to rate their experience at the store. Customers should give a numerical grade between 1 and 5. We could create a web form that collects this data using the following code:

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label>
<input type="number" min="1" max="5" />

Our code returns:

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label>
<input type="number" min="1" max="5">

We created a form field that accepts any number between 1 and 5. This field can only accept numbers. If a user tries to type in any text into the field, the text will not be processed.

In addition, because this form field has the number type, two small arrows appear inside the box. When the up arrow is clicked, the value in our field will be increased by 1. If the down arrow is clicked, the value in our field will decrease by 1.

Conclusion

The HTML <input> tag is used to accept user input in a form. The <input> tag can be used to accept numerical values, text, dates, yes/no responses, and other types of data.

This tutorial discussed, with reference to examples, how to use the HTML <input> tag, and the attributes available for use with the <input> tag. Now you’re ready to start using the <input> tag to create form field elements like an HTML pro!

If you want to learn more about HTML, check out our complete guide on how to learn HTML.