表单就是一个将用户信息组织起来的容器
表单的应用比较常见,典型的应用场景如下:
(1)登陆,注册:登陆时填写用户名,密码,注册时填写用户名,电话等个人信息
(2)网上订单:在网上购买商品,一般要求填写姓名,联系方式,付款方式等信息
(3)调查问卷:回答对某些问题的看法,以便形成统计数据,方便分析
(4)网上搜索:输入关键字,搜索想要的可用信息
2.表单标签及表单属性
在HTML5中,使用<form>标签来实现表单的创建,该标签用于在网页中创建表单区域,属于容器标签,其他表单标签需要在它的范围内才有效,<input>便是其中一个,用以设定各种输入资料的方法,<form>标签有两个常用的属性:
| 属性 |
说明 |
| action |
此属性值是服务器上处理表单输出的程序.一般来说,当用户单击表单上的"提交"按钮后,信息发送到Web服务器上,由action属性所制定的程序处理.语法为action="URL".如果action属性的值为空,则默认表单提交到本页 |
method |
此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法.语法为method=(get|post) |
例子:
<form method="post" action="result.html"> <p>名字:<input name="name" type="text"/></p> <p>密码:<input name="pass" type="password"/></p> <p> <input type="subimit" name="Button" value="提交"/> <input type="reset" name="Reset" value="重填:/> </p> </form>
3.表单元素及其格式
<input>元素的常用属性
| 属性 | 说明 |
| type | 此属性指定表单元素的类型.可用的类型有text,password,checkbox,radio,submit,reset,file,email,number,url,hidden,image和button.默认为text |
| name | 此属性指定表单元素的名称,例如,如果表单上有几个文本框,可以按名称来识别它们,如username,phone等 |
| value | 此属性是可选属性,他指定表单元的初始值,如果type位radio类型,则必须指定一个值 |
| size | 此属性指定表单元素的初始宽度.如果type位text或password类型,则表单元素的大小以字符为单位.对于其他输入类型,宽度以像素为单位 |
| maxlength | 此属性用于指定可在text或password元素中输入的最大字符数.默认值为无限大 |
| checked | 此属性用于指定按钮是否是被选中的.当输入类型为radio或checkbox时,使用此属性 |
1)文本框
在表单中最常用,最常见的表单输入元素就是文本框(text),它用于输入单行文本信息,如用户名的输入文本框.
2)密码框
在一些特殊情况下,用户希望输入的数据被处理,以免被他人得到,如密码,这时候使用文本框就无法满足要求,需要使用密码框来完成
3)单选按钮
单选按钮控件用于一组相互排斥的值,组中的每个单选按钮控件应具有相同的名称,用户一次只能选中一个单选按钮.
4.文本框
用于输入单行文本信息将表单元素type设为text就可以了 <p> <input type=" text"/> </p>
5.密码框
设置了type属性后在密码框输入的字符全都是以黑色实心的来显示，从而实现对数据的处理 <input type="password"/> 单选按钮 用户只能选中一个单选按钮在使用单选按钮时，需要一个显示的value属性 如果需要一个默认的选项即可以，使用checked 属性 <input name="a" type="radio"value="男" checked/>男 <input name="a" type="radio"value="女"/>女
6.复选框
复选框和单选框类似，复选框允许拥有多个选型 <input name="a" type="CheckBox"value="男" checked/>男 <input name="a" type=CheckBox"value="女"/>女
7.列表框
列表框目的主要是使用户快速方便的选择一些选项而且节省空间 <select> <option value="1">1<option/> <option value="2" selected>2<option/> <option value="3">3<option/> </select>月
8.按钮
按钮分为三个（button）普通按钮（submit）提交按钮（reset）重置按钮 name表示给按钮命名value 显示按钮上的字 <input name="a" type="button"value="男" >男
普通按钮 <input name="a" type="submit"value="女"/>女
提交按钮 <input name="a" type="reset"value="女"/>女
重置按钮 使用图片按钮 <input name="a" type="image"src ="地址"/>提交
9.多行文本域
语法 <textarea name="textarea"cols="显示列数"row="显示行数" 文件域 文件域的作用用于实现文件选择将type设置为file <input type="file"name=“type”/> <input type="submit"anme="upload"value="上传"/> 邮箱 与以上的表单元素不同的是email在提交表单是在自动验证如果不是一个有效的邮箱地址则用户不允许提交订单 <input type="email" name="email"/> url 用于输入URL地址这类的特殊文本的文本框提交表单时如果输入不是uil地址格式的文本，将不允许提交表单 <input type="url" name="22"></input>
10.数字
number 用于提供数字的文本框我们可以对数字进行控制包括最大值，最小值合法的间隔或默认，如果所输入的数字不在限定的范围之内， 则会出现错误提示。
<input type="number"name="num"min="0" max="100"step="10"/>
属性 值 描述
value number 规定的默认值 min
number 规定允许的最小值 max
number 规定允许的最大值 step
number 规定合法数字间隔（如step="2",则合法数是-2 0、2、4等）
11.滑块
用于提供数字的文本框我们可以对数字进行控制包括最大值，最小值合法的间隔或默认，如果所输入的数字不在限定的范围之内， 则会出现错误提示。 <input type="range"name="num"min="0" max="100"step="10"/>
属性 值 描述
value number 规定的默认值 min
number 规定允许的最小值 max
number 规定允许的最大值 step
number 规定合法数字间隔（如step="2",则合法数是-2 0、2、4等）
12.搜索框
search用于提供输入搜索关键字的文本框虽然外观看起来和input差不多但实现起来却不容易因为search搜索不只是谷歌和百度是任意一个搜索框 <input type="search" name="1"/> <input type="submit" name="2"/>
13.表单的隐藏域
将type属性设置为hidden隐藏类型即可创建一个隐藏域 <input type="hidden" value="666"name=""username/>
14.表单的只读与禁用
只读场景 网站服务器方不希望用户修改数据，这些数据在表单元素中显示。如注册或交易协议 禁用场景 只有满足某个条件后才能选用某项功能。如只用用户同意了才能点击注册按钮。 <input type="text"value="张三"readonly/>只读 <input type="text"value="张三"disabled/> 规范 对于布尔类型的属性，属性值可以省略
15.表单元素的标注
使用foe属性来指定当鼠标点击脚本时，焦点对应的表单元素 语法 <lable for="male>表单元素的id">标注的文本<lable> <input type="text" name="1"id="male"/>
16.表单的验证
验证表单的好处
1 减轻服务器的压力
2保证数据的可行性和安全性 在客户端对表单进行验证是非常有必要的
17.表单的初级验证
1 .placeholder 用于input的文本框的一种提示（hint）可以描述文本框期待用户输入任何内容 <input type="search" name="1"placeholder="要输入的关键字"/>
2.required 属性用于规定文本框填写内容不能为空，否则不允许用户提交表单 <input type="text" required/>
3. pattern 用于验证input类型文本框用户输入内容与自定义的正表达式相匹配