[TOC] # input 系列 ## --accept （规定上传文件类型） > 规定通过文件上传来提交的文件的类型 ~~~ <form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> </form> ~~~ ~~~ 如果不限制图像的格式，可以写为：accept="image/*" ~~~ **注**：accept 属性只能与 `<input type="file">` 配合使用。它规定能够通过文件上传进行提交的文件类型。 ## --autocomplete （是否记录历史输入） > 启用自动完成功能的表单（是否记录输入值） ~~~ <form action="demo_form.asp" method="get" autocomplete="on"> First name:<input type="text" name="fname" /> </form> ~~~ 效果：  **注**：autocomplete 属性适用于 `<form>`，以及下面的 `<input>` 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。 ## --autofocus （页面加载时获取焦点） > 为当页面加载时文本输入框获得焦点 ~~~ <form action="demo_form.asp"> First name:<input type="text" name="fname" autofocus="autofocus" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" /> </form> ~~~ 效果：  ## --checked （预选定） > 带有一个预选定复选框的 HTML 表单 ~~~ <form action="form_action.asp" method="get"> <input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car </form> ~~~ 效果：  > checked 属性规定在页面加载时应该被预先选定的 input 元素。 checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。 checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。 ## --disabled （禁用） > 禁用输入字段的 HTML 表单 ~~~ <form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" disabled="disabled" /></p> <input type="submit" value="Submit" /> </form> ~~~ 效果：  ## --form （表单之外的输入字段） > 位于表单之外的输入字段 ~~~ Last name: <input type="text" name="lname" form="nameform" /> ~~~ 效果：  > form 属性规定 input 元素所属的一个或多个表单。 form 属性的值必须是其所属表单的 id。 如需引用一个以上的表单，请使用空格分隔的列表。 ## --formaction （覆盖表单的 action 属性） > 覆盖表单的 action 属性 。 适用于 type="submit" 和 type="image" ~~~ <form action="demo_form.asp" method="get"> 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> ~~~ 效果：  ## --formmethod （覆盖表单的 method 属性） > 覆盖了表单的 HTTP 方法 ~~~ <form action="demo_form.asp" 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" /> </form> ~~~ 效果：  ## --formenctype （覆盖表单的 enctype 属性） > 覆盖表单的 target 属性 带有两个提交按钮的表单（拥有有不同的编码方式） ~~~ <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" /> </form> ~~~ 效果：  **注：**该属性与 type="submit" 和 type="image" 配合使用。 ## --formnovalidate （提交表单时不进行验证） > 覆盖表单的 novalidate 属性，提交表单时不进行验证 带有两个提交按钮的表单（一个进行验证，另一个不验证）： ~~~ <form action="demo_form.asp" method="get"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /><br /> <input type="submit" formnovalidate="formnovalidate" value="Submit" /> </form> ~~~ 效果：  **注：**该属性适用于 `<form>` 以及以下类型的` <input>`：text, search, url, telephone, email, password, date pickers, range 以及 color。 ## --formtarget （提交到不同的目标窗口） > 带有两个提交按钮的表单，会提交到不同的目标窗口显示： ~~~ <form action="demo_form.asp" 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" formtarget="_blank" value="Submit" /> </form> ~~~ 效果：  ## --height （定义 input 字段的高度） > 用图片作为提交按钮的表单： ~~~ <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/> </form> ~~~ 效果：  **提示：**为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。 ## --list （带有 datalist 的表单） > 带有 datalist 的表单 ~~~ <form action="demo_form.asp"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form> ~~~ 效果：  ## --max （规定输入字段的最大值） > 带有指定范围的数字输入字段 ~~~ Points: <input type="number" name="points" min="0" max="10" /> ~~~ 效果：  **注：**max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。 ## --maxlength （规定输入字段中的字符的最大长度） > 下面这个 HTML 表单带有最大长度分别是 85 和 55 个字符的两个输入字段 ~~~ <form action="form_action.asp" method="get"> <p>Name: <input type="text" name="fullname" maxlength="85" /></p> <p>Email: <input type="text" name="email" maxlength="55" /></p> <input type="submit" value="Submit" /> </form> ~~~ **用法：**maxlength 属性规定输入字段的最大长度，以字符个数计。 maxlength 属性与 `<input type="text">` 或 `<input type="password">` 配合使用。 ## --multiple（允许一个以上的值） > 可接受多个值的文件上传字段 ~~~ <form action="demo_form.asp" method="get"> Select images: <input type="file" name="img" multiple="multiple" /> <input type="submit" /> </form> ~~~ > 上传图片的时候可以多选 **用法：**multiple 属性规定输入字段可选择多个值。 如果使用该属性，则字段可接受多个值。 注释：multiple 属性使用欧冠与以下 <input> 类型：email 和 file。 ## --name （定义 input 元素的名称） > 带有两个文本字段和一个提交按钮的 HTML 表单 ~~~ <form action="form_action.asp" method="get"> <p>Name: <input type="text" name="fullname" /></p> <p>Email: <input type="text" name="email" /></p> <input type="submit" value="Submit" /> </form> ~~~ **注：**name 属性规定 input 元素的名称。 name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。 注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 ## --pattern（规定输入字段的值的模式或格式） > 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 只能包含三个字母的文本字段（数字或特殊字符） ~~~ Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> ~~~ **用法：**pattern 属性规定用于验证输入字段的模式。 模式指的是正则表达式。您可以在我们的 JavaScript 教程中阅读到这方面的内容。 **注释**：pattern 属性适用于以下 `<input>` 类型：text, search, url, telephone, email 以及 password 。 **提示**：请使用标准的 "title" 属性来描述模式。 ## --placeholder （规定帮助用户填写输入字段的提示） > 规定帮助用户填写输入字段的提示 ~~~ <form action="demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </form> ~~~ 效果：  **注：**placeholder 属性提供可描述输入字段预期值的提示信息（hint）。 该提示会在输入字段为空时显示，并会在字段获得焦点时消失。 placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。 ## --readonly（只读） ~~~ <form action="form_action.asp" method="get"> Name:<input type="text" name="email" /> Country:<input type="text" name="country" value="China" readonly="readonly" /> <input type="submit" value="Submit" /> </form> ~~~ **注：**readonly 属性规定输入字段为只读。 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。 readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。 readonly 属性可与 `<input type="text">` 或 `<input type="password">` 配合使用。 ## --required （指示输入字段的值是必需的） > 带有必填字段的表单 ~~~ <form action="demo_form.asp" method="get"> Name: <input type="text" name="usr_name" required="required" /> <input type="submit" /> </form> ~~~ 效果： **注：**required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 ## --step （规定输入字的的合法数字间隔） > 带有合法数字间隔的数字输入控件 ~~~ <form action="demo_form.asp" method="get"> <input type="number" name="points" step="3" /> <input type="submit" /> </form> ~~~ 效果： **注：**step、max 以及 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。 ## --size（定义输入字段的宽度） ~~~ <form action="form_action.asp" method="get"> <p>Email: <input type="text" name="email" size="35" /></p> <p>PIN: <input type="text" name="pin" maxlength="18" size="18" /></p> <input type="submit" value="Submit" /> </form> ~~~ 效果：  ## --width（定义 input 字段的宽度） > 定义 input 字段的宽度。（适用于 type="image"） ~~~ <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/> </form> ~~~ width 属性只适用于 <input type="image">，它规定 image input 的宽度。 **提示：**为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。