|
第3章 表单 背诵英语单词 form option text button submit label 学习目标 表单的用途很多，在制作网页，特别是制作动态网页时常常会用到。表单主要用来收集客户端提供的相关信息，使网页具有交互功能。在网页制作的过程中，常常需要使用表单，如进行会员注册、网上调查和搜索等。访问者可以使用如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。 内容导航 ² 表单标记 ² 表单元素及格式 3.1 表单标记在网页中<form>和</form>标记对用来创建一个表单，及定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。在表单的<form>标记中，可以设置表单的基本属性，包括表单的名称、处理程序和传送方法等。一般情况下，表单的处理程序action和传送方法method是必不可少的参数。 3.1.1 提交表单action用于制定表单数据提交到哪个地址进行处理 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDAC.tmp.png 语法：<form action="表单的处理程序">……</form> 说明：表单的处理程序是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他形式的地址。 3.1.2 表单名称name用于给表单命名，这一属性不是表单的必要属性，但是为了防止表单提交到后台处理程序时出现混乱，一般需要给表单命名。 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDAD.tmp.png 语法：<form name="表单名称"></form> 说明：表单名称中不能包含特殊字符和空格。 3.1.3 传送方法表单的method属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方式，可取值为get和post。 get：表单数据被传送到action属性指定的URL，然后这个新URL被送到处理程序上。 post：表单数据被包含在表单主体中，然后被送到处理程序上。 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDAE.tmp.png 语法：<form method="传送方法"></form> 说明：传送方法的值只有两种即get和post。 3.1.4 编码方式表单的enctype属性用于设置表单信息提交的编码方式。 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDAF.tmp.png 语法：<form enctype="编码方式"></form> 说明：enctype属性为表单定义了MIME编码方式，编码方式的取值见表： | | | Application/x-www-form-urlencoded | | | |
提示 enctype属性默认取值是application/x-www-form-urlencoded，这是所有网页的表单所使用的可接受的类型。 3.1.5 目标显示方式target用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息。 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDC0.tmp.png 语法：<form target="目标窗口的打开方式"></form> 说明：目标窗口的打开方式有四个选项：_blank、_parent、_self和_top。其中_blank为将链接的文件载入一个未命名的新浏览器窗口中；_parent为将链接的文件载入含有该链接框架的父框架集或父窗口中；_self为将链接的文件载入该链接所在的同一框架或窗口中；_top为在整个浏览器窗口中载入所接的文件，因而会删除所有框架。 3.2 表单元素及格式实现用户注册时，需要输入很多注册的信息，而装载这些数据的控件，就称为表单元素。有了这些表单元素，表单才会有意义。那么如何在表单中添加表单元素呢？其实 添加方法很简单，就是使用<input>标签，如示例3.1中就使用了<input>标签实现了向表单添加文本输入框、提交按钮、重置按钮的功能。 <input>标签中有很多属性，下面对一些比较常用的属性进行整理，如表所示。 | | | | [size=12.0000pt]此属性指定表单[size=12.0000pt]元[size=12.0000pt]素的类型。可用的选项[size=12.0000pt]有[size=12.0000pt]text、password、checkbox、radio、submit、reset、file、hidden、image 和 button。默认选择[size=12.0000pt]为[size=12.0000pt]text[size=12.0000pt]。 | | [size=12.0000pt]此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按名称来标识它们，如textl、 text2 等[size=12.0000pt]。 | | [size=12.0000pt]此属性是可选属性，它指定表单元素的初始值。但如果type为radio,则必须指定一个值[size=12.0000pt]。 | | [size=12.0000pt]此属性指定表单元素的初始宽度。如果type为text或password，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位[size=12.0000pt]。 | | [size=12.0000pt]此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大[size=12.0000pt]。 | | [size=12.0000pt]指定按钮是否是被选中的。当输入类型为radio或checkbox时，使用此属性[size=12.0000pt]。 |
到目前为止，大家已经知道了如何在页面中添加表单，也掌握了如何向表单加表单元素，那么这么多表单元素都该如何使用呢？下面选取几个常用的表单元素，来逐一学习其类型及常用的属性。 1. 文本框 在表单中最常用、最常见的表单输入元素就是文本框（text),它用于输入单行文本信息，如用户名的输入框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text就可以了。 【例3．1】创建新页面，使用文本框。 <!—index.html--> <html> <head> <title>表单的使用</title> </head> <body> <form method="post"> <h2>用户登陆</h2> 登录名：<input type="text" name="logName" value="Administrator" size="30" /> </form> </body> </html> 在代码中还分别使用size属性和value属性对登录名的长度和默认值进行了设置。预览效果如图3.1所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDC1.tmp.jpg 图3.1 文本框的使用 在文本框控件中输入数据时，还可以使用maxlength属性指定输入的数据长度。例如，登录名的长度不得超过20个字符，代码如下。 <input type="text" name="logName" value="Administrator" size="30" maxlength="20" /> 上面代码的设置结果是，文本框显示的长度为30,而允许输入的最多字符个数为20。 对于size属性和maxlength属性一定要能够严格地进行区分作用，size属性用于指定文本框的长度，而maxlength属性用于指定文本框输入的数据长度，这就是二者的区别。 2. 密码框 在一些特殊情况下，用户希望输入的数据被处理，以免被他人得到，如密码。这时候使用文本框就无法满足要求，需要使用密码框来完成。 密码框与文本框类似，区别在于需要设置文本框控件的type属性设为password。设置了type属性后，在密码框输入的字符全都以黑色实心的圆点来显示，从而实现了对数据的处理。 【例3．2】创建新页面，使用密码框。 <!—index.html--> <html> <head> <title>表单的使用</title> </head> <body> <form method="post"> <h2>用户登陆</h2> <h3>登录名：</h3><input type="text" name="logName" value="Administrator" size=30 maxlength="20" /> <br /> <h3>密码：</h3><input type="password" name="logPwd" size="22" value="*****" /> </form> </body> </html> 预览效果如图3.2所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDC2.tmp.jpg 图3.2 密码框的使用 提示 密码框仅仅使周围的人看不见输入的符号，它不能保证输入的数据安全。为了使数据安全，应该加强人为管理，采用数据加密技术等。 3. 单选按钮 单选按钮控件用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选择一个选项。只有从组中选定的单选按钮才会在提交的数据中提交对应的数值，在使用单选按钮时，需要一个显式的value属性。 【例3．3】创建新页面，使用单选按钮。 <!—index.html--> <html> <head> <title>表单的使用</title> </head> <body> <form method="post"> <h2>用户登陆</h2> 登录名： <input type="text" name="logName" value="Administrator" size=30 maxlength="20" /> <br /> 密码： <input type="password" name="logPwd" size="22" value="*****" /> <br /> 性别：<input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女 </form> </body> </html> 预览效果如图3.3所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDD2.tmp.jpg 图3.3 单选按钮的使用 如果希望在页面加载时，单选按钮有一个默认的选项，那么可以使用checked属性。 4. 复选框 复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox, 即将表单元素的type属性设为checkbox就可以创建一个复选框。复选框的命名与单选按钮有些区别， 既可以多个复选框选用相同的名称，也可以各自具有不同的名称，关键是看如何使用复选框。用户可以选中某个复选框，也可以取消选中。一旦用户选中了某个复选框，在表单提交时，会将该复选框的name值和对应的value值一起提交。 【例3．4】创建新页面，使用复选框。 <!—index.html--> <html> <head> <title>表单的使用</title> </head> <body> <form method="post"> <h2>用户登陆</h2> 登录名：<input type="text" name="logName" value="Administrator" size=30 maxlength="20" /><br /> 密码：<input type="password" name="logPwd" size="22" value="*****" /> <br /> 性别：<input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女<br /> 爱好：<input type="checkbox" name="hobby" value="run" checked="checked"/> 跑步 <input type="checkbox" name="hobby" value="swim" /> 游泳 <input type="checkbox" name="hobby" value="talk" /> 聊天 </form> </body> </html> 与单选按钮一样，checkbox复选框也可以设置默认选项，同样使用checked属性进行设置。例如，将爱好中的“运动”选项默认选中。预览效果如图3.4所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDD3.tmp.jpg 图3.4 复选框的使用 提示 单选按钮应具有相同的名字，便于互斥选择；而复选框的名称则要根据应用环境来 确定是否相同。通常情况下，如果选项之间是并列关系，就需要设置为相同的名称，以 便能够同时获取。例如兴趣爱好，一个人有多个兴趣爱好，这样复选框设置相同名称， 以便在提交数据时能够一次性得到所有选择的兴趣爱好选项。否则，每个选项都需要单 独进行读取，从而降低了效率。 5. 列表框 列表框主要是为了用户快速、方便、正确地选择一些选项，并且节省页面空间，它是通过<select>标签和<option>标签来实现的。<select>标签用于显示可供用户选择的下拉列表，每个选项由一个<option>标签表示，<select>标签必须包含至少一个<option>标签。 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDD4.tmp.png 语法：<select name="指定列表名称" size="行数"> <option value="可选项的值" selected="selected">……</option> </select> 其中，在有多条选项可供用户滚动查看时，size确定列表中可同时看到的行数；selected表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中，如同单选按钮组那样。 【例3．5】创建新页面，使用下拉复选框。 <!—index.html--> <html> <head> <title>表单的使用</title> </head> <body> <form method="post"> <h2>用户登陆</h2> 登录名：<input type="text" name="logName" value="Administrator" size=30 maxlength="20" /><br /> 密码：<input type="password" name="logPwd" size="22" value="*****" /><br /> 性别：<input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女<br /> 出生日期：<input type="text" name="birYear" />年 <select name="birMonth"> <option value="1">一月</option> <option value="2">二月</option> <option value="3">三月</option> <option value="4">四月</option> <option value="5">五月</option> <option value="6">六月</option> <option value="7">七月</option> <option value="8">八月</option> <option value="9">九月</option> <option value="10" selected="selected">十月</option> <option value="11">十一月</option> <option value="12">十二月</option> </select>月 <input type="text" name="birDay" />日<br /> 爱好： <input type="checkbox" name="hobby" value="run" checked="checked"/> 跑步 <input type="checkbox" name="hobby" value="swim" /> 游泳 <input type="checkbox" name="hobby" value="talk" /> 聊天 </form> </body> </html> 预览效果如图3.5所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDE5.tmp.jpg 图3.5 下拉列表框的使用 下拉列表框中添加的option选项会按照顺序进行排列，但是如果希望其中某个选项默认显示, 就需要使用selected属性来进行设置。例如，让月份默认显示十月，则相应代码修改为：<option value="10" selected="selected">十月</option> 6. 按钮 按钮在表单中经常用到，在HTML中按钮分为三种，分别是普通按钮(button)、提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDE6.tmp.png 语法 <input type="reset" name="reset" value="重置" /> 其中，type="button"表示是普通按钮；type="submit"表示是提交按钮；type="reset"表示是重置按钮。name用来给按钮命名，value用来设置显示在按钮上的文字。 【例3．6】创建新页面，使用按钮。 <!—index.html--> <html> <head> <title>表单的使用</title> </head> <body> <form method="post"> <h2>用户登陆</h2> 登录名：<input type="text" name="logName" value="Administrator" size=30 maxlength="20" /> <br /> 密码：<input type="password" name="logPwd" size="22" value="*****" /> <br /> <input type="button" value="button按钮" name="butButton" onclick="alert(this.value)" /> <input type="reset" value="reset按钮" name="butreset" onclick="alert(this.value)" /> <input type="submit" value="submit按钮" name="butsubmit" onclick="alert(this.value)" /> </form> </body> </html> 预览效果如图3.6所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDE7.tmp.jpg 图3.6 三种类型按钮的使用 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDF8.tmp.jpg 图3.7 普通按钮 针对示例中的按钮，各自的作用是不同，区别如下： a) reset按钮：用户单击该按钮后，不论表单中是否已经填写或输入数据，表单中各个表单元素都会被重置到最初状态，而填写或输入的数据将被清空。 b) submit按钮：用户单击该按钮后，表单将会提交到action属性所指定的URL，并传递表单数据。 c) button按钮：属于普通的按钮，需要与事件关联使用。在示例3.6的代码中，为普通按钮添加了一个onclick事件，当用户单击该按钮时，将会显示该按钮的value值。 提示 onclick事件是表单元素被点击时所激发的事件，并只限于按钮。在事件中可以调用相应的脚本代码，执行一些特定的客户端程序。这部分内容在后续的JavaScript课程中会进行讲解。 有时候，在页面使用按钮，显示的样式不美观，所以在实际开发过程中，往往会使用图片按钮来代替。预览效果如图3.8所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDF9.tmp.jpg 图3.8 图片按钮 实现图片按钮的效果有多种方法，比较简单的方法就是配合使用“type”和“src”属性，如下所示。 <input type="image" src="image/button.jpg" name="butButton" /> 需要注意：这种方式实现的图片按钮比较特殊，虽然“type”属性没有设置为“submit”，但仍然具备提交功能。 7. 多行文本域 当需要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它使用的标签是<textarea>。 file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDFA.tmp.png 语法：<textarea name="textarea" cols="显示的列宽度" rows="显示的行数">文本内容</textarea> 其中，cols属性用来指定多行文本框的列的宽度；rows属性用来指定多行文本框的行数。 <textarea>……</textarea>标签对中不能使用value属性来赋初始值。 【例3．7】创建新页面，使用文本域。 <!—index.html--> <html> <head> <title>表单的使用</title> </head> <body> <form method="post"> <h2>用户登陆</h2> 登录名：<input type="text" name="logName" value="Administrator" size=30 maxlength="20" /> <br /> 密码：<input type="password" name="logPwd" size="22" value="*****" /> <br /> 备注：<textarea name="textarea" cols="40" rows="6">活泼...</textarea><br /> <input type="image" src="image/button.jpg" width="120" name="butButton" /> </form> </body> </html> 预览效果如图3.9所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCDFB.tmp.jpg 图3.9 文本域 8. 文件域 文件域的作用是用于实现文件的选择，在应用时只需把type属性设为“file”即可。在实际应用中，文件域通常应用于文件上传的操作，如选择需要上传的文本、图片等。 【例3．8】创建新页面，使用文件域。 <!—index.html--> <html> <head> <title>表单的使用</title> </head> <body> <form method="post"> <h2>用户登陆</h2> 登录名：<input type="text" name="logName" value="Administrator" size=30 maxlength="20" /> <br /> 密码：<input type="password" name="logPwd" size="22" value="*****" /> <br /> 备注：<textarea name="textarea" cols="40" rows="6">活泼...</textarea><br /> 上传文件：<input type="file" name="subFile"><br /> <input type="submit"name="butButton" value="提交"/> </form> </body> </html> 预览效果如图3.10所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCE0B.tmp.jpg 图3.10 文件域 如上图所示，文件域会创建一个不能输入内容的地址文本框和一个“浏览”按钮。单击“浏览...”按钮，将会弹出“选择要加载的文件”窗口，选择文件后，路径将显示在地址文本框中，执行的效果如图3.11所示： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCE0C.tmp.jpg 图3.11 使用文件域打开文件 在使用文件域时，需要特别注意的是，包含文件域的表单，由于提交的表单数据包括普通的表单数据、文件数据等多部分内容，所以必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。 3.3 经典习题1. ( )标签用于在网页中创建表单。 A.<input> B.<select> C.<option> D. <form> 2. 下列说法错误的是( )。 A.密码框需要设置input标签type="password" B.图形提交按钮也需要设置type="submit" C.提交方法post比get更安全 D.value属性表示初始值，可能会随着用户的操作而改变，以提交时为准 3. 下面说法正确的是( )。（选择两项） A.文件域所传的内容较复杂，编码需要设为enctype="multipart/form-data" B.复选框各个选项的name属性必须设置为相同 C.readonly属性表示是否禁用 D.为了实现性别判断用两个单选按钮，name分别设置为“男”和“女” 4. 列表框的默认选择属性符合规范的正确写法为( )。 A.selected="selected" B.selected C.checked="checked" D.selected="true" 5. 下面HTML代码中，表示一个图片按钮的是( )。 A.<input type="image" src=" btn.gif " /> B.<img type="submit" src=" btn.gif " /> C.<input type="submit" valued="提交" /> D.<input type="img" src="btn.gif " /> 6. 请用HTML实现如图所示的申请表表单。相关要求如下： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCE0D.tmp.jpg 教育程度：默认选中硕士 国籍：有美国、澳大利亚、日本、新加坡，默认选中澳大利亚。 7. 请用HTML实现如图所示的电子产品调查表表单。相关要求如下： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCE1E.tmp.jpg 请输入你的购买日期； 你是否查看过我们的在线产品目录：默认选中“是” 8. 制作如图所示的网易邮箱注册页面。要求如下： file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wpsCE1F.tmp.jpg 性别中的“男”默认为选中状态； 出生日期中的1991年10月30日默认为选中状态。
| 
发表于 2021-11-21 16:37:26
收藏
