🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML input Tag

Reading time 7 min
Published Jun 29, 2017
Updated Oct 2, 2019

HTML input Tag: Main Tips

  • The <input> tag HTML creates an element for retrieving information from users.
  • The HTML type attribute of an <input> element creates differing input fields.

Use of input

input tag HTML specifies an element used to take values from the user. The <form> uses <input> to create input controls.

Note: the <input> tag HTML is nested within a <form> element.

Example
Name: <input type="text" name="name"><br>
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Attributes for input

accept

It specifies the type of files that are accepted on the server from the file input.

Example
<input type="file" name="picture" accept="image/*">

align

It sets the horizontal and vertical alignment of input elements.

Note: not supported in HTML5.

Use CSS float property instead. Learn how in the CSS Layout Float and Clear
tutorial.

Example
<input type="image" src="submit.png" alt="Proceed" align="right" width="50" height="50">

alt

It indicates a text for an image input, shown instead when images do not load.

Example
<input type="image" src="submit.png" alt="Proceed">

autocomplete

It describes whether the input element should have autocomplete ON or OFF.

Example
<input type="text" name="username" autocomplete="on">

It applies to these HTML input types: url, search, tel, text, password, email, range, and color.

autofocus

It specifies the focus to be given automatically to a particular element when the page loads.

Example
<input type="text" name="name" autofocus>

Remember: this attribute makes an <input> element become selected, so the element is visible once the page loads.

checked

It specifies whether a radio or checkbox inputs are already selected when the page loads.

Example
<input type="checkbox" name="role" value="jobSeeker"> I am a Job Seeker<br>
<input type="checkbox" name="role" value="student" checked> I am a Student<br>

dirname

It describes a direction for text submission.

Example
<input type="text" name="city" dirname="cityname.dir">

disabled

It indicates an input element which will not take values.

Example
<input type="text" name="name" disabled>

Note: this HTML input attribute keeps users from using the <input> element until some other conditions are met (such as agreeing with terms and conditions).

form

It specifies which forms are associated with one or more input elements.

Example
<form id="travel">
  Source: <input type="text" name="source"><br>
  Days: <input type="text" name="days"><br>
  <input type="submit" value="Calculate">
</form>
Destination: <input type="text" name="destination" form="travel">

Note: to relate the element with multiple forms, list form IDs separated by spaces (all forms must be in the same file).

Example
<form action="/learn/action.php" id="form1">
  Name: <input type="text" name="name"><br>
  Surname: <input type="text" name="surname" form="form1">
  <input type="submit" value="Submit">
</form>

formaction

It indicates a link for form submission. It applies to the submit and image input types.

Example
<form action="action.php">
  Name: <input type="text" name="fir_name"><br>
  Surname: <input type="text" name="las_name"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="admin.php" value="Admin Submit">
</form>

Note: when a submission button has the formaction attribute, it is possible to indicate multiple form submission URLs.

Example
<form action="/login.php">
  Your Username <input type="text" name="name"><br>
  Your Password <input type="password" name="password"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/verify.php" value="Verify User">
</form>

formenctype

It describes how the form data is encoded while submitting the form. Works with submit and image input types.

Example
<form action="/verify.php" method="post">
  Verify your Email: <input type="email" name="emailField"><br>
  <input type="submit" formenctype="multipart/form-data" value="Submit">
</form>
Example
<form action="/learn/demo_file.php" method="post">
  Favourite color: <input type="text" name="color"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Multipart & form-data Submition">
</form>

formmethod

It defines a HTTP method for when server receives form data. Applicable on submit or image input types.

Example
<form action="/submit.php" method="post">
  Username: <input type="text" name="username"><br>
  Password <input type="password" name="pass"><br>
  Verify Password <input type="password" name="passcheck"><br>
  <input type="submit" formmethod="post" value="Submit">
</form>

Note: this attribute is prioritized over the method attribute used within the <form> tag.

Example
<form action="/learn/form_methods.php" method="get">
  Name: <input type="text" name="name"><br>
  Surname: <input type="text" name="surname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="/learn/form_methods.php" value="Submit with post">
</form>

formnovalidate

It indicates that during submission, data does not have to be validated.

Example
<form action="/submit.php" method="get">
  Enter E-mail ID: <input type="email" name="userEmailID"><br>
  Enter Username: <input type="text" name="userName"><br>
  Enter Surname: <input type="text" name="userSurname"><br>
  <input type="submit" formnovalidate="formnovalidate" value="Not Validated">
</form>

Tip: this attribute gets prioritized over the regular novalidate attribute used within the <form> tag.

Example
<form action="/learn/action_file.php">
  Email of the user: <input type="email" name="useremail"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="no validation submit">
</form>

formtarget

It specifies the location for opening the server response after form submission. This HTML input attribute is prioritized over the target attribute used within the <form> tag.

Example
<form action="/learn/action.php">
  Name: <input type="text" name="name"><br>
  Surname: <input type="text" name="surname"><br>
  <input type="submit" value="Submit as usual">
  <input type="submit" formtarget="_blank_form_target" value="New Window Submit">
</form>

Example
<form action="/reload_data.php" method="post">
  Verify Email: <input type="email" name="emailVerify"><br>
  Verify Phone No: <input type="text" name="number"><br>
  <input formtarget="_blank" value="Open a new window and submit" type="submit">
</form>

height

It sets the height of an input element of type image.

Example
<input type="image" src="img.gif" alt="Submit" width="48" height="48">

list

It defines a link between a datalist element and input element, using the list's ID.

Remember: the list contains pre-defined information that the associated input element can use.

Example
<input list="books">
<datalist id="books">
  <option value="Fiction">
  <option value="Non-Fiction">
</datalist>

This is how it would be presented in a webpage:



This is the code of the form element above:

Example
<input list="animals">

<datalist id="animals">
  <option value="Lama">   
  <option value="Fire fox">
  <option value="Kitten">
  <option value="Cat">
  <option value="Cat again">
</datalist>

max

It sets the maximum input range for an input element.

Example
<input type="number" name="age" min="18" max="25">

The following code contains a combination of max and min:

Example

Enter a number lesser than 10:
<input type="number" name="num" max="9">
Enter a number greater than 10:
<input type="number" name="num" min="11">
Quantity (between -10 and 10):
<input type="number" name="qty" min="-10" max="10">

maxlength

It sets the maximum number of characters the user can enter for an input element.

Example
<input type="text" name="id" maxlength="12">

min

It sets the minimum input range for an input element.

Example
<input type="number" name="age" min="25">

multiple

It specifies that the associated input element can take multiple values from the user.

Example
<form action="/share.php">
  Type emails: <input type="email" name="emails" multiple>
  <!-- Type multiple emails separate each with a comma -->
  <input type="submit">
</form>

Remember: this attribute works with the email and file HTML input types.

In the example below, users can upload multiple images:

Example
Select images: <input type="file" name="image" multiple>

name

It defines a name for an input element, which is quite similar to ID.

Example
<input type="text" name="client_name">
<input type="text" name="age">

pattern

It defines some common expressions, declaring constraints for the data given by the user through an input element.

Example
<input type="text" name="name" pattern="[A-Z]{20}" title="Name in capital letters up to 20 characters">
<input type="password" name="password" pattern="[0-9A-Za-z]{8}" title="8 character password combination of letters and numbers">

This attribute applies to these HTML input types: text, url, search, tel, email, and password.

Example
Country code: <input type="text" name="code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder

It describes a line of text that can be used to inform users what values to provide.

Example
<input type="email" name="email" placeholder="Enter Your Email!">

The attribute placeholder applies to these HTML input types: text, ur, search, tel, email, and password.

Example
<input type="text" name="name" placeholder="Name">

readonly

It specifies that users won't be able to modify the value of the input.

Example
<input type="email" name="email" value="[email protected]" readonly>

required

It specifies that the input field cannot be left blank when submitting the form.

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

It applies to these input types: text, url, search, email, tel, password, number, radio, checkbox, and file.

Also, it can be applied to these tags: <select>, and <textarea>.

Example

Username: <input type="text" name="username" required>

size

It defines the width of an input element in characters.

Example
<input type="text" name="phone" size="100">

This attribute sets the size of the input element in characters. It applies to these HTML input types: text, search, url, email, password.

src

It indicates the source link of an image input.

Example
<input type="image" src="arrow.png" alt="Submit">

step

It defines the number of intervals as per which data is inserted into an input element. If you wrote step="2", viable inputs would be - 2, 0, 2, 4, etc.

Example
<input type="number" name="expmonths" step="1">

This attribute can be applied to these HTML input types: number, date, range, datetime-local, datetime, time, month, and week.

Example
<input type="number" name="score" step="2">

type

It specifies that users input specific type of data.

Example
<input type="text" name="username">
<input type="number" name="phone">
<input type="email" name="email">

Here are all the values this attribute can take in HTML5:

button checkbox color date datetime-local email
file hidden image month number password
radio range reset search submit tel
text time url week

value

It sets a default value for an input element.

Example
<input type="text" name="username" value="Charles">

This attribute adds the default value of an <input> element. The use of this attribute may vary according to the input type. It is paired with:

  • For a button, reset, submit - sets the default text on the button.
  • For text, password - sets the default value of the input field.
  • For a checkbox, radio, image - sets the selected input value (the value that is submitted).

Note: this attribute cannot be used with the file input type.

width

It defines the width for an input element of image type.

Example
<input type="image" src="send.gif" alt="Submit" width="56" height="56">

Browser support

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
1+