这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【常见的表单元素有哪些？各有什么属性？ 】

大家好，我是IT修真院北京分院第23期学员。今天小课堂的主要内容是，input表单的应用，还有在html5中新增的属性。

表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素，最主要的作用就是收集信息。表单元素是页面中不可缺少的元素，在最新的H5中，表单元素也新增了一些属性，在页面构建中发挥了重要的作用。一般来说，表单包含如下几个部分：

1. 提示信息：表单中包含的说明性文字

2. 表单控件：包含了具体的表单功能项

3. 表单域：容纳所有表单控件和提示信息

常用的表单元素，包括：

1. form: 定义供用户输入的表单。

2. fieldset: 定义域。即输入区加有文字的边框。

3. legend：定义域的标题，即边框上的文字。

4. label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

5. input: 定义输入域，常用。可设置type属性，从而具有不同功能。

6. textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。

7. button: 定义一个按钮。

8. select: 定义一个选择列表，即下拉列表。

9. option: 定义下拉列表中的选项。

接下来是对这些表单元素的具体分析。

<form name="" action="" method="get">……</form>

name : 表单名称；action : 用来指定表单处理程序的位置（url）；method : 定义表单结果从浏览器传送到服务器的方式，默认为"get"（也可以是post）

<input type="" name="" value="" size="">

name:控件名称；value:input控件默认文本值；size:input控件在页面中的显示宽度（必须是正整数）

input常用type属性如下：

1. text：单行文本输入框，可以通过正整数的size控制框长度。

2. password：密码输入框。

3. radio：单选按钮，同一组的单选按钮必须要有相同的name。

4. checkbox：复选框，同一组的单选按钮必须要有相同的name。

5. button：普通按钮。

6. submit：提交按钮，每出现一次，一个 Submit 对象就会被创建。

7. reset：重置按钮，会重置当前表单中全部的内容。

8. image：图像形式的提交按钮，写法是“”。

9. hidden：隐藏域，隐藏字段对于用户是不可见的。

10. file：文件域，用于文件上传。

<select size="" multiple="multiple">

<option hidden>选项1</option>

……

</select>

size：下拉菜单的可见选项数；multiple：多选。

在最新的html5中，有一些表单的新增属性，多用于js，如

datalist : 定义填写一个input时，提示几个option用于提示。可通过input的list特性与此元素作关联。

output : 表示计算的结果。可通过for特性与其它能够影响运算的元素（如input）作关联。

还有一些新增的type属性：

1. search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。

2. tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉。

3. url：编辑url的控件，提交时换行符与首位的空格都将自动去除。

4. email：可输入一个邮件地址。

5. color : 选择颜色的控件。

6. date : 选择年月日的控件。

此外，还有time、datetime、datetime-local、month、week、number、range类型。

html5中input新增的一些较常用的特性：

1. list：关联datalist所用的该datalist的id（即datalistform外建立，通过list关联即可）。

2. pattern：一个正则表达式，用于检查控件的值，可作用于text、search、tel、url、email类型的input。

3. form：一个字符串(为关联的form表单的id)，用于表明该input属于哪个form表单（作用类似list）。

4. formmethod：表明使用GET还是POST，能覆盖form表单的method。仅在type为image或submit，且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。

5. readonly：一个boolean值，表明该input值是否能被用户修改，可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。

6. maxlength：type为text、emal、search、password、tel或url（都为文本）时允许输入的最大字符个数。

7. autocomplete：浏览器是否根据之前提交的输入情况对此input自动填值（即以option形式匹配之前的输入值），取值on或off，默认on。如在登陆页面不想显示上一个登陆的用户名等时，可设置为off。

参考文献

1. html元素-表单元素及实用属性：http://blog.csdn.net/qq_19865749/article/details/52490882" target="_blank"

2. W3School HTML 表单 ： http://www.w3school.com.cn/html/html_forms.asp" target="_blank"

3. HTML5-input元素新特性 ：http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date

相关ppt见：https://ptteng.github.io/PPT/PPT/css-04-%E8%A1%A8%E5%8D%95.html#/

腾讯视频：https://v.qq.com/x/page/o05246f2ah7.html

问题整理

1. 使用input上传文件或图片应该怎么办

涉及到angularjs，可参考插件https://github.com/nervgh/angular-file-upload

2. input为什么不使用闭合标签

input为自闭和标签，详见W3C标准

3. type="number"在输入框右侧有上下箭头可以加减数字，怎么去掉箭头？

使用type="tel"时没有右侧上下箭头

HTML表单元素、表单控件

HTML工作原理

HTML是部署在服务器上的文本文件根据HTTP协议，浏览器发出请求给服务器，服务器做出响应，给浏览器返回一个HTML浏览器解释执行HTML，从而显示出内容
HTML部署在服务器上，运行在浏览器上

表单

表单用于显示、收集信息，并提交信息到服务器
表单二要素：

• （1）表单元素
• （2）表单控件——<input>元素中的，各个type属性值

表单元素	表单控件
input	text——文本框
label——管理表单中的文本	password——密码框
select——下拉选	radio——单选按钮
textarea——文本域	checkbox——多选按钮
-	hidden——隐藏文本域
-	file——文件上传组件
-	submit——提交按钮
-	reset——重置按钮
-	button——普通按钮

新增表单控件
email
url
search——此类型表示输入的将是一个搜索关键字
number / range——不同的数字输入模式
color——让用户通过颜色选择器选择一个颜色值，并反馈到value中
date——日期和时间选择器

表单就是从浏览器向服务器传输数据的手段

• 定义表单:使用成对的<form></form>标记，表示要将此元素中所涵盖的控件中的数据传输给服务器

• 主要属性：
  （1）action:表单提交的URL
  （2）method:指出表单数据提交的方式
  （3）enctype:表单数据进行编码的方式

input元素 ：他们之间用type属性区分。

• 1、文本框：<input type="text"/>
• 2、密码框：<input type="password"/>
  主要属性：
  （a）value属性：由访问者自由输入的任何文本
  （b）maxlength属性：限制输入的字符数
  （c）readonly属性：设置文本控件只读
  （d）name属性：当提交form时，name作为元素标识被发送到服务器
• 3、单选框：<input type="radio"/>
• 4、复选框：<input type="checkbox"/>
  主要属性
  （a）value：文本，当提交form时，如果选中了此按钮，那么value就被发送到服务器
  （b）name：用于实现分组，一组单选框或者复选框的名称必须相同
  （c）checked：设置选中
  （d）id：元素的唯一标识，相当于元素的身份证号。任何元素都可以有id，程序员有义务保障元素的id不重复。id属性与<label></label>标签配合，可用于使选项后的文字可被点击来选中选项。
  
  效果：
  
• 5、隐藏域：<input type="hidden"/>
  在表单中包含不希望用户看见的信息
• 6、文件选择框：<input type="file"/>
  选择要上传的文件
  
  
• 7、提交按钮：<input type="submit"/>
  传送表单数据给服务器端或其它程序处理
• 8、重置按钮：<input type="reset"/>
  清空表单的内容并把所有表单控件设置为最初的默认值
• 9、普通按钮：<input type="button"/>
  用于执行客户端脚本，没有任何功能，需通过js定义功能。
  主要属性：
  value:按钮的名字

其他元素（3个）；

1、<label>： 用来管理表单中的文本，可以将文本与控件绑定在一起，从而增加了控件的受力面积。
语法：<label for="控件ID">文本</label>
主要属性:

• for:设置该文本所关联的控件ID，关联后点击标签等同于点
  击控件

id：元素的唯一标识，相当于元素的身份证号。任何元素都可以有id，程序员有义务保障元素的id不重复。

• 2、<select>： 下拉选
  selected：默认选中
  
  
• 3、<textarea>：文本域
  相当于多行文本框
  语法：
  <textarea>文本</textarea>
  主要属性：
  cols：指定文本区域的列数
  rows：指定文本区域的行数
  readonly：只读
  
  

form元素只是一个数据获取元素的容器，而容器内的元素称为表单控件。最常用的表单控件是input元素

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性

传统属性

name

name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据

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

type

type属性用来规定input元素的类型

注意：如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type=“text”

accept

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

注意：该属性只能与type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt

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

注意：alt属性只能与type="image"的input元素配合使用

<input type="image" src="#" alt="测试图片">

checked

checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置

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

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<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>

disabled

disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本

[注意1]disabled属性无法与type="hidden"的input元素一起使用

[注意2]对于IE7-浏览器必须设置为disabled=“disabled”，而不可以直接设置disabled，否则使用javascript控制时将失效

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

readonly

readonly属性规定输入字段为只读。只读字段是不能修改的，但用户仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本

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

注意：IE7-浏览器不支持使用javascript控制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>

maxlength

maxlength属性规定输入字段的最大长度，以字符个数计

注意：该属性只能与type="text"或type="password"的input元素配合使用

<input maxlength="6">
<input type="password" maxlength="6">

size

size属性对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度

注意：由于size属性是一个可视化的设计属性，推荐使用CSS来代替它

<input size="1">
<input type="password" size="2">

src

src属性作为提交按钮显示的图像的URL

注意：src属性只能且必须与type="image"的input元素配合使用

<form action="#">
    <input name="test">
    <input type="image" src="https://demo.xiaohuochai.site/submit.jpg" width="99" height="99" alt="测试图片">
</form>

value

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

type=“button”、“reset”、"submit"用于定义按钮上的显示的文本

type=“text”、“password”、"hidden"用于定义输入字段的初始值

type=“checkbox”、“radio”、"image"用于定义与输入相关联的值

[注意1]type="checkbox"或"radio"必须设置value属性

[注意2]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>

新增属性

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">    
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

autofocus

autofocus属性规定在页面加载时，域自动地获得焦点

autofous属性适用于button、input、keygen、select和textarea元素

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

novalidate

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

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

注意：IE9-浏览器不支持

height

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

注意：该属性只适用于image类型的input标签

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>

list

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

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

注意：IE9-浏览器及safari浏览器不支持

min

min属性规定输入域所允许的最大值

max

max属性规定输入域所允许的最小值

step

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

multiple

multiple属性规定按住ctrl按键，输入字段可以选择多个值

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

注意：该属性IE9-浏览器不支持

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

pattern

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

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

注意：IE9-浏览器及safari浏览器不支持

<form action="#">
    <input pattern="\d{3}">    
    <input type="submit">
</form>

placeholder

placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失

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

注意：IE9-浏览器不支持

<form action="#">
    <input type="tel" placeholder="请输入数字" pattern="\d{11}">    
    <input type="submit">
</form>

要修改placeholder的颜色需要使用::placeholder

::placeholder{color:green;}

required

required属性规定必须在提交之前填写输入域(不能为空)

required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file

注意：IE9-浏览器及safari浏览器不支持

<form action="#">
    <input required>    
    <input type="submit">
</form>

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

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>

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>

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>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

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>

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>