input 元素的属性

// 传统属性（11个）
accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value

// 新增属性（19个）
autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、
height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width

传统属性

[1] name：用于规定 input 的名称，用于对提交到服务器后的表单数据进行标识，或在客户端通过 JS 引用表单数据。

只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

[2] type：用来规定 input 元素的类型。

如果 input 元素没有设置 type 属性，或者设置的值在浏览器中不支持，那么输入类型默认为 type="text"。

[3] accept：用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型，然而它只是建设性的，并很可能被忽略，它接受逗号分隔的 MIME 类型。

该属性只能与 type="file" 配合使用。
<input type="file" accept="image/gif,image/jpeg,image/jpg">

[4] alt：为图像输入规定替代文本，类似于 image 的 alt 属性，为用户由于某些原因无法查看图像时提供备选信息。

alt 属性只能与 type="image" 的 input 元素配合使用。
<input type="image" src="#" alt="测试图片">

[5] checked：规定在页面加载时应该被预先选定的 input 元素，也可在页面加载后，通过 JS 进行设置。

checked 属性只能与 type="radio" 或 type="checkbox" 的 input 元素配合使用。

<input type="radio" name="radio" value="1" checked>
<input type="radio" name="radio" value="2">
<input type="checkbox" name="checkbox" value="1">
<input type="checkbox" name="checkbox" value="2">
<script>
var oInput = document.getElementsByTagName('input');
for(var i = 0,len = oInput.length; i < len; i++){
    oInput[i].onmouseover = function(){
        this.checked = 'checked';
    }
}    
</script>

[6] disabled：规定应该禁用 input 元素。 // disabled 属性无法与 type="hidden" 的 input 元素一起使用。

被禁用的字段是不能修改的，也不能用 tab 按键切换到该字段，但可以选中或拷贝其文本。

对于 IE7- 必须设置为 disabled="disabled"，而不可以直接设置 disabled，否则使用 JS 控制时将失效。
<button id="btn1">输入域可用</button>
<button id="btn2">输入域不可用</button>
<input id="test" disabled value="内容">
<script>
btn1.onclick = function(){
    test.removeAttribute('disabled');
}    
btn2.onclick = function(){
    test.setAttribute('disabled','disabled');
}    
</script>

[7] readonly：规定输入字段为只读，不能被修改，但用户仍可使用 tab 键切换到该字段，还可选中或拷贝其文本。

readonly 属性可与 type="text" 或 "password" 的 input 元素配合使用。

IE7- 浏览器不支持使用 JS 控制 readonly 属性。
<button id="btn1">输入域只读</button>
<button id="btn2">输入域可读写</button>
<input id="test" value="内容" readonly>
<script>
btn1.onclick = function(){
    test.setAttribute('readonly','readonly');
}
btn2.onclick = function(){
    test.removeAttribute('readonly');
}    
</script>

[8] maxlength：规定输入字段的最大长度，以字符个数计。

该属性只能与 type="text" 或 type="password" 的 input 元素配合使用。
<input maxlength="6">
<input type="password" maxlength="6">

[9] size：对于 type="text" 或 "password" 的 input 是可见的字符数；对于其他类型，是以像素为单位的字段宽度。

由于 size 属性是一个可视化的设计属性，推荐使用 CSS 来代替它。
<input size="1">
<input type="password" size="2">

[10] src：作为提交按钮显示的图像的 URL。

src 属性只能且必须与 type="image" 的 input 元素配合使用。
<form action="#">
    <input name="test">
    <input type="image" src="https://webpiece.cn/submit.jpg" width="99" height="99" alt="测试图片">
</form>

[11] value：为 input 元素设定值。对于不同的输入类型，value 属性的用法也不同：

type="button"、"reset"、"submit"，用于定义按钮上的显示的文本。
type="text"、"password"、"hidden"，用于定义输入字段的初始值。
type="checkbox"、"radio"、"image"，用于定义与输入相关联的值。

// type="checkbox" 或 "radio" 必须设置 value 属性。

// value 属性无法与 type="file" 的 input 元素一起使用。
<button id="btn1">1</button>
<button id="btn2">2</button>
<input id="test">
<script>
btn1.onclick = btn2.onclick =function(){
    test.value=this.innerHTML;
}    
</script>

新增属性

[1] autocomplete

autocomplete 属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值（也就是说，之前已经提交过），显示出在字段中填写的选项。

autocomplete 属性适用 form 元素以及以下类型的 input 元素：text、search、url、telephone、email、password、date pickers、range、color。 // IE 浏览器不支持该属性，只有元素拥有 name 属性，该属性才有效。
<input name="test1" autocomplete="on">              // 有记忆功能
<input name="test2" autocomplete="off">             // 无记忆功能

[2] autofocus

autofocus 属性规定在页面加载时，域自动获得焦点，适用于 button、input、keygen、select 和 textarea 元素。

<input name="test1">
<input name="test2" autofocus>

[3] novalidate // IE9- 浏览器不支持

novalidate 属性规定在提交表单时不验证 form 或 input 域。

novalidate 属性适用于 form 元素以及以下类型的 input 元素：text、search、url、telephone、email、password、date pickers、range、color。

[4] height

height 属性用于规定 image 类型的 input 标签的图像高度。

该属性只适用于 image 类型的 input 标签。

[5] width

width 属性用于规定 image 类型的 input 标签的图像宽度。

该属性只适用于 image 类型的 input 标签。

// http://127.0.0.1/form.html?test=123&x=38&y=57#
<form action="#">
    <input name="test">
    <input type="image" src="submit.jpg" width="99" height="99">
</form>

[6] list // IE9- 浏览器及 safari 浏览器不支持

大多数输入类型包含一个属性 list，它和一个新元素 datalist 结合使用，这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist 元素自身不会在页面显示，而是为其他元素的 list 属性提供数据。

list 属性适用于 form 元素以及以下类型的 input 元素：text、search、url、telephone、email、password、date pickers、range、color。

[7] min min 属性规定输入域所允许的最大值。

[8] max max 属性规定输入域所允许的最小值。

[9] step 为输入域规定合法的数字间隔。

min、max、step 属性适用于以下类型的 input 元素：date pickers、number、range。

<input type="number" min="0" max="10" step="0.5" value="6" />

<input type="range" min="0" max="10" step="0.5" value="6" />

[10] multiple 规定按住 Ctrl 按键，输入字段可以选择多个值。 // 该属性 IE9- 浏览器不支持。

该属性适用于 type="email" 和 "file" 的 input 元素。

<button id="btn1">打开文件多选</button>
<button id="btn2">关闭文件多选</button>
<br><br>
<input id="test" type="file" multiple>
<script>
btn1.onclick = function(){
    test.setAttribute('multiple','');
};
btn2.onclick = function(){
    test.removeAttribute('multiple');
};
</script>

[11] pattern

pattern 属性规定用于验证 input 域的模式。模型 pattern 是正则表达式。

pattern 属性适用于以下类型的 input 元素：text、search、url、tel、email、password。

// IE9- 浏览器及 safari 浏览器不支持。
<form action="#">
    <input pattern="\d{3}">    
    <input type="submit">
</form>

[12] placeholder // IE9- 浏览器不支持

placeholder 属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失。placeholder 属性适用于以下类型的 input 元素：text、search、url、tel、email、password。
<form action="#">
    <input type="tel" placeholder="请输入数字" pattern="\d{11}">    
    <input type="submit">
</form>
要修改 placeholder 的颜色需要使用 ::placeholder。
::placeholder{color:green;}

[13] required // IE9- 浏览器及 safari 浏览器不支持

required 属性规定必须在提交之前填写输入域（内容不能为空）。

required 属性适用于以下类型的 input 元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。
<form action="#">
    <input required>    
    <input type="submit">
</form>

[14] form

form 属性规定输入域所属的一个或多个表单，form 属性必须和所属表单的 id。

form 属性适用于所有 input 标签的类型，若需要引用一个以上的表单时，用空格分隔。

// IE 浏览器不支持该属性，只有元素拥有 name 属性，该属性才有效。

<form id="form" action="#">
    <input type="submit">
</form>
<input name="test" form="form">

[ 表单重写属性 ]

表单重写属性允许重写 form 元素的某些属性设定。

其中，formnovalidate 适用于 button 或 input 元素，而其他属性适用于 submit 或 reset 的 button 或 input 元素。

[15] formaction 重写表达的 action 属性。

<form action="#" >
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="#" value="以管理员身份提交" />
</form>

[16] formenctype 重写表单的 enctype 属性。

<form action="#" 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>

[17] formmethod 重写表单的 method 属性。

<form action="#" 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="#" value="使用POST提交" />
</form>

[18] formnovalidate 重写表单的 novalidate 属性。

<form action="#" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" />
</form>

[19] formtarget 重写表单的 target 属性。

<form action="#">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />
</form>