input 表单属性

今天做项目的时候频繁用到了<input>元素，却发现好多属性都不懂。找资料总结。

accept 规定通过文件上传来提交的文件的类型。

//只能与 <input type="file"> 配合使用。
//例如只允许上传图片文件
 <input type="file" name="pic" id="pic" accept="image/*" />

align 规定图像输入的对齐方式。

值：left | right | top | middle | bottom 【不赞成使用。】

alt 定义图像输入的替代文本。

alt 属性只能与 <input type="image"> 配合使用。
alt 属性为用户由于某些原因无法查看图像时提供了备选的信息。

autocomplete 规定是否使用输入字段的自动完成功能。

自动完成允许浏览器预测对字段的输入。
当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
值： on | off
适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

autofocus 规定输入字段在页面加载时是否获得焦点。

【不适用于 type="hidden"】
值：autofocus

checked 规定此 input 元素首次加载时应当被选中。

与 <input type="checkbox"> 或 <input type="radio"> 配合使用
值：checked

disabled 当 input 元素加载时禁用此元素。

被禁用的 input 元素既不可用，也不可点击。
值：disabled

form 规定输入字段所属的一个或多个表单。

form 属性的值必须是其所属表单的 id。
可用于表单以外的输入字段
<form id="nameform">...</form>
Last name: <input type="text" name="lname" form="nameform" />

formaction 覆盖表单的 action 属性。

（适用于 type="submit" 和 type="image"）

formenctype 覆盖表单的 enctype 属性。

（适用于 type="submit" 和 type="image"）
值：

• application/x-www-form-urlencoded【在发送前对所有字符进行编码（默认）。】

• multipart/form-data【不对字符编码。当使用有文件上传控件的表单时，该值是必需的。】

• text/plain【将空格转换为 "+" 符号，但不编码特殊字符。】

formmethod 覆盖表单的 method 属性。

（适用于 type="submit" 和 type="image"）
值：get | post

formnovalidate 覆盖表单的 novalidate 属性。

如果使用该属性，则提交表单时不进行验证。
适用于 <form> 以及以下类型的 <input>：text, search, url, telephone, email, password, date pickers, range 以及 color。
值：formnovalidate

formtarget 覆盖表单的 target 属性。

（适用于 type="submit" 和 type="image"）
HTML5 不支持框架和框架集。parent, top 和 framename 值大多用于 iframe。

• _blank【在新窗口/选项卡中将表单提交到文档。】

• _self【在同一框架中将表单提交到文档。（默认）】

• _parent【在父框架中将表单提交到文档。】

• _top【在整个窗口中将表单提交到文档】

• framename【在指定的框架中将表单提交到文档。】

list datalist-id 引用包含输入字段的预定义选项的 datalist 。

<label>网页：</label><input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

step 规定输入字的的合法数字间隔。

<input type="number" name="points" step="3" />
//合法数字应该是 -3、0、3、6，以此类推    

max 规定输入字段的最大值。

min 规定输入字段的最小值。

step、max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

maxlength 规定输入字段中的字符的最大长度。

maxlength 属性规定输入字段的最大长度，以字符个数计。
maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

size 定义输入字段的宽度。

对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。
而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度。

multiple 如果使用该属性，则允许一个以上的值。

【需要上传多个文件时可使用该属性】

name 定义 input 元素的名称。

属性用于对提交到服务器后的表单数据进行标识
或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

pattern 规定输入字段的值的模式或格式。

pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。

placeholder 规定帮助用户填写输入字段的提示。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password

readonly 规定输入字段为只读。

可与 <input type="text"> 或 <input type="password"> 配合使用。
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

required 指示输入字段的值是必需的。

适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

src URL 定义以提交按钮形式显示的图像的 URL。

只能与 <input type="image"> 配合使用。

type 规定 input 元素的类型。

• button 定义可点击按钮。

• checkbox 定义复选框。

• file 定义输入字段和 "浏览"按钮，供文件上传。

• hidden 定义隐藏的输入字段。

• image 定义图像形式的提交按钮。

• password 定义密码字段。该字段中的字符被掩码。

• radio 定义单选按钮。

• reset 定义重置按钮。重置按钮会清除表单中的所有数据。

• submit 定义提交按钮。提交按钮会把表单数据发送到服务器。

• text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

value 规定 input 元素的值。

对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

width 定义 input 字段的宽度。

height 定义 input 字段的高度

width和height只适用于 type="image"

PS:【对input元素UI自定义】

<input type="file" />默认的样式是这样的。

利用label for的属性，可以很好的改变样式。

<label class="btn btn-primary" for="xFile">上传文件</label>
<form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

上述例子中其实就是隐藏input。所以还可以用

style="visibility:hidden"
或者
style="display:none"

效果图如下