HTML中的表单

《表单》
一、表单简介
1.表单其实就像生活在办事时候填写的表格
2.表单的目的就是用于收集用户信息
3.有了表单，方便用户填写，便于后期的数据整理和分类
4.表单时一个将用户信息组织起来的容器
5.表单在网页中用form标签表示
6.它本身没有任何外观显示，表示的是一个范围
7.表单由众多的表单元素组成
8.为了采集用户的不同类型的信息，表单元素也是各种各样
9.表单只是一个集合，重要的是如何用各种表单元素来组织表单
10.表单属性action指示服务器上处理表单输出的程序。语法为action=“URL”。
11.表单属性method指向服务器发送数据的方法。
语法为method=(get | post)。
12.post方法提交方式不会改变地址栏状态，表单数据不会显示。
13.get方法会改变地址状态，表单数据会在URL信息中显示。

二、表单元素
1.元素：
2.input元素的常用属性
3.type表示表单元素的类型。
可用类型有：text、password、checkbox、radio、submit、reset、file、email、number、url、hidden、image和button。默认为text。
input元素中email类型、url类型、number类型均有自动验证输入是否合法的功能。
4.name表示表单元素的名称
5.value表示表单元素的初始值
6.size表示表单元素的初始宽度，也就是文本框的长度
7.maxlength表示可在text或password元素中输入的最大字符数，也就是可输入的数据长度。
8.checked表示按钮是否被选择。

三、文本框
1.大部分表单元素都是由input标签编写，表示接受用户输入
2.文本框的基本语法：

<input type="text"/>

3.input表示输入，输入框，文本框
4.label表示标签，比如可以将“密码”这两个字放在在中间
5.type=text表示一个文本框，type的值很多，默认为text
6.name用于给表单元素命名，每一个表单元素都有此通用属性
7.value用于给文本框设置默认值
8.size用于设置文本框的宽度，大致以字符数为单位，表示能够显示多少个字符
9.maxlength表示最大字符数
10.readonly表示只读
11.checked表示按钮是否被选中
12.disabled表示禁用，通常用于按钮

四、密码框
1.type=password表示的是密码框，其他用法和普通文本框一致

五、单选按钮
1.单选按钮用于一组相互排斥的值，组中每个单选按钮应具有相同的名称
2.单选按钮的语法：

<input type="radio"/>

3.单选按钮后面通常会跟一个label标签对其进行说明
4.单选按钮是以组为单位使用，即每次至少两个一组
5.name属性用于命名，value用于设置值，value这个值用户看不见，给程序员读取信息用
6.名字相同的单选按钮表示同一组，才有互斥的效果
7.checked属性用于设置默认选中项，是一个boolean类型属性
举例：

<label>性别:</label>
<input name="n1"type="radio">男
<input name="n1"type="radio">女

六、复选框：

<input type="checkbox"/>

1.可以有多个，表示多选，通常同一组name相同
2.也可以单个使用，例如：是否同意本站协议
3.checked表示勾选，选择的意思
4.复选框组案例：兴趣爱好
举例：

<label>爱好：</label> 
<input name="n2" type="checkbox">游泳
   	 <input name="n2" type="checkbox">读书
   	 <input name="n2" type="checkbox">打篮球

七、下拉框（列表框）
1.下拉框也叫列表框，用于给用户在有限范围内快速选择
2.下拉框很特殊，是由两个标签组合使用的：

<select size="10" multiple>
	<option>请选择</option>
	<option selected>广州</option>
	<option>深圳</option>
	<option>上海</option>
</select>

3.下拉框的selected用于设置默认选中项
4.size属性用于将下拉框的外观设置为列表框
5.multiple属性用于设置是否允许多选

八、按钮
1.按钮在页面上是可以点击的
2.按钮的语法是：

<input type="button" value="登录"/>

3.按钮的分类：
a、type设置为button，表示显示为一个普通按钮，需要与事件关联使用
b、type设置为submit，表示是一个提交按钮
c、type设置为reset，表示是一个重置按钮
d、type设置为image，表示是一个图片按钮，src用来写它的路径
4.value设置的是按钮显示的文本，name用来给按钮命名
5.目前没有学习更高级的编程功能，所以普通按钮也只能是一个摆设
6.disabled是一个boolean属性，用于禁用按钮
7.提交按钮submit：
a.提交按钮可以用于提交表单
b.提交按钮必须放置在表单标签form内
c.form标签的action属性用于设置提交的路径
d.提交按钮一旦提交，则会跳转到action所指向的页面
e.如果没有设置表单的action，则默认提交给本页面，即刷新效果
f.页面一旦刷新，则表单内填写的值则清空重来了
8.表单的method用于设置提交方式：
a.post 推荐使用
b.get
9.重置按钮reset：用于将表单内元素的状态恢复为初始状态，类似于恢复出厂设置
10.完成登录提交成功案例

九、其他表单元素
1、多行文本域：

		<textarea>

a.语法：

<textarea name="textarea" cols="显示的列数" rows="显示的行数">文本内容</textarea>

2.cols属性表示多行文本框的列数，rows属性表示多行文本框的行数

4.隐藏域
a、type=hidden
b、在页面不可见
c、用于隐藏值，便于提交到后台给程序员使用
d、此信息对于用户没有用处，但是对于网站服务器有用
5、文件域
a.type=file
b.用于给用户选择文件，例如图片
c.选择图片后不能预览，需要额外写代码才能做到
d.不同浏览器的文件域的外观不一样，暂时不要纠结，样式可用CSS进行修改。
e.enctype编码属性为multipart/form-data，表示将表单数据分为多部分提交。
因为提交的表单数据包括普通的表单数据、文件数据等内容，所以必须如此设置。
6.表单元素的标注
a、给表单元素添加id属性
b、通过label元素的for属性和表单元素绑定
c、在点击label元素的时候，能够激活表单元素，使它获得焦点

举例：

<label>性别：</label>
<input id="n3"name="s3"type="radio" checked/ >
<label for="n3">男</label>
<input id="n4"name="s3"type="radio" checked/ >
<label for="n4">女</label>

十、HTML5新增的表单元素
1、email类型
a.type设置为email，不同的是email在提交表单时会自动验证email文本框的值，
如果不是一个有效的邮箱地址，则不允许提交表单。
b.语法：

<input type="email"name="email">

2、url网址类型，要求以http://开头
a.type设置为url，不同的是当提交表单时，如果输入的内容不是URL地址格式的文本，则不允许提交表单。
b.语法：

<form action="" method="post">
<p>请输入网址：
<input type="url" name="userUrl">
</p>
<input type="submit"/>
</form>

3.number数字类型
a.type设置为number
b.还可对接收的数字进行限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。
如果输入的数字不再限定的范围之内，则会出现错误提示。
c.无法输入数字以外的其他符号，点号除外
c.语法：

<form action=""method="post">
<p>请输入数字：
	<input type="number" name="num" min="允许的最小值" max="允许的最大值" step="数字间隔"/>
	</p>
<input type="submit">
</form>


d.number类型的属性
属性		值		描述
value		number		规定的默认值
min		number		规定允许的最小值
max		number		规定允许的最大值
step		number		规定合法的数字间隔（如果step="2",则合法的数是0、2、4等）

4、range滑块（滑动条）
a.type设置为range，其他的与上面类似
b、用于在指定范围内选取值
c、属性和number一样的：value、max、step
d、fange看不到当前值是多少，主要是让用户自己提供大致范围调整

5、search搜索框
a.type设置为search，其他与上面类似
b、不同之处在于当有内容输入以后，末尾会出现一个叉号，用于清空内容
十一、HTML5自带的表单验证
1.为什么需要表单验证
a、验证用户的输入是否合法
b、防止用户误操作
c、改善用户体验
d、减轻服务器的负担
2.表单验证的注意事项：
a、可以使用placeholder给出填写相关的提示信息
b、required属性用于要求此元素必须填写
c、pattern用于自定义验证规则，内容为正则表达式，例如邮政编码：\d(6)
d、点击提交按钮，提交表单的时候会触发表单验证
e、如果验证不通过，会给出提示，且不会提交表单，否则提交表单