认识表单
1.表单的构成
在网页中,一个完整的表单通常由表单控件(也称表单元素)、提示信息和表单域3个部分构成。具体解释如下:
- 表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮等。
- 提示信息:一个表单通常带有说明性文字,提示用户进行填写和操作。
- 表单域:相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义、处理表单数据所用程序的URL地址及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法显示到后台服务器。
2.创建表单
在HTML5中,<form></form>标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递。<form></form>中的所有内容都会被提交给服务器。创建表单语法格式如下:
<form action="URL地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
表单控件是由用户定义的。
下面通过一个案例来演示表单的控件:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建表单</title> </head> <body> <form action="http://www.mysite.cn/index.asp" method="POST"> <!--表单域--> 账号: <!--提示信息--> <input type="text" name="zhanghao"/> <!--表单控件--> 密码: <!--提示信息--> <input type="password" name="mima"/> <!--表单控件--> <input type="submit" value="提交"/> <!--表单控件--> </form> </body> </html>
运行效果如图所示:
表单的属性
1.action属性
在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的URL地址。例如:
<form action=“form_action.asp”>
上面的代码表示,当提交表单时,表单数据会传送到名为“form_action.asp”的页面去处理。
action的属性值可以是相对路径或绝对路径,还可以为接收数据的E-mail邮箱地址。例如:
<form action=mailto:htmlcss@163.com>
上面的代码表示,当提交表单时,表单数据会以电子邮件的形式传递出去。
2.method属性
method属性用于设置表单数据的提交方式,其取值为get或post。在HTML5中,可以通过<form>标记的method属性指明表单处理服务器的方法,示例代码如下:
<form action=“form_action.asp” method=“get”>
在上面的代码中,get为method属性的默认值,采用get方法,浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据。
采用get方法提交的数据将显示在浏览器的地址栏中,保密性差,且有数据量的限制;而post方式的保密性好,并且无数据量的限制,所以使用method=“post”可以大量地提交数据。
3.name属性
name属性用于指定表单的名称,以区分同一个页面中的多个表单。
4.autocomplete属性
autocomplete属性用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一个下拉列表里,以实现自动完成输入的功能。
autocomplete属性有2个值,对它们的解释如下:
- on:表单有自动完成功能。
- off:表单无自动完成功能。
下面为页面中的<form>标记指定autocomplete属性,并将该属性的值指定为on:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>autocomplete属性的使用</title> </head> <body> <form id="formBox" autocomplete="on"> 用户名:<input type="text" id="autofirst" name="autofirst"/><br /><br /> 昵 称:<input type="text" id="autosecond" name="autosecond"/><br /><br /> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
5.novalidate属性
novalidate属性指定在提交表单时取消对表单进行有效的检查。为表单设置该属性的值为“true”时,可以关闭整个表单的验证,即使<form>标记内的所有表单控件不被验证。
下面通过一个案例来演示novalidate属性的用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>novalidate属性的使用</title> </head> <body> <form action="form_action.asp" method="GET" novalidate="true"> 请输入电子邮件:<input type="email" name="user_email"/> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
input元素及属性
1.input属性的type属性
在HTML5中,input元素拥有多个type属性值,用于定义不同的控件类型。下面对不同的input控件进行讲解:
(1)单行文本输入框<input type=“text”/>
单行文本输入框常用来输入简短的信息,如用户名、账号、证件号码等,常用的属性有name、value、maxlength。
(2)密码输入框<input type=“password”/>
其内容默认以圆点的形式进行显示。
(3)单选按钮<input type=“radio”/>
用于单项选择,如选择性别、是否操作等。在定义单选按钮时,必须为同一组中的选项指定相同的name值,这样“单选”才会生效。此外,可对单选按钮应用checked属性,指定默认选中项。
(4)复选框<input type=“checkbox”/>
用于多项选择。可对多选按钮应用checked属性,指定默认选中项。
(5)普通按钮<input type=“button”/>
常常配合JavaScript脚本语言使用。
(6)提交按钮<input type=“submit”/>
表单中的核心控件,对其应用value可更改按钮上的默认文本。
(7)重置按钮<input type=“reset”/>
当用户信息输入错误时,可单击重置按钮取消已输入的所有表单信息。
(8)图片形式的按钮<input type=“image”/>
必须为其定义src属性指定的URL地址。
(9)隐藏域<input type=“hidden”/>
用户不可见,后台的程序。
(10)文件域<input type=“file”/>
当定义文件域时,页面中将出现一个文本框和一个“浏览”按钮,用户可以通过填写文件路径或直接选择文件的方式,将文件提交给后台服务器。
下面通过一个案例来对以上介绍进行演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>input控件</title> </head> <body> <form action="#" method="POST"> 用户名: <!--text单行文本输入框--> <input type="text" value="张三" maxlength="6"/><br /><br /> 密码: <!--password密码输入框--> <input type="password" size="40"/><br /><br /> 性别: <!--单选按钮--> <input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex" />女<br /><br /> 兴趣: <!--checkbox复选框--> <input type="checkbox"/>唱歌 <input type="checkbox"/>跳舞 <input type="checkbox"/>游泳<br /><br /> 上传头像: <input type="file"/><br /><br /> <!--file文件域--> <input type="submit"/> <!--submit按钮--> <input type="reset"/> <!--reset重置按钮--> <input type="button" value="普通按钮"/> <!--button普通按钮--> <input type="hidden"/> <!--hidden隐藏域--> </form> </body> </html>
运行效果如图所示:
(11)E-mail类型<input type=“email”/>
E-mail类型的input元素是一种专门用于输入E-mail地址的文本输入框,用来验证E-mail输入框的内容是否符合E-mail邮件地址格式;如果不符合,将提示相应的错误信息。
(12)URL类型<input type=“url”/>
URL类型的input元素是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本框,则会提交数据到服务器;如果输入的值不符合URL地址格式,则不允许提交,并且会有提示信息。
(13)tel类型<input type=“tel”/>
用于提供输入电话号码的文本框,tel类型通常会和pattern属性配合使用。
(14)search类型<input type=“search”/>
用于输入搜索关键词的文本框,它能自动记录一些字符,在用户输入内容后,其右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容。
(15)color类型<input type=“color”/>
用于提供设置颜色的文本框,用于实现一个RGB颜色输入。默认值为#000000,通过value可更改默认颜色。单击颜色类型文本框,可以快速打开拾色器面板,方便用户可视地选取一种颜色。
下面通过一个案例来演示不同文本框的用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>input类型</title> </head> <body> <form action="#" method="GET"> 请输入您的邮箱:<input type="email" name="formmail"/><br /> 请输入个人网址:<input type="url" name="user_url"/><br /> 请输入电话号码:<input type="tel" name="telphone" pattern="^\d{11}$"/><br /> 输入搜索关键词:<input type="search" name="searchinfo"/><br /> 请选取一种颜色:<input type="color" name="color1"/> <input type="color" name="color2" value="#ff3e96"/> <input type="submit" value="提交"/><br /> </form> </body> </html>
运行效果如图所示:
(16)number类型<input type=“number”/>
用于提供输入数值的文本框。在提交表单时,系统会自动检查该输入框中的内容是否为数字。输入框可以对输入的数值进行限制,规定允许的最大值和最小值、合法的数字间隔或默认值等,具体属性说明如下:
- value:指定输入框的默认值。
- max:指定输入框的可以接受的最大的输入值。
- min:指定输入框的可以接受的最小的输入值。
- step:输入域合法的间隔,如果不设置,默认值是1.
下面通过一个案例对number类型进行演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>number类型</title> </head> <body> <form action="#" method="GET"> 请输入数值:<input type="number" name="number1" value="1" min="1" max="20" step="4"/><br /> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
(17)range类型<input type=“range”/>
用于提供数值的输入范围,在网页中显示为滑动条。
(18)Date Pickers类型<input type=“date,month,week…”/>
Date Pickers类型是指时间日期类型。
时间和日期类型 | 说明 |
date | 选取日、月、年 |
month | 选取月、年 |
week | 选取周和年 |
time | 选取时间(小时和分钟) |
datetime | 选取时间、日、月、年(UTC时间) |
datetime-local | 选取时间、日、月、年(本地时间) |
下面通过一个案例对时间日期类型进行演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时间日期类型</title> </head> <body> <form action="#" method="GET"> <input type="date"/> <input type="month"/> <input type="week"/> <input type="time"/> <input type="datetime"/> <input type="datetime-local"/> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
2.input元素的其他属性
autofocus属性
用于指定页面加载后是否自动获取焦点。
下面通过一个案例来演示autofocus属性的使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>autofocus元素的使用</title> </head> <body> <form accept="#" method="GET"> 请输入搜索关键词:<input type="text" name="user_name" autofocus="off" autofocus="autofpcus"/><br /> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
form属性
可以把表单内的子元素写在代码中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。此外,form属性还允许规定一个表单控件从属于多个表单。
下面通过一个案例来演示form属性的使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form元素的使用</title> </head> <body> <form accept="#" method="GET" id="user_name"> 请输入您的姓名:<input type="text" name="first_name"/> <input type="submit" value="提交"/> </form> <p>下面的输入框在form元素外,但因为指定了form属性为表单的id,所以该输入框仍然属于表单的一部分。</p> 请输入您的昵称:<input type="text" name="last_name" form="user_form"/><br /> </body> </html>
运行效果如图所示:
list属性
用于设置数据列表,它可以指定输入框所绑定的datalist元素。list属性的值是某个datalist元素的id。
下面通过一个案例对list属性进行演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>list元素的使用</title> </head> <body> <form accept="#" method="GET"> 请输入网址:<input type="url" list="url_list" name="weburl"/> <datalist id="url_list"> <option label="新浪" value="http://www.sina.com.cn"></option> <option label="搜狐" value="http://www.sohu.com"></option> <option label="传智" value="http://www.itcast.cn"></option> </datalist> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
multiple属性
multiple属性指定输入框可以选择多个值,该属性适用于E-mail和file类型的input元素。multiple属性用于E-mail类型的input元素时,表示可以向文本框中输入多个E-mail地址,多个地址之间通过英文逗号隔开;multiple属性用于file类型的input元素时,表示可以选择多个文件。
下面通过一个案例对multiple属性进行演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>multiple元素的使用</title> </head> <body> <form accept="#" method="GET"> 电子邮箱:<input type="email" name="myemail" multiple="multiple"/> (如果电子邮箱有多个,请使用逗号分隔)<br /><br /> 上传照片:<input type="file" name="selfile" multiple="multiple"/><br /><br /> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
min、max和step属性
用于包含数字或日期的input类型规定限值,适用于Date、Pickers、number和range类型。
pattern属性
pattern属性用于验证input类型输入框红,用户输入的内容是否与所定义的正则表达式相匹配。适用于text、search、url、tel、E-mail和password的<input/>标记。
下面通过一个案例对pattern属性进行演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pattern属性</title> </head> <body> <form action="#" method="GET"> 帐 号:<input type="text" name="username" pattern="^[a-zA-z] [a-zA-z0-9] {4,15}$"/> (以字母开头,长度为5-16b,允许字母、数字、下划线)<br /> 密 码:<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$"/> (以字母开头,长度为6-18,允许字母、数字、下划线)<br /> 身份证号:<input type="text" name="mycard" pattern="^\d{15}|\d{18$}"/>(15位、18位数字)<br /> E-mail地址:<input type="email" name="myrmail" pattern="^\w+([- + .]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
placeholder属性
用于为input类型的输入框提供相关提示信息,以描述此输入框期待用户输入何种内容。提示信息在输入框为空时显式出现,而当输入框获得焦点时则会消失。
下面通过一个案例对placeholder属性进行演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>placeholder属性</title> </head> <body> <form action="#" method="GET"> 请输入邮政编码:<input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码"/> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
required属性
用于规定输入框填写的内容不能为空,否则不允许用户提交表单。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>required属性</title> </head> <body> <form action="#" method="GET"> 请输入姓名:<input type="text" name="user_name" required="required"/> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
其他表单元素
1.textarea元素
textarea可以创建多行文本输入框。其基本语法格式如下:
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea>
cols与rows为textarea元素的必须属性,其中cols用来定义多行文本输入框每行中的字符数,rows用来定义多行文本输入框显示的行数,它们的取值均为正整数。
textarea元素还有几个可选属性:
属性 | 属性值 | 描述 |
name | 由用户定义 | 控件的名称 |
readonly | readonly | 不能编辑修改 |
disabled | disabled | 加载页面时禁用该控件(显示为灰色) |
下面通过一个案例来演示<textarea>元素的用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>textarea控件</title> </head> <body> <form action="#" method="POST"> 评论:<br /> <textarea cols="60" rows="8"> 评论的时候,请遵纪守法并注意语言文明,多给文档人分享一些支持。 </textarea><br /> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
2.select属性
用于制作下拉菜单效果。其基本语法格式如下:
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> …… </select>
在HTML5中可以为<select>和<option>标记定义属性,具体如表所示:
标记名 | 常用属性 | 描述 |
<select> | size | 指定下拉菜单的可见选项数 |
multiple | 按住Ctrl可同时选多个选择多项 | |
<option> | selected | 默认选中项 |
下面通过一个案例来演示几种不同的下拉菜单效果:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select控件</title> </head> <body> <form action="#" method="POST"> 所在校区:<br /> <select> <!--最基本的下拉菜单--> <option>-请选择-</option> <option>北京</option> <option>上海</option> <option>广州</option> <option>武汉</option> <option>成都</option> </select><br /><br /> 特长(单选):<br /> <select> <option>唱歌</option> <option selected="selected">画画</option> <!--设置为默认选中项--> <option>跳舞</option> </select> 爱好(多选):<br /> <select multiple="multiple" size="4"> <!--设置多选和可见选项数--> <option>读书</option> <option selected="selected">写代码</option> <!--设置为默认选中项--> <option>旅行</option> <option selected="selected">听音乐</option> <!--设置为默认选中项--> <option>跳绳</option> </select><br /><br /> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
下面通过一个案例对下拉菜单中的选项分组进行演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select控件</title> </head> <body> <form action="#" method="POST"> 所在校区:<br /> <select> <!--最基本的下拉菜单--> <optgroup label="北京"> <option>东城区</option> <option>西城区</option> <option>朝阳区</option> <option>海淀区</option> </optgroup> <optgroup label="上海"> <option>浦东新区</option> <option>徐汇区</option> <option>虹口区</option> </optgroup> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
3.datalist元素
用于定义输入框的选项列表,列表通过datalist内的option元素进行创建。如果用户不希望从列表中选择某项,也可以自行输入其他内容。
下面通过一个案例来演示datalist元素的使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>datalist控件</title> </head> <body> <form action="#" method="POST"> 请输入用户名:<input type="text" list="namelist"/> <datalist id="namelist"> <option>admin</option> <option>lucy</option> <option>lily</option> </datalist> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
4.Keygen元素
用于设置表单的密钥生成器,当用户提交表单时会生成2个键:一个是私钥,它存储在客户端;另一个是公钥,它被发送到服务器,验证用户的客户端证书。
keygen元素常用的属性:
属性 | 说明 |
autofocus | 使用keygen字段在页面加载时获得焦点 |
challenge | 将keygen的值设置为在提交时询问 |
disabled | 禁用keygen字段 |
form | 定义该keygen字段所属的一个或多个表单 |
keytype | rsa用于生成RSA密钥 |
name | 定义keygen元素的唯一名称,用于在用户提交表单时搜集字段的值 |
下面通过一个案例来演示keygen的用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>datalist控件</title> </head> <body> <form action="#" method="GET"> 请输入用户名:<input type="text" name="user_name"/><br /> 请选择加密强度: <keygen name="security"/><br /> <input type="submit" value="提交"/> </form> </body> </html>
运行效果如图所示:
5.output元素
用于不同类型的输出,可以在浏览器中显示计算结果或脚本输出。其常用属性有三个:
属性 | 说明 |
for | 定义输出域相关的一个或多个元素 |
form | 定义输出字段所属的一个或多个表单 |
name | 定义对象的唯一名称 |
CSS设置表单样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS控制表单样式</title> 6 <style type="text/css"> 7 body{font-size: 12px; font-family: "宋体";} /*全局设置*/ 8 body,form,input,p{padding: 0; margin: 0; border: 0;} /*重置浏览器的默认样式*/ 9 form{ 10 width: 320px; 11 height: 150px; 12 padding-top: 20px; 13 margin: 50px auto; /*使表单在浏览器中居中*/ 14 background: #f5f8fd; /*为表单添加背景颜色*/ 15 border-radius: 20px; /*设置圆角边框*/ 16 border: 3px solid #4faccb; 17 } 18 p{ 19 margin-top: 15px; 20 text-align: center; 21 } 22 p span{ 23 width: 40px; 24 display: inline-block; 25 text-align: right; 26 } 27 .num,.pass{ /*对文本框设置共同的宽、高、边框、内边距*/ 28 width: 152px; 29 height: 18px; 30 border: 1px solid #38a1bf; 31 padding: 2px 2px 2px 22px; 32 } 33 .num{ /*定义第一个文本框的背景、文本颜色*/ 34 background: url(images/用户-is.png) no-repeat 5px center #fff; 35 color: #999; 36 } 37 .pass{ /*定义第二个文本框的背景*/ 38 background: url(images/密码-is.png) no-repeat 5px center #fff; 39 } 40 .bth01,.bth02{ 41 width: 60px; 42 height: 25px; 43 border-radius: 3px; /*设置圆角边框*/ 44 border: 1px solid #6b5d50; 45 margin-left: 30px; 46 } 47 .bth01{background: #3bb7ea;} /*设置第一个按钮的背景色*/ 48 .bth02{background: #fb8c16;} /*设置第二个按钮的背景色*/ 49 </style> 50 </head> 51 <body> 52 <form action="#" method="POST"> 53 <p> 54 <span>账号:</span> 55 <input type="text" name="uesername" value="admin" class="num" pattern="^[a-zA-Z] 56 [a-Za-Z0-9_]{4,15}$"/> 57 </p> 58 <p> 59 <span>密码:</span> 60 <input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]\w{5,17}$"/> 61 </p> 62 <p> 63 <input type="button" class="bth01" value="登录"/> 64 <input type="button" class="bth02" value="注册"/> 65 </p> 66 </form> 67 </body> 68 </html>
运行效果如图所示:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战