第六课时:表单的应用
2.6.1 表单的构成
一个简单的 HTML 表单界面由 表单控件(也称表单元素)、提示信息 和 表单域 3部分构成
- 表单控件:包含了具体的表单功能项,如:单行文本输入框、密码输入框、复选框、提交按钮 和 搜索框 等
- 提示信息:一个表单中通常需要包含一些说明性的文字,提示用户进行填写和操作
- 表单域:相当于一个容器,用来容纳所有的表单控件和提示 信息,可以通过它 定义、处理表单数据所用程序的 url 地址 及 数据提交到服务器的方法。如果不定义表单域,数据将无法提交到服务器后台
语法格式:
<from action="url地址" method="提交方式" name="表单名称">
表单控件
</from>
2.6.2 表单的属性
表单拥有多个属性,通过设置表单属性可以实现提交方式、自动完成、表单验证 等不同的表单功能
-
action 属性
action 属性 用于指定接收并处理表单数据的服务器程序的 URL 地址
- action 的属性值可以是 相对路径 或绝对路径,也可以是 接收数据的 E-mail 邮箱地址
<from action="action.asp"> </from>
-
method 属性
method 属性 用于设置表单数据的提交方式,其取值为 get 或 post
- post 的提交方式:post 方法提交的数据不会显示在浏览器的地址栏中,保密性好,并且无数据量的限制
- 首先将数据
- get 的提交方式:get 方法提交的数据将显示在浏览器的地址栏中,保密性差,且有数据量的限制
<from action="action.asp" mothod="post"> </from>
-
name 属性
name 属性 用于指定表单的名称,以区分同一个页面中的多个表单
<from action="action.asp" mothod="post" name="User"> </from>
-
autocomplete 属性
autocomplete 属性 用于指定表单是否有自动完成功能。
- 自动完成:将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一个下拉列表里,以实现自动完成输入(类似于记住账号密码)
属性值 说明 on 表单有自动完成功能 off 表单没有自动完成功能 <from action="action.asp" mothod="post" name="User" autocomplete="on"> </from>
-
novalidate 属性
novalidate 属性 用于指定在提交表单时取消对表单进行有效的检查
- 对表单设置该属性时,可以关闭整个表单的验证,这样可以使 from 内的所有表单控件不被验证
属性值 说明 true 取消表单验证 false 使用表单验证 <from action="action.asp" mothod="post" name="User" autocomplete="on" novalidate="true"> </from>
2.6.3 input 元素及属性
input 元素 是表单中最常见的元素,网页中常见的 单行文本框、单选按钮、复选框 等都是通过它定义的
对于浏览器不支持的 input 类型,将会在网页中显示为一个普通输入框
input 元素的 type 属性
-
单行文本输入框 text
一般用于输入简短的信息,如:用户名、账号、证件号码 等
<input type="text" />
-
密码输入框 password
用于输入密码,其内容以圆点的形式显示
<input type="password" />
-
单选按钮 radio
用于单项选择,如:性别、是否操作 等。
注意:在定义单选按钮时,必须为同一组中的选项指定相同的 name 值,这样单选才会生效。另外,可以对单选按钮应用 checked 属性,指定默认选中项
<input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女
-
复选框 checkbox
用于多项选择,如:选择兴趣、爱好 等。另外,可对其应用 checked 属性,指定默认选中项
<input type="checkbox" /> 香蕉 <input type="checkbox" /> 苹果 <input type="checkbox" /> 菠萝
-
普通按钮 button
普通按钮常常配合 Javascript 脚本语言使用
<input type="button" />
-
提交按钮 submit
表单的核心控件,可对其应用 value 属性,改变提交按钮上的默认文本
<input type="submit" value="登录"/>
-
重置按钮 reset
单击取消已输入的所有表单信息,可对其应用 value 属性,改变提交按钮上的默认文本
<input type="reset" value="重置" />
-
图像形式的提交按钮 images
更加美观,必须为其定义 src 属性指定图像的 url 地址
<input type="images" src="images/logo.jpg" />
-
隐藏域 hidden
对于用户不可见,通常用于后台的程序
<input type="hidden" />
-
文件域 file
用户可通过 填写文件路径 或 直接选择文件 进行提交
<input type="file" />
-
E-mail 地址的输入域 email
input 元素 中一种专门用于输入 E-mail 地址的文本输入框,用来验证 email 输入框的内容是否符合 E-mail 邮件地址格式,如果不符合,将提示相应的错误信息
<input type="email" />
-
url 地址的输入域 url
用于输入 URL 地址 的文本框。如果输入的是 URL 地址,则提交给服务器,反之提示错误信息
<input type="url" name="user_url"/>
-
数值的输入域 number
在提交表单时,会自动检查该输入框中的内容是否为数字,如果输入的内容不是数字或数字不在限定范围内,则会出现错误提示
number 类型的输入框可以对输入的数字进行限制。
- value:指定输入框的默认值
- max:指定输入框可以接受的最大输入值
- min:指定输入框可以接受的最小输入值
- step:输入域合法的间隔,如果不设置,默认值为 1
<input type="number" name="number1" value="1" min="1" max="20" step="4" />
-
电话号码输入类型 tel
用于提供输入电话号码的文本框。由于电话号码的格式千差万别,因此,tel 类型通常会和 pattern 属性配合使用
<input type="tel" />
-
搜索域 search
search 类型是一种专门用于输入搜索关键词的文本框,它能渣滓洞记录一些字符,如站点搜索 或 Google搜索。用户输入内容后,其右侧会附带一个删除图标,单击这个图标按钮会快速清除内容
<input type="search" name="searchinfo" />
-
颜色输入类型 color
提供颜色的文本框,用于实现 RGB 颜色输入,默认值为 #000,通过 value 属性值可以更改默认颜色,也可以单击打开拾色器面板进行更改
<input type="color" />
-
一定范围内数字值的输入域 range
range 类型的 input 元素 用于提供一定范围内数值的输入范围,在网页中显示为滑动条
常用属性与 number 类型一样,通过 min 属性 和 max 属性,可以设置 最小值 和 最大值
<input type="range" />
-
日期和时间的输入类型 Date pickers(date,mouth,week,time,datetime,datetime-local)
时间和日期类型 说明 date 选取 日、月、年 month 选取 月、年 week 选取 周 和 年 time 选取时间(小时和分钟) datetime 选取时间、日、月、年(UTC时间) datetime-local 选取时间、日、月、年(本地时间) <input type="Date" />
input 元素的其他属性
-
form 属性
HTML5 中 的 from 属性,可以把表单内的子元素写在页面中的任一位置,只需要为该元素指定 form 属性并设置属性值为该表单的 id 即可
此外,form 属性还允许规定一个表单控件隶属于多个表单
form 属性适用于所有的 input 输入类型,使用时只需要引用所属表单的 id 即可
<body> <form action="#" method="post" id="user_from"> 请输入您的名字:<input type="text" name="name" /> <p> 这是一段话 </p> </form> 请输入您的昵称:<input type="text" name="username" form="user_form" /> <!-- 指定该元素form属性的id值 --> </body> <!-- 三个元素内容都会被提交到 user_form 的表单中 -->
-
autofocus 属性
页面加载完成后 是否会自动获取光标焦点,以便输入关键词
<body> <form action="#" method="post" id="user_from"> 请输入搜索关键词:<input type="text" name="name" autocomplete="off" autofocus="autofocus" /> <input type="submit" value="提交" /> </form> </body> <!-- autocomplete="off" 没有自动完成功能,会获取光标焦点在文本框上 -->
-
list 属性
list 属性用于指定输入框所板顶的 datalist 元素,其值是某个 datalist 元素的 id
<form action="#" method="post" id="webfrom"> <input type="url" list="url_list" name="weburl" /> <!--绑定 datalist 的 id 属性,实现数据列表下拉效果--> <datalist id="url_list" > <option label="百度" value="http://www.baidu.com"></option> <option label="谷歌" value="http://www.google.com"></option> </datalist> <input type="submit" value="提交" /> </form> <!-- 绑定 datalist 的 id 属性,实现数据列表下拉效果 -->
datalist 数据列表下拉效果
<datalist id="要绑定的此下拉数据的 input元素 的 list属性" > <option label="百度" value="http://www.baidu.com"></option> <option label="谷歌" value="http://www.google.com"></option> </datalist>
-
multiple 属性
指定输入框是否可以选择多个值,该属性适用于 email 和 file 类型的 input 元素。
-
如果选择的是邮箱,多个地址之间通过英文状态下的逗号隔开
-
如果选择的是文件,按住 Ctrl 进行多选
<body> <form action="#" method="post" id="email_from"> 邮箱:<input type="email" name="email" multiple="multiple" /> 多个地址之间通过 "," 隔开 </form> </body> <!-- 123546@163.com, 123546@163.com 多个地址之间通过英文状态下的逗号隔开 -->
-
-
min、max 和 step 属性
用于包含数字或日期的 input 输入类型规定限值,也就是给这些类型的输入框加一个数值约束
适用于 date、pickers、number 和 range 标签
max:规定输入框所允许的最大输入值
min:规定输入框所允许的最小输入值
step:为输入框规定合法的数字间隔,如果不设置,默认为 1
<input type="number" name="number1" value="1" min="1" max="20" step="4" />
-
pattern 属性
用于验证 input 类型输入框中,用户输入的内容是否与所定义的正则表达式相匹配
适用于的类型有:text、search、url、tel、email 和 password 的 input 标记
常用的正则表达式 说明 ^[0-9]*$
数字 ^/d{n}$
n 位的数字 ^/d{n,}$
至少 n 位的数字 ^/d{m,n}$
m-n 位的数字 ^(0|[1-9][0-9]*)$
零和非零开头的数字 ^([1-9][0-9]$)+(.[0-9]{1,2})?$
非零开头的最多带两位小数的数字 ^(\-|\+)?\d+(\.\d+)?$
正数、负数和小数 ^\d+$
或^[1-9\d*|0$]
非负整数 -[1-9]\d*|0$
或((-\d+)|(0+))$
非正整数 ^[\u4e00-\u9fa5]{0,}$
汉字 ^[A-Za-z0-9]+$
或[A-Za-z0-9]{4,40}$
英文和数字 ^[A-Za-z]+$
由 26 个英文字母组成的字符串 [A-Za-z0-9]+$
由数字和 26 个英文字母组成的字符串 ^\w+$
或^\w{3,20}$
由 数字、26 个英文字母 或者下划线组成的字符串 ^[\u4E00-\u9FAF5-Za-z0-9_]+$
中文、英文、数字包括下划线 ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
E-mail 地址 [a-zA-]+://[^\s]*
或^http://([\w-]+\.)+[\w-]+(/[w-./?%&=]*)?$
URL 地址 ^\d{15}|\d{18}$
身份证号(15位、18位数字) ^([0-9]){7,18}(x|X)?$
或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
以数字、字母x结尾的短身份证号码 ^[a-zA-Z][a-zA-Z0-9_]{4,15}$
账号是否合法(字母开头,允许5~16字节,允许字母数字下划线) ^[a-zA-Z]\w{5,17}$
密码(以字母开头,长度为6~18,只能包含字母、数字和下划线) <body> <form action="#" method="post" id="email_from"> 密码:<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" /> </form> </body> <!-- 以字母开头,长度为6~18,只能包含字母、数字和下划线 -->
-
placeholder 属性
placeholder 属性 用于 input 类型的输入框提供相关提示信息。在输入框为空时显示出现,而当输入框获得光标焦点时则会消失
适用于 type 属性值为 text、search、url、tel、email 及 password 的 input 标记
<body> <form action="#" method="post" id="number_from"> <input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入 6 位数的邮政编码" /> </form> </body>
-
required 属性
HTML5 中的输入类型,不会自动判断用户是否在输入框中输入了内容
如果开发者要求输入框中的内容是必填,那么需要 input 元素指定 required 属性,required 属性 用于规定输入框填写的内容不能为空,否则不允许用户提交表单
<body> <form action="#" method="post" id="number_from"> 请输入邮箱:<input type="email" name="myemail" required="required" /> </form> </body>
-
其他常用属性
属性 属性值 说明 代码块 name 由用户自定义 控件的名称 <input type="text" name="user" />
value 由用户自定义 input 控件中的默认文本值 <input type="submit" value="登录"/>
size 正整数 input 控件在页面中的显示宽度 <input type="text" size="20" />
readonly readonly 该控件内容为只读(不能编写修改) <input type="text" readonly="readonly" />
disabled disabled 第一次加载页面时禁用该控件(显示为灰色) <input type="text" disabled="disabled" />
checked checked 定义选择控件默认被选中的项 <input type="text" checked="checked"/>
maxlenght 正整数 控件允许输入的最多字符 <input type="text" maxlenght="18" />