HTML Input属性

该value属性

所述value属性指定的输入字段的初始值：

该readonly属性

的readonly属性指定输入字段是只读(cannot be changed) ：

该readonly属性不需要值。 这是一样的书写只读=“只读”。

该disabled属性

所述disabled属性指定输入字段被禁用。

禁用的元件是未使用的和未点击。

禁用的元素不会被提交。

该disabled属性不需要值。 这是一样的不可写入=“已禁用”。

在size属性

的size属性指定的大小(in characters)输入字段：

该maxlength属性

的maxlength属性指定输入字段的最大允许长度：

用maxlength属性，输入控制将不接受除字符的所允许的数量更多。

该属性不提供任何反馈。 如果你想提醒用户，您必须编写JavaScript代码。

HTML5属性

HTML5加入following的属性<input> ：

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

和following的属性<form>

• autocomplete
• novalidate

该autocomplete属性

该autocomplete属性指定形式或输入字段是否应autocomplete或关闭。

当autocomplete的，浏览器自动完成值基于用户以前输入的值。

Tip:它可以具有autocomplete "on"的形式，而"off"特定的输入字段，或者反之亦然。

该autocomplete属性适用<form>以及以下<input>类型： text, search, url, tel, email, password, datepickers, range, and color 。

例

HTML表单与autocomplete上(and off for one input field) ：

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

试一试»

提示：在某些浏览器中，您可能需要激活autocomplete功能，这个工作。

该novalidate属性

所述novalidate属性是一个<form>属性。

如果存在， novalidate指定当提交表单数据不应该被验证。

例

指示形式并不要在提交验证：

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

试一试»

该autofocus属性

该autofocus属性是一个布尔属性。

当存在时，它指定一个<input>元件自动地获得聚焦页面加载时。

例

让"First name"输入栏自动获得焦点的页面加载时：

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

试一试»

该form属性

的form属性指定的一个或多个形式<input>元素属于。

Tip:要引用不止一种形式，使用的空格分隔的列表form ids 。

例

一个input field位于HTML表单外(but still a part of the form) ：

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

Last name: <input type="text" name="lname" form="form1">

试一试»

该formaction属性

该formaction属性指定表单提交时，将处理输入控制文件的URL。

所述formaction属性重写action的属性<form>元素。

所述formaction属性用于类型=“提交”和type =“图像”。

例

有两个一个HTML表单提交按钮，用不同的操作：

<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"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

试一试»

该formenctype属性

所述formenctype属性指定如何形式数据应该将它提交给服务器时进行编码(only for forms with method="post" ) 。

所述formenctype属性覆盖enctype所述的属性<form>元素。

所述formenctype属性用于type="submit"和type="image" 。

例

发送form-data是默认编码(the first submit button) ，并编码为"multipart/form-data" (the second submit button) ：

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

试一试»

该formmethod属性

所述formmethod属性定义用于发送所述HTTP方法form-data到动作URL。

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

所述formmethod属性可以与使用type="submit"和type="image" 。

例

第二提交按钮覆盖形式的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="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

试一试»

该formnovalidate属性

该novalidate属性是一个布尔属性。

当存在时，它指定了<input>提交时元件不应该被验证。

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

所述formnovalidate属性可以与使用type="submit" 。

例

表单有两个提交按钮(with and without validation) ：

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

试一试»

该formtarget属性

所述formtarget属性指定的名称或指示在哪里显示被提交表单之后接收到的响应中的关键字。

所述formtarget属性重写target的属性<form>元素。

所述formtarget属性可以与类型被用来=“提交”和type =“图像”。

例

有两个表单提交按钮，与不同的目标窗口：

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

试一试»

的height和width属性

的height和宽度的属性指定的高度和宽度<input>元素。

的height和width的属性仅与使用<input type="image">

例

定义图像作为提交按钮时，以高度和宽度属性：

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

试一试»

该list属性

的list属性指的是<datalist>包含预先定义的选项的元素<input>元素。

例

一个<input>在一个元件与预定义值<datalist> ：

<input list="browsers">

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

试一试»

在min和max属性

的min和max属性指定的最小和最大值<input>元素。

在min和max属性工作，下面的输入类型： number, range, date, datetime, datetime-local, month, time and week 。

例

<输入>与最小和最大值元素：

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

试一试»

在multiple Attribute

在multiple属性是一个布尔属性。

当存在时，它指定允许用户在输入一个以上的值<input>元素。

在multiple属性适用于以下输入类型： email和file 。

例

接受多个值的文件上传字段：

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

试一试»

该pattern属性

的pattern属性指定正则表达式<input>元素的值与检查。

该pattern属性适用于以下输入类型： text, search, url, tel, email, and password 。

提示：使用全球标题属性描述的图案，以帮助用户。

Tip:了解更多关于正则表达式我们的JavaScript教程。

例

输入字段只能包含三个字母(no numbers or special characters) ：

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

试一试»

该placeholder属性

该placeholder属性指定描述输入域的预期值的提示(a sample value or a short description of the format) 。

用户输入值之前的提示被显示在输入字段中。

该placeholder属性适用于以下输入类型： text, search, url, tel, email, and password 。

例

与占位符文本输入字段：

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

试一试»

将required属性

该required属性是一个布尔属性。

当存在时，它指定一个输入字段必须提交表单之前填写。

将required属性适用于以下输入类型： text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file 。

例

一个必需的输入字段：

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

试一试»

在step属性

在step属性规定的合法的数字间隔<input>元素。

例如：如果步骤= “3”，合法的数是-3，0，3，6，等

Tip:该step属性可以连同被用于max和min属性来创建范围合法值。

在step属性适用于以下输入类型： number, range, date, datetime, datetime-local, month, time and week 。

例

与指定的合法的数字间隔输入字段：

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

试一试»

测试自己与练习！

练习1» 练习2» 练习3» 练习4»