HTML Input Attributes

The value attribute

value The attribute specifies the initial value of the input field:

Example

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

The readonly attribute

readonly The attribute specifies that the input field is read-only (cannot be modified):

Example

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

The readonly attribute does not require a value. It is equivalent to readonly="readonly".

The disabled attribute

disabled The attribute specifies that the input field is disabled.

Disabled elements are not available and cannot be clicked.

Disabled elements will not be submitted.

Example

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

The disabled attribute does not require a value. It is equivalent to disabled="disabled".

The size attribute

size The attribute specifies the size of the input field (in characters):

Example

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

The maxlength attribute

maxlength The attribute specifies the maximum length allowed for the input field:

Example

<form action="">
 First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

If the maxlength attribute is set, the input control will not accept more characters than the allowed number.

This attribute does not provide any feedback. If you need to remind the user, you must write JavaScript code.

Note:Input restrictions are not foolproof. JavaScript provides many methods to add illegal inputs. To securely limit inputs, the receiver (server) must check the restrictions simultaneously.

HTML5 attributes

HTML5 adds the following attributes to <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

and add such attributes for <form> as needed:

  • autocomplete
  • novalidate

autocomplete attribute

The autocomplete attribute specifies whether a form or input field should be automatically completed.

When autocomplete is enabled, the browser will automatically fill in values based on the user's previous input.

Tip:You can set the form's autocomplete to on while setting specific input fields to off, and vice versa.

The autocomplete attribute applies to <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

Example

HTML form with autocomplete enabled (some input fields are off):

<form action="action_page.php" autocomplete="on">
   First name:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Try It Yourself

Tip:In some browsers, you may need to manually enable the auto-complete feature.

The novalidate attribute

The novalidate attribute belongs to the <form> attribute.

If set, novalidate specifies that form data should not be validated when the form is submitted.

Example

Indicate that the form should not be validated when submitted:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

Try It Yourself

The autofocus attribute

The autofocus attribute is a boolean attribute.

If set, it specifies that the <input> element should automatically gain focus when the page loads.

Example

Make the "First name" input field automatically focused when the page loads:

First name:<input type="text" name="fname" autofocus>

Try It Yourself

The form attribute

The form attribute specifies one or more forms that the <input> element belongs to.

Tip:To refer to more than one form, use a space-separated list of form ids.

Example

Input fields are located outside the HTML form (but still belong to the form):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="提交">
</form>
 Last name: <input type="text" name="lname" form="form1">

Try It Yourself

The formaction attribute

The formaction attribute specifies the URL to process the file for the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element.

The formaction attribute applies to type="submit" and type="image".

Example

An HTML form with two submit buttons for different actions:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="提交"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

Try It Yourself

The formenctype attribute

The formenctype attribute specifies how form data (form-data) is encoded when submitted to a server (only for forms with method="post").

The formenctype attribute overrides the enctype attribute of the <form> element.

formenctype 属性适用于 type="submit" 以及 type="image"。

Example

发送默认编码以及编码为 "multipart/form-data"（第二个提交按钮）的表单数据（form-data）：

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="提交">
   <input type="submit" formenctype="multipart/form-data">
   value="作为 Multipart/form-data 提交">
</form>

Try It Yourself

formmethod 属性

formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。

formmethod 属性覆盖 <form> 元素的 method 属性。

formmethod 属性适用于 type="submit" 以及 type="image"。

Example

第二个提交按钮覆盖表单的 HTTP 方法：

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="提交">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="使用 POST 提交">
</form>

Try It Yourself

formnovalidate 属性

novalidate 属性是布尔属性。

如果设置，则规定在提交表单时不对 <input> 元素进行验证。

formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"。

Example

具有两个提交按钮的表单（验证和不验证）：

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="提交"><br>
   <input type="submit" formnovalidate value="提交不验证">
</form>

Try It Yourself

formtarget attribute

The name or keyword specified by the formtarget attribute indicates where the received response is displayed after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

The formtarget attribute can be used with type="submit" and type="image".

Example

This form has two submit buttons, corresponding to different target windows:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

Try It Yourself

height and width attributes

The height and width attributes specify the height and width of the <input> element.

The height and width attributes are only used for <input type="image">.

Note:Always specify the size of the image. If the browser is not aware of the image size, the page may flicker when the image is loading.

Example

Define an image as a submit button and set the height and width attributes:

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

Try It Yourself

list attribute

The <datalist> element referenced by the list attribute contains predefined options for the <input> element.

Example

Use the <datalist> to set predefined values for the <input> element:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">

Try It Yourself

min 和 max 属性

</datalist>

min and max attributes

Example

min and max attributes specify the minimum and maximum values of the <input> element.

min and max attributes are applicable to input types such as number, range, date, datetime, datetime-local, month, time, and week.
The <input> element with minimum and maximum values:
 Enter a date before 1980-01-01:
Enter a date after 2000-01-01:
 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Try It Yourself

multiple attribute

The multiple attribute is a boolean attribute.

If set, it specifies that the user is allowed to enter more than one value in the <input> element.

The multiple attribute is applicable to the following input types: email and file.

Example

File upload field that accepts multiple values:

Please select an image: <input type="file" name="img" multiple>

Try It Yourself

pattern attribute

The pattern attribute specifies the regular expression used to check the value of the <input> element.

The pattern attribute is applicable to the following input types: text, search, url, tel, email, and password.

Tip:Use the global title attribute to describe the pattern to help the user.

Tip:Learn more about regular expressions in our JavaScript tutorial.

Example

Input field that can only contain three letters (no numbers or special characters):

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

Try It Yourself

placeholder attribute

The placeholder attribute specifies a hint (sample value or a brief description of the format) for the expected value of the input field.

This prompt will be displayed in the input field before the user enters a value.

The placeholder attribute applies to the following input types: text, search, url, tel, email, and password.

Example

Input fields with placeholder text:

<input type="text" name="fname" placeholder="First name">

Try It Yourself

Required Attribute

The required attribute is a boolean attribute.

If set, it specifies that the input field must be filled out before submitting the form.

The required attribute applies to the following input types: text, search, url, tel, email, and password.

Example

Required Input Fields:

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

Try It Yourself

Step Attribute

The step attribute specifies the valid numeric intervals of the <input> element.

Example: If step="3", the valid numbers should be -3, 0, 3, 6, and so on.

Tip:The step attribute can be used with the max and min attributes to create a range of valid values.

The step attribute applies to the following input types: number, range, date, datetime, datetime-local, month, time, and week.

Example

Input fields with specific legal numeric intervals:

<input type="number" name="points" step="3">

Try It Yourself