上一篇：
表单在网页中主要负责数据采集功能。
一.表单实际应用场景
百度搜索
5173注册
如上两张图，图中的黑色线条是我画上去的，如果按照黑线，在Excle中画出这两张表单，相信大家都可以也不是很难，那在Html中，我们同样也是画出这样的表单，最后将黑线隐藏即可。
二.表单包含的控件
具体写法：（ 插一句，Html代码中<!–xxxx–>,这样的内容，是注释内容，也就是代码执行的时候并不执行，只是类似看文言文时，旁边的注解一样 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
action:指定服务器端处理程序的路径（ Java 、.Net、PHP、Python、NodeJs……）
method:提交方式,有get和post两种
get：会将表单中的值直接带在地址栏中 不安全 数据量有限制
post：不会将表单中的值带在地址栏中 更安全 数据量没有限制
-->
<form action="#34; method="get">
<!--
对于不同控件中的value属性值，一般就是服务器端要拿到的具体的值
-->
<!--
单行 文本框 ：
type属性：因为密码框、单选按钮、 复选框 也都是 input
通过type属性来区分当前的input到底是什么
(如果input不指定type属性值，默认取值为text)
value：指定单行文本框的初始值
-->
<p>
单行文本框：<input type="text" value="初始值"/>
</p>
<p>
<!--
placeholder :当没有内容时默认显示的内容，随着用户的输入，会消失
如果清空输入吗，会再次出现
plcaceholder和value的区别在于：
placeholder不能通过用户输入直接改变内容
value提供的值用户是可以改变的
maxlength：限制输入字符的最大长度
*name:相当于给控件起个名字，服务器端可以根据这个名字，来区分每一项数据代表什么含义
-->
单行文本框：<input type="text" placeholder="初始值" maxlength="5" name="txt"/>
</p>
<!--
密码框
type:password密码框
单行文本框中能用的属性，密码框也都能用
-->
<p>
密码框：<input type="password" placeholder="请输入密码" name="pwd" maxlength="6"/>
</p>
<!--
单选按钮
type:radio 单选按钮
checked="checked"默认选中当前项
name在radio中的作用：
(1)服务器端用来识别数据
(2)用来描述同一组信息的内容只选中其中一个，用来分组，产生互斥
-->
<p>
<!--
<label>:如果要点击单选按钮后面的字也能够选中单选按钮，就使用
该标签将单选按钮以及文字都包裹在一起
-->
<label>
<input type="radio" checked="checked" name="sex" value="0"/>男
</label>
<label>
<input type="radio" name="sex" value="1"/>女
</label>
</p>
<!--
复选框
type： checkbox
name：用来对同一组相同含义的checkbox分组，就算给了name，也能够一次性选中多个
-->
<p>
<input type="checkbox" name="hobby" value="0"/>跑步
<input type="checkbox" name="hobby" value="1"/>打球
</p>
<!--
按钮 input
-->
<p>
<!--
重置按钮 type="reset"
value:按钮中要显示的文本，一般不需要传递给服务器端
重置不是简单的清空，而是回到页面最原始的状态
-->
<input type="reset" value="重置"/>
<!--
提交按钮 type="submit"
value:按钮中要显示的文本，一般不需要传递给服务器端
-->
<input type="submit" value="提交" />
<!--
普通按钮：type="button"
普通按钮本身不具有任何的特殊行为，其行为一般需要通过js脚本来绑定
-->
<input type="button" value="普通按钮" onclick="alert('这是一个普通按钮');"/>
<!--
图片按钮：type="image"
通过图片来制作按钮，相当于提交按钮
-->
<input type="image" src="001.jpg" />
<!--
注意：对于提交按钮和重置按钮，如果放在form元素以外的地方，
是无法对表单进行重置或提交操作的
-->
</p>
<!--
多行文本框 textarea (文本域)
cols：列数
rows：行数
name:用于在服务端获取数据时使用
注意：文本域中的默认内容应该写在标签之间，而不是value属性中
这一点和当行文本框是有区别的
placeholder:文本域为空时的默认内容
-->
<p>
<textarea cols="10" rows="20" placeholder="默认值">dsadasdas</textarea>
</p>
<!--
文件域 input type="file"
-->
<p>
<input type="file" />
</p>
<!--
隐藏域 input type="hidden"
不希望用户看到，但是程序处理时需要的数据，可以放在隐藏域中
-->
<p>
隐藏域：<input type="hidden" />
</p>
<!--
下拉列表框<select>
下拉列表中的每一个子选项
-->
<p>
<select>
<option>====请选择====</option>
<option>江苏</option>
<option>浙江</option>
<option>上海</option>
</select>
</p>
<!--
select标签的multiple="multiple"属性
将原本通过箭头点击的方式显示改为一次性就显示若干个
并且可以一次性选中多项
-->
<p>
<select multiple="multiple">
<option>====请选择====</option>
<option>江苏</option>
<option>浙江</option>
<option>上海</option>
<option>山东</option>
<option>安徽</option>
<option>福建</option>
</select>
</p>
<!--
按钮 button HTML5新特性
1、和input按钮的第一个区别：
input要显示的文本在value属性中
button要显示的文本在标签之间
button如果没有指定类型，默认就是一个提交按钮
2、和input按钮的第二个区别：
input按钮中的文本只能是普通文本
button标签之间写的任何html内容都能作为按钮的外观
-->
<p>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button" onclick="alert('普通button按钮');">普通按钮</button>
<button>
<h1>标题按钮</h1>
</button>
</p>
<!--
表单元素中的两个常用属性
(1)前端：都只能看不能改
(2)后端：readonly的控件值可以获取到，但是disabled不行
-->
<input disabled="disabled" value="默认值"/>
<input readonly="readonly" value="默认值"/>
</form>
</body>
</html>
三.表单的基本结构
<form action=”#34; method=”post”>
……
</form>
action：指定提交后，由服务器上哪个处理程序处理，是一个路径，绝对路径，相对路径都可以。
method：指定向服务器提交的方法，一般为post或get方法, post方法比较安全，且能传输的数据量更大
四.表单的基本语法
<form action=”login.aspx” method=”post”>
<p>用户名：
<input name=”username” type=”text”/>
</p>
<p>密 码：
<input name=”pwd” type=”password” />
</p>
<p>
<input type=”submit” name=”btn” value=”提交” />
</p>
</form>
表单输入元素：input，当然也有其它的。
五.表单的执行原理（了解即可）
客户端（比如：我们打开的网页）请求登陆，填写表单信息，点击某按钮提交→数据传输到服务器，服务器会执行后端代码（后续会讲到），验证发来的信息，给出反馈（比如：通过；不通过）→客户端接收服务器的反馈，在页面上显示出来。
举个例子：
一个客户去某店买东西，客户（客户端）说我是你们会员，提供了姓名，手机号（这就类似填写表单的一个过程），然后店员（服务器）根据你提供的姓名和手机号，查到了你的会员信息，然后告诉你（反馈）已经查到，确实是本店会员。
通过举例，希望大家能通俗的了解表单的执行原理。
六.表单的元素
1. 文本框
<input name= “userName” type= “text” value= “123456” maxlength=”5″>
type：指定input的类型，如果为text表示普通文本框
value：文本框中的初始值
maxlength：最大能够输入的字数
name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userName”)，之后的文章中会讲。
还有一个有用的placeholder属性，同样为初始值，区别于value，以灰色显示，且在输入内容时会自动被所输入的内容覆盖，清空输入内容后，又会显示出来，类似于一个提醒的作用。可自行尝试下。
2. 密码框
<input name= “userPwd” type=”password” value=”” maxlength=”4″>
type：指定input的类型，如果为password表示密码框
value：密码框中的初始值
maxlength：最大能够输入的字数
name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userPwd”)，之后的文章中会讲。
3. 按钮
<input type=”reset” value=”重填”/>
<input type=”submit” value=”提交” />
<input type=”button” value=”普通按钮” />
<input type=”image” src=”images/login.gif” value=”图片按钮” />
type的取值不同代表不同类型的按钮，对于提交按钮会提交表单，重置按钮可以清空表单内容，但是其它类型的按钮，具体实现什么功能，只能通过后面学习脚本以后才能进行处理，value属性表示按钮上显示的文本，name属性的主要作用体现在后期脚本的绑定上
4. button按钮
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type=”button”> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
写法：<button type = “button”>开</button>
5. 单选按钮
<input name=”gen” type=”radio” value=”男” checked=”checked”>
<input name=”gen” type=”radio” value=”女” >
input的type取值为radio时，表示单选按钮
name属性除了能够让服务器获取选中的单选按钮信息外，还能将单选按钮进行分组
checked=”checked”表示选中状态，同一组单选按钮，其中选中状态的按钮最多只有一个
value表示最后服务端真正能获取到的值。并不是显示在单选按钮外边的内容。
还可以在外边嵌套<label></label>标签提升用户体验
6. 复选框
<input type=”checkbox” name=”hobby1″ value=”sports” />
<input type=”checkbox” name=”hobby2″ value=”talk” checked=”checked” />
<input type=”checkbox” name=”hobby3″ value=”play” />
input的type取值为checkbox时，表示复选框
name属性除了能够让服务器获取选中的复选框信息外，还能将复选框进行分组
checked=”checked”表示选中状态，同一组复选框，其中，选中状态的可以任意多个
value表示最后服务端真正能获取到的值。并不是显示在复选框外边的内容。
还可以在外边嵌套<label></label>标签提升用户体验
7. 文本域
用来输入多行文本
写法：<textarea name=”” cols=”10″ rows=”20″>12345</textarea>
name:用于在服务端获取数据时使用
cols：列数
rows：行数
值得注意的是：textarea中的内容应该写在标签之间，而不是value属性中！！！如上述写法中，“12345”即为多行文本框的内容。
8. 文件域
<input type=”file” name= “uploadFile”>
<input type=”submit” name=”upload” value=”上传” />
当input的type为file时，表示文件上传按钮，一般会和提交按钮一起使用，此处不做太多说明，文件具体上传时需要学习服务端编程后方可掌握。
9. 列表框
<select name=”bmon”>
<option value=”” selected=”selected”>
[选择月份]
</option>
<option value=”0″>一月</option>
<option value=”1″>二月</option>
<option value=”2″>三月</option>
<option value=”3″>四月</option>
</select>
select：name属性，列表名称，用于服务器获取选中项
option是列表下面的每一个小项，value属性是服务器能获取到的具体的值，<option>标签之间是呈现给用户的选项信息，selected=”selected”表示该项选中。
10. 隐藏域
方便“记住”一些供服务端使用的信息、但又不希望客户看到的数据
<input type=”hidden” name=”….” value=”…” />
主要就是type属性为hidden，其他属性与input框的属性填写相同。
七.表单中的一些属性
只读和禁用属性
readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用
<textarea readonly=”readonly”></textarea>
<input type=”text” readonly=”readonly” />
<input type=”text” disabled=”disabled” />
上面的属性也可用于其它表单元素，达到只读或禁用的效果。
form 表单中disabled属性的元素不参与表单提交，也就是表单submit后，后台无法获取有disabled属性元素的值。
八.HTML5 新的 input 类型及支持的浏览器
HTML5 新的 input 类型及支持的浏览器
九.音频标签
写法：
<audio src=”Nightwish-She%20Is%20My%20Sin.mp3″ controls=”controls” autoplay=”autoplay” loop=”loop”>
暂不支持此标签
</audio>
src：要播放的音频的 URL。
autoplay：如果出现该属性，则音频在就绪后马上播放。
loop：如果出现该属性，则每当音频结束时重新开始播放。
controls：若出现该属性，则向用户显示控件，比如播放按钮。
暂不支持此标签，是在你使用的浏览器，不支持的情况下显示。
具体浏览器的兼容性，见下图
audio标签各浏览器兼容情况
十.视频标签
写法：
<video src=”#34;%20controls=”controls” autoplay=”autoplay” loop=”loop” width=”1000px”>
您的浏览器不支持video标签
</video>
src：要播放的视频的 URL。
controls=”controls” 若出现该属性，则向用户显示控件，比如播放按钮。
loop=”loop” 循环播放
autoplay=”autoplay” 自动播放
width、height:指定视频窗口的大小
相比音频标签，可以添加width和height指定视频窗口大小
