之前学习的标签更多的是向用户展示信息，假如服务器端需要验证用户是否存在，这时就需要有一个用户输入内容的标签。表单在网页中主要负责数据采集功能，它用<form>标签定义。用户输入的信息都要包含在form标签中，点击提交后，<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单标签的格式:
<form action＝"url"method=get|post name="myform" ></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，默认为get
post和get区别：
1.数据提交方式，get把提交的数据url可以看到，post看不到
2.get一般用于提交少量数据，post用来提交大量数据
3.get最多提交1K数据，post理论上没有限制
4.get提交的数据在浏览器历史记录中，安全性不好
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>文本框和密码框</title></head><body><!--表单的组成： 表单标签（控件）、表单域、表单按钮表单的目的： 收集用户的信息并提交。表单域： 存放表单的区域表单按钮： 把表单域中收集的信息提交表单标签（控件）： input注意：1.input是单标签2.input通过type属性来更改它的形状--><h5>用户名和密码</h5><p>用户名：<input type="text" name="username" value="admin"/></p><p>密 码：<input type="password" value="123456" /></p></body></html>
·单行文本框<inputtype="text" >默认值是type="text"
·密码框<inputtype="password"/>
·单选按钮<inputtype="radio" name=””/>
·复选框<inputtype="checkbox"/>
·隐藏域<inputtype="hidden"/>
·文件上传<inputtype="file"/>
下拉框<select>标签
<select><optionvalue="1">北京</option></select>
·多行文本<textarea></textarea>
·提交按钮<inputtype="submit"/>
·普通按钮<inputtype="button"/>
·重置按钮<inputtype="reset"/>
文本框
<inputtype="text" />
属性：
name:定义控件名称
value：指定控件初始值
密码框
<inputtype="password" />
属性：
name:定义控件名称
value：指定控件初始值
单选按钮
<inputtype="radio" />
属性：
name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中
性别：
<inputtype="radio" name="sex"/>男
<inputtype="radio" name="sex"/>女
复选框
<inputtype="checkbox" />
属性：
name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中
例如：爱好:
<input type="checkbox"checked/>游戏
<inputtype="checkbox"/>唱歌
<inputtype="checkbox"/>跳舞
文件
<inputtype="file"/>
属性：
name:定义控件名称
使用file类型的input时要注意以下几点
1.form表单的method属性值要为post
1.form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。
默认地，表单数据会编码为"application/x-www-form-urlencoded"，不能用于文件上传
<form action=""method="post" enctype="multipart/form-data">
<input type="file"name="file1"/>
</form>
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>单选按钮和复选框</title></head><body><!--单选按钮: 必须通过相同的name属性值来达到单选的效果复选框--><p>性别：<input type="radio" name="sex" checked value="男"/>男 <input name="sex" value="女" type="radio"/>女</p><p>爱好：<input type="checkbox" checked/>吃饭饭 <input checked type="checkbox"/>睡觉觉<input type="checkbox"/>打代码</p></body></html>
隐西藏域
<inputtype="hidden" />
属性：
name:定义控件名称
value：指定控件初始值
按钮
<inputtype="button" />
属性：
name:定义控件名称
value：指定控件初始值
提交按钮
<inputtype="submit" />
属性：
name:定义控件名称
value：指定按钮表面显示文字
重置按钮
<inputtype="reset" />
属性：
name:定义控件名称
value：指定按钮表面显示文字
图像图片按钮
<inputtype="image" src="URL"/>
属性：
name:定义控件名称
src：指定图像地址
按钮
<button>按钮</button>
属性:
type:button/submit/reset,默认值为submit
下拉列表框续
<selectname="" id="">
<optgroup label="北京">
<optionvalue="1">东城区</option>
<optionvalue="2">西城区</option>
<optionvalue="3">海淀区</option>
</optgroup>
<optgroup label="河北省">
<option value="4">石家庄</option>
<option value="5">保定市</option>
<option value="6">沧州市</option>
</optgroup>
</select>
多行文本框
<textarea></textarea>
属性：
Øcols：这文字区块的宽度
Ørows：这文字区块的行数，即其高度
<textarea name="" id="" cols="30"rows="10">
</textarea>
<label></label>
标签为 input 元素定义标注。
label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”
<label for="pwd">记住密码</label>
<inputtype="checkbox" name="pwd" id="pwd"/>
*通过label的for指向按钮的id来绑定，for和id属性的值要相同
<form>
<labllel for="male">Male</label>
<input type="radio"name="sex" id="male" />
</form>
<label>标签一般和radio、checkbox类型一起使用。
<fieldset>元素集
fieldset 元素可将表单内的相关元素分组，通常和legend标签一起用，legend标签定义了fieldset的提示信息，fieldset是块级元素。
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
HTML5新增input类型
1.在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码
2.以上的不足都已经在HTML5中被克服，HTML5在以上的基础上增加了许多标签和属性，为开发人员带来了极大的方便。
电子邮件类型
功能描述：输入E-mail地址的文本框
语法：<inputtype="email"/>
注意：输入的内容中必须包含"@"，"@"后面必须具有内容
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>表单域</title></head><body><!--三个域：1.文本域： textarea 个人介绍/留言2.文件域： <input type="file"/> 上传文件3.表单域： form 收集控件信息并提交补充：get提交的速度快但是不安全，post速度慢但是安全--><form action="20多行文本和lable.html" method="post" name="login"><p>用户名：<input type="text" name="username"/></p><p>密码：<input type="password" name="pwd"/></p><input type="submit" value="提交"/><input type="reset"/></form><form action="20多行文本和lable.html" method="post" name="regiter"><p>用户名：<input type="text" name="username"/></p><p>密码：<input type="password" name="pwd"/></p><input type="submit" value="提交"/><input type="reset"/></form></body></html>
搜索类型
功能描述：输入搜索关键字的文本框
语法：<inputtype="search"/>
URL类型
功能描述：输入WEB站点的文本框
语法：<inputtype="url"/>
注意：输入的内容中必须包含"http://"，后面必须有内容
颜色类型
功能描述：预定义的颜色拾取控件
语法：<inputtype="color"/>
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>多行文本和lable</title></head><body><textarea cols="30" rows="10">个人介绍</textarea><hr/><!--lable使用方法：1.直接使用lable标签包裹input2.通过label的for指向按钮的id来绑定，for和id属性的值要相同--><p> <label>用户名：<input type="text"/></label></p><p> <label>密码：<input type="password"/></label></p><hr/><label for="pwd">记住密码</label><input type="checkbox" name="pwd" id="pwd" /><fieldset><legend>健康信息</legend>身高：<input type="text" /><br>体重：<input type="text" /></fieldset></body></html>
数字类型
功能描述：只能接受数字
语法：<inputtype="number"/>
属性：min：当前域能接受的最小值
max：当前域能接受的最大值
step：决定了域所接受值递增或递减的步长，默认为1
范围类型
功能描述：允许用户选择一个范围内的值
语法：<inputtype="range" min="0" max="100"value="80"/>
属性：min：范围的下限值
max：范围的上限值
step：声明该值递增或递减的步长
value：设置初始值
日期类型
功能描述：创建一个日期输入域
语法：<inputtype="date"/>
周类型
功能描述：与date类型相似，但只能选择周
语法：<inputtype="week"/>
月份类型
功能描述：与date类型相似，但只能选择月份
语法：<inputtype="month"/>
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>文件上传和按钮组</title></head><body><p>上传头像： <input type="file"/></p><p>隐藏域：<input type="hidden" value="11"/></p><p>普通按钮：<input type="button" value="注册"/></p><p>提交按钮：<input type="submit" value="登陆"/></p><p>重置按钮：<input type="reset"/></p><p>图像图片按钮：<input type="image" src="images/anniu.jpg" width="20px"/></p><p> <button>下一步</button></p></body></html>
placeholder
作用：默认提示
语法：<inputtype="text" placeholder="请输入用户名"/>
multiple
作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
语法：<inputtype="email" multiple/>
autofocus
作用：自动获取焦点
语法：<inputtype="text" autofocus/>
required
作用：防止域为空提交表单时
语法：<inputtype="text" required/>
minlength和maxlength
作用：定制元素允许的最小字符数和最大字符数
语法：<inputtype="text" minlength="6" maxlength="18"/>
min和max
作用：定制元素允许的最小数字和最大数字
语法：<inputtype="number" min=”0”max=”100”/>
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>下拉列表框</title></head><body>籍贯：<select name="sel" ><option >请选择省份</option><option selected value="山西省">山西省</option><option value="山东省">山东省</option><option >陕西省</option></select><select><option value="" >太原市</option><option value="" selected>晋中市</option><option value="">阳泉市</option></select><hr/><select name="" id=""><optgroup label="北京"><option>海淀区</option><option>朝阳区</option><option>西城区</option></optgroup><optgroup label="河北省"><option>石家庄</option><option>保定市</option></optgroup></select></body></html>
联系客服
