第十章 表单元素
一、
1、<form> 表示html表单:(单独本事没什么效果,不定义无法提交)
| 元素名称
(1) action : 表示表单提交的页面; //<form action="http://www.baidu.com">
(2) method : 表单的请求方式,有POST和GET两种,默认GET; //<form method="get" action="http://www.baidu.com">
(3)enctype : 表示浏览器对发送给服务器的数据采用编码格式,有三种;application/x-www-form-urlencoded(默认格式,可不写)
multipart/form-data (用于上传文件到服务器)
(4) name : 设置表名单以便调用;
(5) target : 超链接,设置提交时的目标位置;_blank/_parent/_self/_top;
(6)autocomplete :设置浏览器时记住用户输入的数据,默认为on自动完成(一般不用写,系统默认),如果不想自动完成则设为off;
(7) novalidate :设置是否执行客户端数据有效性检查;
2、<input> 表示用来收集用户输入数据的控制:
(1)autofocus : 让光标聚焦在某个input元素上,让用户输入; //<input name="user" autofocus >
(2)disabled : 禁用用户输入; //<input name="user" autofocus disabled> (html5支持单属性)
(3)autocomplete : 单独设置input元素的自动完成功能;
(4)form : 让表单外的元素和指定的表单挂钩提交;(在form外的数据与form里提交)
例如、<form method="get" id="register" action="http://www.baidu.com">
用户名:<input type="" name="user">
<button>提交</button>
<input name="user" autofocus disabled>
</form>
电子邮件:<input name="emall" form="register">
(5)type : input元素的类型;
(6)name :定义input元素的名称,以便接收到相应的值;
(7)value :默认起始值;
3、<textarea> 表示可以输入多行文本的控制:
4、<select> 表示用来提供一组固定的选项:
5、<option> 表示提供一个选项:
6、<optgroup> 表示一组相关的option元素:
7、<button> 表示用来提交或重置的表单按钮(或一键按钮):
有三个元素
(1)、<button type="submit">提交</button>
(2)、<button type="reset">重置</button>
(3)、<button type="button">按钮</button> //没有任何效果,需要配合JavaScript进行处理;
(4)、对于type属性为submit时,按钮还会提供额外的属性:
|———————— |——————————————————|
| 属性名称 | 说明 |
| form | 指定按钮关联表单 |
| formmaction | 覆盖form元素的action属性 |
| formenctype | 覆盖form元素的enctype属性 |
| formmethod | 覆盖form元素的method属性 |
| formetarget | 覆盖form元素的target属性 |
| formnovalidate | 覆盖form元素的novalidate属性 |
|———————— |——————————————————|
<form method="get" id="register" action="http://www.baidu.com">
<button type="submit" formaction="http://www.sogou.com">提交</button>
//这里是在对原地址不删除的情况下,对原地址进行覆盖;
8、<datalist> 表示给用户提供的一组建议值:
9、<fieldset> 表示一组表单元素:(对于不同内容进行分组,相同的内容会在一个矩形框里,fieldset相当于矩形框)
(1~3)、name,form,disabled //( <fieldset disabled> ) ;
10、<legend> 表示fieldset元素的说明性标签:(和上面的连用,在框子上有标签)
例 <fieldset>
<legend>注册表单</legend>
</fieldset>
11、<label> 表示表单元素的说明性标签;(光标不仅点击输入框能输入,点击前面的电子邮件光标也会变到输入框里)
(后期学习的CSS用到,可以通过label进行样式的设置)
例一、<label>
用户名:<input type="" name="user">
<button>提交</button>
</label>
例二、<label>
电子邮件:<input name="emall" form="register">
</label>
例三、<label for="user">用户名:</label> //如果只想包含用户名,就用例三;
<input id="user" name="user" autofocus>
12、<output> 表示计算结果: