HTML <input> Tag

In this post, we’ll talk about Tag input examples. With a dream that it would help them learn.

The HTML <input> tag is a fundamental form element that is used to collect user input on a web page. The <input> tag can be used to create a wide variety of input fields such as text input, checkbox, radio buttons, email input, date input, password input, and more.

There are four input fields, three text fields, and one submit button on this HTML form:


<!DOCTYPE html> <html> <body> <form action="/action-page.php"> <label for="id">Student ID</label> <input type="text" id="id" name="id"><br><br> <label for="name">Full Name:</label> <input type="text" id="name" name="name"><br><br> <label for="qualification">Qualifications</label> <input type="text" id="qualification" name="qualification"><br><br> <input type="submit" value="Submit"> </form> </body> </html>

Here is an example of the <input> tag in form with some attributes:


<!DOCTYPE html> <html> <body> <form action="submit-form.php" method="post"> <label for="name">Name:</label> <br> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <br> <input type="email" id="email" name="email" required> <label for="password">Password:</label> <br> <input type="password" id="password" name="password" required> <label for="newsletter">Sign up for our newsletter</label> <br> <input type="checkbox" id="newsletter" name="newsletter" value="yes"> <label for="age">Age:</label> <br> <input type="number" id="age" name="age" min="18" max="120" required> <label for="volume">Volume:</label> <br> <input type="range" id="volume" name="volume" min="0" max="100" value="50" step="10"> <input type="submit" value="Submit"> <br> </form> </body> </html>

Attributes List

The following are the attribute of the <input> tag:

Attribute Value Overview
formaction URL

This URL will be used to process the input control when the form is submitted (for types “submit” and “image“).

formenctype application/x-www-form-urlencoded

When sending form-data to the server, this determines how the data should be encoded (for types=”submit” and “image”).

formmethod get

Specify how to use HTTP methods for submitting data to the action URL (for type=”submit” and type=”image”)

formnovalidate formnovalidate

Indicates tag <input> won’t validate those form elements after submission.

formtarget _blank

Provides instructions on where to display the response obtained after submitting the form (only for types “submit” and “image”).

accept file_extension

Sets a filter for the types of files the user can select from the dialog box for file input (only for type=”file”)

alt text

Provide alternative text for images (just for the “image” type).

autocomplete on

Indicates that an <input> element needs to have autocomplete activated.

autofocus autofocus

Declares that an <input> element must immediately obtain focus when the page loads.

checked checked

Indicates that the <input> element is to be checked when the page loads (for type=”checkbox” or type=”radio“)

name text

The tag input sets the name of an <input> element.

pattern regexp

Provides a pattern that an <input> element’s value is compared against.

placeholder text

Create a quick tip that explains the possible value of an <input> element.

readonly readonly

Declares that an input field is read-only.

min number

Provides a minimum value for an <input> element.

minlength number

An element that identifies the minimum number of characters needed in an <input> Tag.

multiple multiple

Allows the user to enter multiple values in an <input> tag.

required required

Ensure every input field has been filled out before submitting the form.

size number

This property defines the width of an <input> element in characters.

src URL

Provide the URL of the image to be displayed as a submit button (for type=”image” only)

step number

Sets the distance between legal numbers in an input field.

type button

To display the <input> element, indicate the type.

value text

A value is assigned to an input element.

width pixels

Provides an <input> element’s width (for type=”image” only)

dirname inputname.dir

It declares that the text should be sent in the desired direction.

height pixels

Indicates the height of an <input> tag (only for type=”image”)

list datalist_id

Access to an <datalist> element that consists of predefined values for an <input> element.

max number

Determine the max value for an <input> element.

maxlength number

Limits the max number of characters you can put in an <input> element.

disabled disabled

Declare that an <input> element must be disabled.

form form_id

Indicates which form the <input> element refers to.

Tag Input Usage

The Tag input <input> designates an input field allowing the user to enter information.

The Tag input <input> is one of the primary essential elements in a form.

The Tag input <input> element has several types of presentation based on the type attribute.

Following is a list of the different input types:

  1. <input type=”text”> (default value)
  2. <input type=”search”>
  3. <input type=”time”>
  4. <input type=”date”>
  5. <input type=”datetime-local”>
  6. <input type=”month”>
  7. <input type=”week”>
  8. <input type=”color”>
  9. <input type=”image”>
  10. <input type=”email”>
  11. <input type=”file”>
  12. <input type=”number”>
  13. <input type=”tel”>
  14. <input type=”url”>
  15. <input type=”password”>
  16. <input type=”submit”>
  17. <input type=”hidden”>
  18. <input type=”button”>
  19. <input type=”checkbox”>
  20. <input type=”radio”>
  21. <input type=”range”>
  22. <input type=”reset”>

Tip: Check out the type attribute that shows examples of every input type!
Advice: Make sure to use the <label> tag to specify labels for:
  • <input type=”text”>
  • <input type=”checkbox”>
  • <input type=”radio”>
  • <input type=”file”>
  • <input type=”password”>



The Tag input <input> can also handle the Global Attributes in HTML.


The Tag input <input> is also capable of accepting the Event Attributes in HTML.

Browser Compatibility

<input> Yes Yes Yes Yes Yes

HTML <input> Tag Key features

Here are some key features of the <input> tag:

  • The <input> tag can be used to create various types of input fields, such as text input, checkbox, radio buttons, email input, date input, password input, file upload, and more.
  • The <input> tag provides accessibility features such as the ability to associate a label with an input field and the ability to indicate when an input field is required.
  • The <input> tag allows for interactivity on a web page by allowing users to input data, select options, and submit forms.
  • The <input> tag provides various attributes, such as required and pattern, that can be used to validate user input and ensure that the data entered is of the correct format.
  • The <input> tag can be customized using various attributes, allowing you to create input fields that are optimized for different types of data and user interactions.
If this article was informative enough to fulfill your educational desires, then do leave your reaction below as a source of appreciation or to provide feedback to bring improvements to this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *