第3章 表单
本章简介:表单是实现用户与网页之间信息交互的基础,通过在网页中添加表单可以实现如会员注册,用户登录,提交资料等交互功能。
一.表单概述
通俗地讲,表单就是一个将用户信息组织起来的容器。将需要用户填写的内容防止在表单容器中,当用户单击“提交”按钮的时候,表单会将数据统一发送给服务器。
1.表单的内容
创建表单后,就可以在表单中放置控件以接收用户的输入。这些控件通常放在<form>...</form>标签对之间,也可以在表单之外用来创建用户界面。
2.表单标签及其表单属性
action:此属性指示服务器上处理表单输出的程序。若为空,则默认提交到本页。
method:此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法。method=(get|post)
post和get的区别:
(1)post方法提交方式不会改变地址栏状态,表单数据不会被显示。
(2)使用get方法提交方式,地址栏状态会发生变化,表单数据会在URL信息中显示。
3.表单元素及其格式
装载数据的控件就称为表单元素。
向表单中添加表单元素要用<input>标签
常用属性:
type:指定表单元素的类型,默认为text。
name:指定表单元素的名称。
value:是可选属性,指定表单元素的初始值。
size:指定表单元素的出事宽度。若为text或password类型,则表单元素的大小以字符为单位,否则以像素为单位。
maxlength:指定可在text或password元素中输入的最大字符数。
checked:指定按钮是否被选中,当输入类型为radio或checkbox时,使用此属性。
(1)文本框:
size属性用于指定文本框的长度,而maxlength属性用于指定文本框输入的数据长度。
(2)密码框:
密码框仅仅是周围的人看不见输入的符号,不能保证输入的数据安全。为了使数据安全,应该是加强人为管理,采用数据加密技术。
(3)单选按钮:
用于一组相互排斥的值,组中的每个单选按钮控件应具有相同的名称,用户一次只能选一个单选按钮。
(4)复选框:
一旦用户选中了某个复选框,在表单提交时,会将该复选框的name值和对应的value值一起提交。通常情况下,如果选项之间是并列关系,就需要设置为相同的名称,以便能
够同时获取,否则,每个选项都需要单独进行读取,从而降低了效率。
(5)列表框:
<select>标签用于显示可供用户选择的列表框,每个列表框由一个<option>标签表示,<select>标签必须至少包含一个<option>标签。
selected属性表示该选项在默认情况下是被选中的,而且一个列表框中只能有一个列表项默认被选中。默认selected为true。
(6)按钮:
HTML5中按钮分为三种:普通按钮(button),提交按钮(submit),重置按钮(reset)。
name用来给按钮命名,value用来设置显示在按钮上的文字。
普通按钮主要用来响应onclick事件:<input type="button" name="butButton" value="button按钮" οnclick="alert(this,value)"/>
当用户单击该按钮时,将会显示该按钮的value值。
(图片按钮:<input type="image" src="image/login.gif/>虽然type属性没有设置为submit,但仍然具备提交功能。)
(7)多行文本域:
<textarea name="textarea" cols="显示的列数" rows="显示的行数">
文本内容
</textarea>
(8)文件域:
作用是用于实现文件的选择,在应用是只需把type属性设置为file即可,在实际应用中常用于文件上传的操作。
<form action="" method="post" enctype="multipart/form-date">表示将表单数据分为多部分提交。
文件域在不同的浏览器中显示效果不一样,但是功能是一样的。若想相同,需用CSS。
(9)邮箱:
email在提交表单时会自动验证email文本框的值。(@后没符号,@前无逗号...)
(10)网址:
网址前不能漏掉协议类型。(http:https:ftp:)
(11)数字:
number类型的input元素提供用于输入数字的文本框
<input type="number" name="num" min="0" max="100" step="10"/>输入的数得是step(规定合法的数字间隔)值的倍数。
(12)滑块:
range类型的input元素提供用于输入包含一定范围内的数字值的文本框。
<input type="range" name="range1" min="0" max="10" step="2"/>
不支持的浏览器会显示普通的纯文本框,就当作text来处理。
(13)搜索框:
search类型提供的搜索框是任意页面的一个搜索框。
二.表单的高级应用
1.设置表单的隐藏域
<input type="hidden" value="666" name="userid"/>
2.表单的只读与禁用设置
readonly / disabled
W3C HTML5标准中,规定对于布尔类型的属性,属性值可以省略。
3.表单元素的标注
目的是增强鼠标的可用性
<label for="表单元素的id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
对于表单元素而言,其name属性与id属性都是必须的。name属性由表单负责处理,而id属性是给<label>标签和表单元素进行关联使用的。
三.表单的初级验证
1.为什么要进行表单验证
(1)减轻服务器的压力
(2)保证数据的可行性和安全性
2.表单初级验证的方法
(1)placeholder
为input类型的文本框提供一种提示(hint),描述文本框期待用户输入何种内容。
(2)required
规定文本框填写内容不能为空,否则不允许用户提交表单。
(3)pattern
验证input类型文本框中用户输入的内容是否与自定义的正则表达式想匹配。
本章简介:表单是实现用户与网页之间信息交互的基础,通过在网页中添加表单可以实现如会员注册,用户登录,提交资料等交互功能。
一.表单概述
通俗地讲,表单就是一个将用户信息组织起来的容器。将需要用户填写的内容防止在表单容器中,当用户单击“提交”按钮的时候,表单会将数据统一发送给服务器。
1.表单的内容
创建表单后,就可以在表单中放置控件以接收用户的输入。这些控件通常放在<form>...</form>标签对之间,也可以在表单之外用来创建用户界面。
2.表单标签及其表单属性
action:此属性指示服务器上处理表单输出的程序。若为空,则默认提交到本页。
method:此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法。method=(get|post)
post和get的区别:
(1)post方法提交方式不会改变地址栏状态,表单数据不会被显示。
(2)使用get方法提交方式,地址栏状态会发生变化,表单数据会在URL信息中显示。
3.表单元素及其格式
装载数据的控件就称为表单元素。
向表单中添加表单元素要用<input>标签
常用属性:
type:指定表单元素的类型,默认为text。
name:指定表单元素的名称。
value:是可选属性,指定表单元素的初始值。
size:指定表单元素的出事宽度。若为text或password类型,则表单元素的大小以字符为单位,否则以像素为单位。
maxlength:指定可在text或password元素中输入的最大字符数。
checked:指定按钮是否被选中,当输入类型为radio或checkbox时,使用此属性。
(1)文本框:
size属性用于指定文本框的长度,而maxlength属性用于指定文本框输入的数据长度。
(2)密码框:
密码框仅仅是周围的人看不见输入的符号,不能保证输入的数据安全。为了使数据安全,应该是加强人为管理,采用数据加密技术。
(3)单选按钮:
用于一组相互排斥的值,组中的每个单选按钮控件应具有相同的名称,用户一次只能选一个单选按钮。
(4)复选框:
一旦用户选中了某个复选框,在表单提交时,会将该复选框的name值和对应的value值一起提交。通常情况下,如果选项之间是并列关系,就需要设置为相同的名称,以便能
够同时获取,否则,每个选项都需要单独进行读取,从而降低了效率。
(5)列表框:
<select>标签用于显示可供用户选择的列表框,每个列表框由一个<option>标签表示,<select>标签必须至少包含一个<option>标签。
selected属性表示该选项在默认情况下是被选中的,而且一个列表框中只能有一个列表项默认被选中。默认selected为true。
(6)按钮:
HTML5中按钮分为三种:普通按钮(button),提交按钮(submit),重置按钮(reset)。
name用来给按钮命名,value用来设置显示在按钮上的文字。
普通按钮主要用来响应onclick事件:<input type="button" name="butButton" value="button按钮" οnclick="alert(this,value)"/>
当用户单击该按钮时,将会显示该按钮的value值。
(图片按钮:<input type="image" src="image/login.gif/>虽然type属性没有设置为submit,但仍然具备提交功能。)
(7)多行文本域:
<textarea name="textarea" cols="显示的列数" rows="显示的行数">
文本内容
</textarea>
(8)文件域:
作用是用于实现文件的选择,在应用是只需把type属性设置为file即可,在实际应用中常用于文件上传的操作。
<form action="" method="post" enctype="multipart/form-date">表示将表单数据分为多部分提交。
文件域在不同的浏览器中显示效果不一样,但是功能是一样的。若想相同,需用CSS。
(9)邮箱:
email在提交表单时会自动验证email文本框的值。(@后没符号,@前无逗号...)
(10)网址:
网址前不能漏掉协议类型。(http:https:ftp:)
(11)数字:
number类型的input元素提供用于输入数字的文本框
<input type="number" name="num" min="0" max="100" step="10"/>输入的数得是step(规定合法的数字间隔)值的倍数。
(12)滑块:
range类型的input元素提供用于输入包含一定范围内的数字值的文本框。
<input type="range" name="range1" min="0" max="10" step="2"/>
不支持的浏览器会显示普通的纯文本框,就当作text来处理。
(13)搜索框:
search类型提供的搜索框是任意页面的一个搜索框。
二.表单的高级应用
1.设置表单的隐藏域
<input type="hidden" value="666" name="userid"/>
2.表单的只读与禁用设置
readonly / disabled
W3C HTML5标准中,规定对于布尔类型的属性,属性值可以省略。
3.表单元素的标注
目的是增强鼠标的可用性
<label for="表单元素的id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
对于表单元素而言,其name属性与id属性都是必须的。name属性由表单负责处理,而id属性是给<label>标签和表单元素进行关联使用的。
三.表单的初级验证
1.为什么要进行表单验证
(1)减轻服务器的压力
(2)保证数据的可行性和安全性
2.表单初级验证的方法
(1)placeholder
为input类型的文本框提供一种提示(hint),描述文本框期待用户输入何种内容。
(2)required
规定文本框填写内容不能为空,否则不允许用户提交表单。
(3)pattern
验证input类型文本框中用户输入的内容是否与自定义的正则表达式想匹配。