HTML Input Attributes

An <input> tag with 6 attributes.

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

Complete list of input attributes and their values.

Next, we review each of these.

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 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 holds the value of the input field.
The value can be a string or a number.

An <input> field with a value attribute.

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

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.

<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 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 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 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 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.

<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 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 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 details on tabindex, see our HTML tabindex attribute Reference.

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.

<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 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>

<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 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.

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

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

Two <input> fields with required attributes.

<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>

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.

<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 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.

<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 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.

<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 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 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.

<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 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.

<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 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.

<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 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.

<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 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.

<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 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.

<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 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 specify the minimum and maximum values that can be entered.

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

<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 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 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.

<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 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.

<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>

<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 adjusts the width of an input field for a given number of characters.

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

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

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">

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.

<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>

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>

• Our HTML input Tag Reference
• Our HTML input type Attribute Reference
• Our HTML Attributes Tutorial
• Our CSS Forms Tutorial