The HTML input tag is used to create an input field in an HTML form. HTML inputs can be created using the
<input> tag and defined with the
Web forms in HTML consist of a number of input elements, which are used to accept data from a user. For instance, a web form could contain a checkbox input, a text input, and a radio button input with which the user can interact.
<input> tag is used to define an input element in an HTML form. The
<input> tag allows you to accept data that is represented in a wide range of data types, 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 HTML. By the end of reading this guide, you’ll be a master at using the HTML
<input> tag to accept user input.
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, which can then be processed either by the client or processed and stored by a server.
In HTML, web forms are declared within the
<form> element. Here’s the syntax for the
<form> // Form elements. </form>
<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.
To learn more about HTML forms, you can read our tutorial on the
<form> tag here.
<input> element is used to accept user input in a form. Without
<input> elements, a web form cannot function. The syntax for the
<input> element is as follows:
<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.
Suppose we have been asked to create a form for a local sandwich and salad store, Sue’s Salads, which allows 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)
- Whether 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)
Let’s create these form fields using 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?, which will appear as a placeholder value until a user starts typing text into the field.
Our code returns:
As you can see, we have created a text field with the placeholder value
What is your name?
<input type=”radio”> element is used to create a radio button in HTML. 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:
In our code, we created two radio buttons. The first radio button is assigned the label
Yes and has the value
yes, and the second radio button is assigned the label
No and has the value
<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 by giving 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:
In this example, we created a form field that accepts any number between 1 and 5. This field can only accept numbers, and so 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; when the down arrow is clicked, the value in our field will decrease by 1.
Input Tag Attributes
<input> tag supports all global attributes in HTML. In addition, the
<input> tag also accepts a number of tag-specific attributes. Here’s a reference table with a list of these attributes:
|accept||file-extension||Specifies the type of files the server can accept (only available for type=”file”).|
|alt||text||Specifies alternative text to use when an image is not available (only for type=”image”).|
|autocomplete||on/off||Specifies whether the autofill feature for the browser should be activated for the form field.|
|autofocus||autofocus||Specifies that the input element should receive focus when the document is loaded.|
|checked||checked||Specifies whether a radio button or checkbox is checked (for type=”radio” and type=”checkbox”).|
|disabled||disabled||Disables the form field.|
|form||form ID||Specifies the form element with which the input field is associated|
|formaction||URL||Specifies the URL of the script that processes the user’s input (for type=”submit” and type=”image).|
|formenctype||enctype||Specifies how the data submitted by a form should be encoded (for type=”submit” and type=”image”).|
|formmethod||GET/POST||Specifies the HTTP method used by the browser to submit form data (for type=”image” and type=”submit”)|
|formnovalidate||formnovalidate||Specifies that the form control should not be validated when it is submitted (for type=”image” and type=”submit”).|
|formtarget||_blank_parent_top_self framename||Specifies a target to display the response received by the browser after the form has been submitted (for type=”image” and type=”submit”).|
|height||pixels||Specifies the height of the image displayed in a type=”image” form.|
|list||list ID||Specifies a list of predefined options to suggest to the user. The value of “list” must be an “id” of a <datalist> element that exists on the same page as the form field.|
|max||number||Maximum value for an input control. “max” must not be lower than any “min” value specified.|
|maxlength||number||Specifies the maximum number of characters an input box can accept.|
|min||number||Specifies the minimum value for an input control. This must be lower than the value of any “max” value specified.|
|minlength||number||Specifies the minimum number of characters required by an input box.|
|multiple||multiple||Specifies whether the user can enter multiple values in a field.|
|name||text||Assigns a name to a form field.|
|pattern||regular expression||The pattern attribute specifies a regular expression that will be used to validate the input of a form.|
|placeholder||text||Specifies placeholder text to inform the user of what they should enter into a form.|
|readonly||readonly||Specifies whether the user can modify the value of a form field.|
|required||required||Specifies whether the form field requires a value before the form can be submitted.|
|size||number||Specifies the width of a form field. By default, this is set to 20.|
|src||URL||Specifies the location of an image used as a submit button (for type=”image”).|
|step||number||Specifies an interval between numbers in an input field.|
|type||button, checkbox, color, date, datetime, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url||Specifies the type of form to create.|
|value||text||Specifies the value of an <input> field.|
|width||pixels||Specifies the width of an <input> field.|
<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!