HTML Input Attributes

Input attributes in HTML add features or behavior to an <input> element. Attribute examples include size, value, maxlength, required, and many more.

HTML Tutorial

Example

An <input> tag with 6 attributes.

<input type="text" 
       id="firstname" 
       name="firstname" 
       placeholder="First name" 
       maxlength="25"
       style="background-color:aliceblue;"
>

Attributes

Complete list of input attributes and their values.

Attribute Value Description
type text
checkbox
radio
hidden
button
submit
reset
password
file
---
color
date
datetime-local
email
search
image
month
number
range
tel
time
url
week
The type of input element to be created.
The last 13 types (color to week) were added in HTML5 (Oct 2014).
name text Name of the input element.
value text Value of the input element.
id    identifier Defines a unique identifier for the input.
class    classnames Sets one or more CSS classes to be applied to the input.
style    CSS-styles Sets the style for the input.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the input is hidden.
title    text Sets a title that displays as a tooltip.
tabindex    index Sets a tab sequence relative to the other elements.
checked checked For types: checkbox or radio. Makes the option checked or chosen.
placeholder text Short hint which describes expected value
maxlength number Maximum number of characters allowed
required no value Sets the input to required field
readonly readonly Make input read only
disabled disabled Disables input element
autofocus no value Sets the focus on the element after page loads
autocomplete on | off Presents the user with previously entered values
form form-id Refers to the id of the form the <input> element belongs to
formaction URL For types: submit image. URL or path of the file the submitted data will be processed
formtarget _blank
_self
_parent
_top
framename
For types: submit and image. Indicates where the response should be displayed
formenctype
application/x-www-form-urlencoded,
multipart/form-data,
text/plain
For types: submit image. How the form data submitted shall be encoded to the server.
formmethod get
post
For types: submit and image. The HTTP method for sending form data
formnovalidate formnovalidate Avoids the form being validated after submission
accept file-extension
audio/*
video/*
image/*
media_type
For type: file. Indicates what file types user can pick to upload
min number
date
Minimum value
max number
date
Maximum value
step number
any
Interval between legal numbers
multiple multiple Allows users to choose more than one value from selection
pattern regexp Regular expression that an <input> element's value is checked against
size number Input control's width in number of characters
width pixels Width of the input element in pixels. Used by image input types.
height pixels Height of element in pixels. Used by image input types
list datalist-id <datalist> element that contains pre-defined options for an <input> element
dirname inputname Text direction to be submitted

Next, we review each of these.


The type Attribute

The type attribute defines the type of the input control.
There are many types, for example text, button, radio, checkbox, and others.

Three <input> elements with these types: text, submit, and reset.



<form action="/tutorial/action.html">
  <input type="text" name="location" 
         placeholder="Location"><br /> <br />

  <input type="submit">
  <input type="reset">
</form>

The name Attribute

The name attribute assigns a name to an input field.
When a form is submitted the name and value of the input element are sent to the server.

Two <input> fields with name attributes.





<form action="/tutorial/action.html">
  <input name="firstname" type="text" placeholder="First name"> <br /> <br />
  <input name="lastname" type="text" placeholder="Last name"> <br /> <br />

  <input type="submit">
</form>

The value Attribute

The value attribute holds the value of the input field.
The value can be a string or a number.

An <input> field with a value attribute.

First name  
<form>
  First name &nbsp;
  <input type="text" name="firstname" value="Georgina">
</form>

The id Attribute

The id attribute assigns an identifier to the input control.
The value must be unique on the web page.

Several <input> elements, each one with a unique id.

Contact Details





<form action="/tutorial/action.html">
  <fieldset>
    <legend>Contact Details</legend>

    <input type="text" placeholder="First name" id="firstname" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" id="lastname" name="lastname"><br /><br />
    <input type="text" placeholder="Email" id="email" name="email"><br /><br />

    <input type="submit" id="submit" value="Submit">
  </fieldset>
</form>

The class Attribute

The class attribute assigns one or more CSS classnames to the input control.
Classes affect the appearance of the control.

An <input> element with a class attribute.



<style>
  .blue {color:steelblue;background-color:aliceblue}
</style>

<form action="/tutorial/action.html">
  <input class="blue" type="text" name="city" 
         placeholder="City"> <br /> <br />

  <input type="submit">
</form>

The style Attribute

The style attribute assigns an inline style to an input control.
The style affects the appearance of the control.

An <input> element with a style attribute.



<form action="/tutorial/action.html">
  <input style="color:orangered;background-color:lavender;"
         type="text" name="country" placeholder="Country"
         value="France"> 
  <br /><br />

  <input type="submit">
</form>

The data-* Attribute

The data-* attribute assigns a custom value to an input control.
The * part is replaced with a lowercase string, such as data-id, data-cost, or data-location.

An <input> element with a custom data-case-number attribute.



<form action="/tutorial/action.html">
  <input data-case-number="922720" type="text" name="resolution" 
         placeholder="Problem resolution"> <br /> <br />

  <input type="submit">
</form>

Note:  The data-* attribute values are not visible to the end user.


The hidden Attribute

The hidden attribute hides the input element, i.e., makes it invisible.
Even though the control is invisible, its value is included during form submission.

An <input> element with a hidden attribute. The control is not visible.

Your favorite food:

<form action="/tutorial/action.html">
  Your favorite food:
  <input hidden type="text" name="favorite" value="Pizza"> <br /> <br />

  <input type="submit">
</form>

The title Attribute

The title attribute adds tooltip text to an input control.
Hovering a mouse over the textbox displays a tooltip.

An <input> element with a title attribute.



<form action="/tutorial/action.html">
  <input title="Please provide your pet's name"
         type="text" name="pet"
         placeholder="Your pet's name"> <br /> <br />

  <input type="submit">
</form>

The tabindex Attribute

The tabindex attribute assigns a keyboard tab order relative to the other controls.
This attribute indicates the order in which elements receive focus using the tab key.

An <input> element with a tabindex attribute.



<form action="/tutorial/action.html">
  <input tabindex="16" type="text" name="street"
         placeholder="Street address"> <br /> <br />

  <input type="submit">
</form>

For more information about tabindex, see our HTML tabindex attribute Reference.


The checked Attribute

The checked attribute checks (i.e. selects) a radio button or checkbox.
Clicking the element will toggle, i.e. check or uncheck, the item.

Five <radio> buttons with the first one checked.

Product Rating







<form action="/tutorial/action.html">
  <div>Product Rating</div><br />
  <label><input type="radio" name="score" value="high" checked> High </label><br />
  <label><input type="radio" name="score" value="mediumhigh"> Medium High </label><br />
  <label><input type="radio" name="score" value="medium"> Medium </label><br />
  <label><input type="radio" name="score" value="mediumlow"> Medium Low </label><br />
  <label><input type="radio" name="score" value="low"> Low </label><br /><br />

  <input type="submit">
</form>

The placeholder Attribute

The placeholder attribute provides a hint about the expected data.
Placeholders are displayed as dimmed background text when an input field has no value.

Two <input> fields with placeholder attributes.





<form action="/tutorial/action.html">
  <input type="text" name="firstname" placeholder="Enter first name"><br /> <br />
  <input type="text" name="lastname" placeholder="Enter last name"><br /> <br />

  <input type="submit">
</form>

Did you know?

Did you know?

Placeholders can be styled with CSS

With the CSS ::placeholder selector (or ::-webkit-input-placeholder) you can control the appearance of a placeholder.

This example changes the color of the placeholder to teal using CSS.

<style>
  input::placeholder {color: #2bacac;}
</style>

<form action="/tutorial/action.html">
  <input type="text" name="firstname" placeholder="First name"><br /> <br />
  <input type="text" name="lastname" placeholder="Last name"><br /> <br />

  <input type="submit">
</form>

The maxlength Attribute

The maxlength attribute sets the maximum number of characters the field will hold.
By default, the maximum is 524,288 characters.

An <input> tag with a maxlength attribute.

First name  
<form>
  First name &nbsp;
  <input type="text" name="firstname" maxlength="10">
</form>

The required Attribute

The required attribute make a field mandatory.
A value must be entered before submitting the form.

Two <input> fields with required attributes.

First name*  

Last name*  

<form action="/tutorial/action.html">
  First name* &nbsp;<input type="text" name="firstname" required> <br /> <br />
  Last name* &nbsp;<input type="text" name="lastname" required> <br /> <br />
  
  <input type="submit">
</form>
Tip: A common convention is to mark a required field with an asterisk on the label (see above).

The readonly Attribute

The readonly attribute makes the input field read-only.
A readonly element cannot be modified, but its value is included during form submission.

An <input> tag with a readonly attribute.

First name  

<form action="/tutorial/action.html">
  First name &nbsp;
  <input type="text" name="firstname" value="Theodore" readonly>
  <br /><br />

  <input type="submit">
</form>

The disabled Attribute

The disabled attribute disables the input field.
A disabled element appears dimmed and its value is not sent during form submission.

An <input> tag with a disabled attribute.

First name  

<form action="/tutorial/action.html">
  First name &nbsp;
  <input type="text" name="firstname" value="Sonia" disabled>
  <br /><br />

  <input type="submit">
</form>

The autofocus Attribute

The autofocus attribute specifies that the input field should receive focus when the page loads.
Only one element on a page can have the autofocus attribute.

An <input> tag with an autofocus attribute.
Note: autofocus is disabled on this page. Click the 'Try It live' button to see autofocus in action.

Firstname  
<form>
  First name &nbsp;
  <input type="text" name="firstname" autofocus>
</form>

Tip:  When a control has focus, it means that any user input will go to that control.


The autocomplete Attribute

The autocomplete attribute specifies to the browser that input can be autofilled.
When autocomplete is on, the browser provides input values based on previous values the user has entered.

Two <input> tags with autocomplete turned on.
Note: Chrome ignores HTML autocomplete settings.





<form action="/tutorial/action.html" >
  <input type="text" name="firstname" placeholder="First name" autocomplete="on"> <br /><br />
  <input type="text" name="lastname" placeholder="Last name" autocomplete="on"> <br /><br />

  <input type="submit">
</form>

The form Attribute

The form attribute specifies the form the <input> element belongs to.
Even when physically outside the form, the input element is included during form submission.

An <input> tag with a form attribute.

Personal Information


<form action="/tutorial/action.html" id="myform">
  <fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
    <legend>Personal Information</legend>
    <input type="text" name="firstname" placeholder="First name">

    <br /><br />
    <input type="submit" value="Submit">
  </fieldset>
</form>
<br />

<input form="myform" type="text" name="lastname" placeholder="Last name">

The formaction Attribute

The formaction attribute on an <input> button overrides the form action, if present.
This attribute specifies the URL where the form data will be sent to.

The second button has a formaction attribute with an alternative url.

First name  

Last name  

 
<form action="/tutorial/action.html">
  First name &nbsp;<input type="text" name="firstname"> <br /> <br />
  Last name &nbsp;<input type="text" name="lastname"> <br /> <br />

  <input type="submit" value="Action"> &nbsp;
  <input type="submit" value="Action 2" formaction="/tutorial/action2.html">
</form>

The formtarget Attribute

The formtarget attribute specifies where to display the form submission response.
This attribute can only be used on input types submit or image.

The second button has a target attribute which opens a new browser tab.

First name

Last name

<form action="/tutorial/action.html">
  First name <input type="text" name="firstname"><br /> <br />
  Last name <input type="text" name="lastname"><br /> <br />
 
  <input type="submit" value="Submit">
  <input type="submit" value="Submit to new tab" formtarget="_blank">
</form>

The formenctype Attribute

The formenctype attribute overrides the form's enctype attribute
This attribute specifies how the form data will be encoded before sending it to the server.

In this example, the selected file is encoded and submitted as multipart/form-data which is appropriate for file uploads.

Step 1  

Step 2  
<form action="/tutorial/fileupload.html">
  Step 1 &nbsp; <input type="file" name="file"> <br /> <br />
  Step 2 &nbsp; <input type="submit" formenctype="multipart/form-data">
</form>

The formmethod Attribute

The formmethod attribute specifies the HTTP method to use during form submission.
This attribute overrides the form's method attribute.

The first button uses the GET method and the second button uses POST.

First name

Last name

 
<form action="/tutorial/action.html">
  First name <input type="text" name="firstname"><br /> <br />
  Last name <input type="text" name="lastname"><br> <br />

  <input type="submit" formmethod="get" value="Submit-Get"> &nbsp;
  <input type="submit" formmethod="post" value="Submit-Post" 
    onclick="alert('Form was posted. Processing requires server code');return false;">
</form>

Note:  With GET the values are visible on the URL following submission.


The formnovalidate Attribute

The formnovalidate attribute on a submit button suppresses form validation.
With this attribute enabled, none of the input elements will be validated, even when specified.

The first button validates the input. The second button does not.

Email  

 
<form action=/tutorial/action.html>
  Email &nbsp;<input type="email" name="email" required><br /> <br />

  <input type="submit" value="Submit with Validation"> &nbsp;
  <input type="submit" value="Submit without Validation" formnovalidate >
</form>

The accepts Attribute

The accept attribute specifies the acceptable file types that can be selected.
This attribute only applies to <input> type file.

Only image file types can be selected.

 

<form action="/tutorial/action.html">
  <label for="img">Select image file </label> &nbsp;
  <input type="file" id="img" name="img" accept="image/*"><br /><br />
 
  <input type="submit">
</form>

The min and max Attributes

The min and max attributes specify the minimum and maximum values that can be entered.

An <input> element with min and max values of 1 and 10 respectively.

Quantity  

<form action="/tutorial/action.html">
  Quantity &nbsp;
  <input type="number" name="number" 
         min="1" max="10" value="7"> <br /> <br />

  <input type="submit">
</form>

The step Attribute

The step attribute specifies the interval with which the value can change.
This attribute only applies to <input> types number and range.

An <input> element with a step size of 5.

 

<form action="/tutorial/action.html">
  <label>Estimated weight</label> &nbsp;
  <input type="number" name="weight" step="5" value="165"><br /> <br />

  <input type="submit">
</form>

The multiple Attribute

The multiple attribute specifies that an element accepts multiple input values.
This attribute only applies to <input> types file and email.

An <input> element with multiple enabled. Multiple files can be selected.

Select and upload one of more image files:

Step 1  

Step 2  
<form action="/tutorial/fileupload.html">
   Select and upload one of more image files: <br /> <br />
   Step 1 &nbsp; <input type="file" name="file" 
          accept=".jpg,.png" multiple> <br /> <br />

   Step 2 &nbsp; <input type="submit">
</form>

The pattern Attribute

The pattern attribute specifies a regular expression.
This regular expression is used to validate the input before the form is submitted.

An <input> element with a pattern that requires a 3 letter country code.

Country code  

<form action="/tutorial/action.html">
 Country code &nbsp;
 <input type="text" name="countrycode" 
        pattern="[A-Za-z]{3}" 
        placeholder="3 letter code"><br /><br />

 <input type="submit">
</form>

Did you know?

Did you know?

Text input that accepts numbers only

The pattern attribute allows input restrictions when a form is submitted.

However, it is usually better to validate earlier to prevent input mistakes.
One way to accomplish this is with JavaScript as shown below.

An <input> field that only accepts numbers and the backspace.

Enter a number  
<form>
  Enter a number &nbsp;
  <input type="text" 
         onkeypress="return (event.charCode != 8 && event.charCode == 0 || 
                            (event.charCode >= 48 && event.charCode <= 57))" />
</form>

The size Attribute

The size attribute adjusts the width of an input field for a given number of characters.

An <input> element that is wide enough for 40 characters.

First name  
<form>
  First name &nbsp;
  <input type="text" name="firstname" 
         size="40" value="Melanie" >
</form>

The width and height Attributes

The width and height attributes specify the height and width of an input element.
This attribute only applies to <input> elements of type image.

A 50 x 50 pixel <input> image.

<input type="image" alt="Go!" onclick="alert('Go!')"
       src="/img/html/arrow.png" 
       width="50" height="50">

The list Attribute

A list attribute on an <input> element associates it with a <datalist> with predefined values.
The datalist values are presented as a dropdown with optional values. Other values can still be entered.

An <input> element associated with a <datalist> with car makes.

Select a car  
<datalist id="cars">
  <option value="Toyota">
  <option value="BMW">
  <option value="Ferrari">
</datalist>

<form action="/tutorial/action.html">
  Select a car &nbsp;
  <input type="text" list="cars" name="car">
 
  <input type="submit">
</form>


The dirname Attribute

Placing a dirname attribute submits the input value together with a text direction.

A textbox with a dirname attribute.
The form will send the firstname value and the text direction of the firstname field.




<form action="/tutorial/action.html">
  <label for="firstname">First name</label><br />
  <input type="text" id="firstname" name="firstname" 
         dirname="firstname.dir"><br /><br />

  <input type="submit">
</form>

You may also like

Guides