第4章 表单的使用

本章要求：第4章表单的使用表单的作用HTML中的表单标记HTML中的输入标记HTML中的文本域标记HTML中的菜单和列表标记主要内容1.什么是表单2.表单标记<form>3.输入标记<input>4.文本域标记<textarea>5.菜单和列表标记<select>，<option>6.综合实例——制作注册页面第4章表单的使用4.1什么是表单表单通常设计在一个HTML文档中，当用户填写完信息后做提交操作，将表单的内容从客户端的浏览器传送到服务器上，经过服务器处理程序后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。HTML表单是HTML页面与浏览器实现交互的重要手段。表单的主要功能是收集信息，具体说是收集浏览者的信息。例如在网上注册一个账号，就必须按要求填写完成网站提供的表单网页，如用户名、密码、联系方式等信息如图4-1所示。在网页中，最常见的表单形式主要包括文本框、单选按钮、复选框、按钮等。+++++++++++++++图4-1用来做注册的表单4.2.1处理程序action属性4.2.2表单名称name属性4.2.3提交方式method属性4.2.4编码方式enctype属性4.2.5目标显示方式target属性4.2表单标记<form>真正处理表单的数据脚本或程序在action属性里，这个值可以是程序或者脚本的一个完整URL。具体语法如下：<formaction=”URL”>……</form>URL：表单提交的地址。说明：

在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址例如发送E-mail等。<formaction="mailto:mingrisoft@"></form>上面就是定义了表单提交的地址为一个邮件，当程序运行后会将表单中收集到的内容以电子邮件的形式发送出去。4.2.1处理程序action属性名称属性name用于给表单命名。这一属性不是表单的必需属性，但是为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能符合的名称，例如登录的表单可以命名为login。不同的表单尽量用不同的名称，以避免混乱。具体语法如下：<formname=”form_name”>……</form>form_name：为表单起的名字。4.2.2表单名称name属性表单的method属性用来定义处理程序从表单中获得信息的方式，可取值为get或post，它决定了表单中已收集的数据是用什么方式提交到服务器的。具体语法如下：<formmethod=”method”>……</form>method：提交方式的值，只有两种选择即get和post。说明：

Method=get：使用这种方式提交表单时，表单数据会被视为CGI或ASP的参数发送，也就是来访者输入的数据会附加在URL之后，由用户端直接发送至服务器，所以速度上会比post快，但缺点是数据长度不能够太长。在没有指定method的情形下，一般都会视get为默认值。Method=post：使用这种设置时，表单数据是与URL分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度上会比get慢。4.2.3提交方式method属性表单中的enctype参数用于设置表单信息提交的编码方式。具体语法如下：<formenctype=”value”>……</form>valus：取值如表4-1所示。表4-1 enctype属性的取值范围4.2.4编码方式enctype属性取值描述Test/plain以纯文本的形式传送application/x-www-form-urlencoded默认的编码形式multipart/form-dataMIME编码，上传文件的表单必须选择该项target属性用来指定目标窗口的打开方式。表单的目标窗口往往来显示表单的返回信息，例如是否成功提交了表单的内容、是否出错等。具体语法如下：<formtarget=”target_win”>……</form>target_win：取值如表4-2所示。表4-2 target属性的取值范围4.2.5目标显示方式target属性取值描述_blank将返回信息显示在新开的浏览器窗口中_parent将返回信息显示在父级浏览器窗口中_self将返回信息显示在当前浏览器窗口中_top将返回信息显示在顶级浏览器窗口中4.3输入标记<input>4.3.1文字域text4.3.2密码域password4.3.3单选框radio4.3.4复选框checkbox4.3.5普通按钮button4.3.6提交按钮submit4.3.7重置按钮reset4.3.8图像域image4.3.9隐藏域hidden4.3.10文件域filetext属性值用来设定在表单的文本域中，输入任何类型的文本、数字或字母。输入的内容以单行显示。具体语法如下：<inputtype=”text”name=”field_name”maxlength=max_valuesize=size_valuevalue=”field_value”>文字域属性的含义如表4-4所示。表4-4 文字域属性4.3.1文字域text取值描述name文字域的名称maxlength文字域的最大输入字符数size文字域的宽度（以字符为单位）value文字域的默认值【例4-1】在页面中使用文字域，做一个人口调查的页面。代码如下所示。<form><h3align="center">人口调查</h3>

姓名：<inputtype=”text”name=”username”size=20><br/><!--设置表示姓名的文本域

--> <!--设置表示姓名的文本域长度为4最大输入字符数为1-->

性别：<inputtype=”text”name=”sex”size=4maxlength=1>   <!--设置表示年龄的文本域长度为4最大输入字符数为3-->

年龄：<inputtype=”text”name=”age”size=4maxlength=3><br/> <!--设置表示地址的文本域长度为50，文本域中默认值为吉林省长春市-->

居住地址：<inputtype=”text”name=”address”size=50value="吉林省长春市"></form>运行本实例，将显示如图4-2所示的效果。图4-2在页面中添加了文字域在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号“*”或圆点显示。具体语法如下：<inputtype=”password”name=”field_name”maxlength=max_valuesize=size_value>密码域属性的含义如表4-5所示。表4-5 密码域属性4.3.2密码域password取值描述name文字域的名称maxlength文字域的最大输入字符数size文字域的宽度（以字符为单位）value文字域的默认值【例4-2】在网络中常常有需要修改密码的时候，现在使用密码域，创建一个修改密码的页面。代码如下所示。<form><h3align="center">修改密码</h3>用

户

名：<inputtype="text"name="username"size=15><br>原

密

码：<inputtype="password"name="oldpassword"maxlength=8size=15><br>新

密

码：<inputtype="password"name="newpassword1"maxlength=8size=15><br>确认新密码：<inputtype="password"name="newpassword2"maxlength=8size=15></form>运行本实例，将显示如图4-3所示的效果。图4-3在页面中添加密码域在网页中，单选框用来让浏览者进行单一选择，在页面中以圆框表示。在单选框控件中必须设置参数value的值。而对于一个选择中的所有单选框来说，往往要设定同样的名称，这样在传递时才能更好地对某一个选择内容的取值进行判断。具体语法如下：<inputtype=”radio”name=”field_name”checkedvalue=”value”>checked：表示此项为默认选中。value：表示选中项目后传送到服务器端的值。【例4-3】页面中使用单选框，做一个外来人员登记页面。代码如下所示。<form><h3align="center">外来人员登记表</h3>姓名：<inputtype="text"name="username"size=15/><br>性别：<inputtype="radio"name="field_name"checkedvalue="男"/>男

<inputtype="radio"name="field_name"value="女"/>女

<br>身份证号：<inputtype="text"name="IDcard"size=20/><br>原因：<inputtype="text"name="causation"size=50/></form>4.3.3单选框radio运行本实例，将显示如图4-4所示的效果。图4-4在页面中使用单选框浏览者填写表单时，有一些内容可以通过让浏览者进行选择的形式来实现。例如常见的网上调查，首先提出调查的问题，然后让浏览者在若干个选项中进行选择。又例如收集个人信息时，要求在个人爱好的选项中进行选择等。复选框能够进行项目的多项选择，以一个方框表示。具体语法如下：<inputtype=”checkbox”name=”field_name”checkedvalue=”value”>checked：表示此项为默认选中。value：表示选中项目后传送到服务器端的值。【例4-4】在页面中使用复选框，选择你所喜欢的运动。代码如下所示。<form><h3align="center">选择你喜欢的运动</h3><inputtype="checkbox"name="hobby"value="游泳">游泳<inputtype="checkbox"name="hobby"value="足球">足球<inputtype="checkbox"name="hobby"value="篮球">篮球<br/><inputtype="checkbox"name="hobby"value="滑冰">滑冰<inputtype="checkbox"name="hobby"value="滑雪">滑雪<inputtype="checkbox"name="hobby"value="乒乓球">乒乓球</form>4.3.4复选框checkbox运行本实例，将显示如图4-5所示的效果。图4-5在页面中使用复选框在网页中按钮也很常见，在提交页面、恢复选项时常常用到。普通按钮一般情况下要配合脚本来进行表单处理。具体语法如下：<inputtype=”button”name=”field_name”value=”button_text”>field_name：普通按钮的名称。button_text：按钮上显示的文字。4.3.5普通按钮button提交按钮是一种特殊的按钮，在单击该类按钮时可以实现表单内容的提交。具体语法如下：<inputtype=”submit”name=”field_name”value=”submit_text”>field_name：提交按钮的名称。submit_text：按钮上显示的文字。【例4-5】在页面中分别创建一个普通按钮和一个提交按钮，普通按钮用来关闭该页面，提交按钮用来提交表单。代码如下所示。<formaction="mailto:mingrisoft@"> <!--表单提交到一个邮箱地址

-->提交按钮：<inputtype="submit"value="提交表单页面"/><br/> <!--使用submit提交表单

--> <!--onclick为鼠标单击事件，window.close()为关闭该页面的方法

-->普通按钮：<inputtype="button"value="关闭当前页面"onclick="window.close();"/></form>4.3.6提交按钮submit运行本实例，将显示如图4-6所示的效果。图4-6单击普通按钮的效果单击“重置”按钮后，可以清除表单的内容，恢复默认的表单内容设定。具体语法如下：<inputtype=”reset”name=”field_name”value=”reset_text”>field_name：重置按钮的名称。reset_text：按钮上显示的文字。【例4-6】在填写信息时，常常有填错的时候，这时可以创建一个重置按钮，用来清除用户在页面中输入的信息。代码如下所示。<form><h3align="center">人口调查</h3>姓名：<inputtype=”text”name=”username”size=20><br/>性别：<inputtype=”text”name=”sex”size=4maxlength=1>  年龄：<inputtype=”text”name=”sex”size=4maxlength=3><br/>居住地址：<inputtype=”text”name=”address”size=50value="吉林省长春市"><br/><inputtype="submit"value="提交"/><inputtype="reset"value="重置"/></form>4.3.7重置按钮reset运行本实例，将显示如图4-7所示的效果。图4-7单击“重置”按钮清除用户输入信息-图像域是指可以用在提交按钮位置上的图片，这幅图片具有提交按钮的功能。使用默认的按钮形式往往会让人觉得单调。如果网页使用了较为丰富的色彩，或稍微复杂的设计，再使用表单默认的按钮形式甚至会破坏整体的美感。这时，可以使用图像域，创建和网页整体效果相统一的图像提交按钮。具体语法如下：<inputtype=”image”name=”field_name”src=”image_url”>field_name：图像域的名称。image_url：图片的路径。【例4-7】大家在浏览网页的时候看到很多好看的按钮，其实大部分的按钮都是一张图片，现在我们创建一个登录页面，同时为页面加入一个图片按钮。代码如下所示。<form><h3align="center">用户登录</h3>用户名称：<inputtype="text"name="username"/><br/>用户密码：<inputtype="password"name="pwd"/><br/><inputtype="image"name="img"src="images/pic.bmp"/></form>4.3.8图像域image运行本实例，将显示如图4-8所示的效果。图4-8带图片按钮的登录界面隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以便于被处理表单的程序所使用。浏览者单击“发送”按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。具体语法如下：<inputtype=”hidden”name=”field_name”value=”value”>说明：

表单中的隐藏域主要用来传递一些参数，而这些参数不需要在页面中显示。例如隐藏用户的id值，写法如下。<inputtype=”hidden”name=”user_id”value=”10001”>其中user_id是我们为隐藏域的名称，10001是用户的id值。4.3.9隐藏域hidden文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。在设置电子邮件的附件、上传头像、发送文件时常常会看到这一控件。具体语法如下：<inputtype=”file”name=”field_name”>field_name：文件域的名称。【例4-8】创建一个用来做用户调查的页面，使用文件域用来上传用户的照片。代码如下所示。<form><h3align="center">人口调查</h3>姓名：<inputtype=”text”name=”username”size=20><br/>性别：<inputtype=”text”name=”sex”size=4maxlength=1>  年龄：<inputtype=”text”name=”sex”size=4maxlength=3><br/>居住地址：<inputtype=”text”name=”address”size=50value="吉林省长春市"><br/>用户照片：<inputtype="file"name="photo"/></form>4.3.10文件域file文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。在设置电子邮件的附件、上传头像、发送文件时常常会看到这一控件。具体语法如下：<inputtype=”file”name=”field_name”>field_name：文件域的名称。【例4-8】创建一个用来做用户调查的页面，使用文件域用来上传用户的照片。代码如下所示。<form><h3align="center">人口调查</h3>姓名：<inputtype=”text”name=”username”size=20><br/>性别：<inputtype=”text”name=”sex”size=4maxlength=1>  年龄：<inputtype=”text”name=”sex”size=4maxlength=3><br/>居住地址：<inputtype=”text”name=”address”size=50value="吉林省长春市"><br/>用户照片：<inputtype="file"name="photo"/></form>4.3.10文件域file运行本实例，将显示如图4-9所示的效果。图4-9上传用户照片在HTML中还有一种特殊定义的文本样式，称为文字域或文本域。它与文字字段的区别在于可以添加多行文字，从而可以输入更多的文本。这类控件在一些留言板中最为常见。具体语法如下：<textareaname=”textname”value=”text_value”rows=rows_valuecols=cols_valuevalue=”value”>这些属性的含义如表4-6所示。表4-6 文本域标记属性4.4文本域标记<textarea>文本域标记属性描述name文本域的名称rows文本域的行数cols文本域的列数value文本域的默认值【例4-9】创建一个留言板页面，使用在页面中使用文本域。代码如下所示。<form><h3align="center">留言板</h3>标题：<inputtype=”text”name=”username”size=50><br/><br/><!--设置一个文本域，设置该文本域的行数为10列数为70-->内容：<br/><textareaname="word"rows=10cols=70></textarea></form>运行本实例，将显示如图4-10所示的效果。图4-10在页面中添加文本域菜单列表类的控件主要用来进行选择给定答案中的一种，这类选择往往答案比较多，使用单选按钮比较浪费空间。可以说，菜单列表类的控件主要是为了节省页面空间而设计的。菜单和列表都是通过<select>和<option>标记来实现的。菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。具体语法如下：<selectname=’select_name’size=select_sizemultiple> <optionvalue=”option_value”selected>选项</option><optionvalue=”option_value”>选项</option></select>4.5菜单和列表标记<select>，<option>这些属性的含义如表4-7所示。表4-7 菜单和别表标记属性菜单和列表标记属性描述name菜单和列表的名称size显示的选项数目multiple列表中的项目多卷value选项值selected默认选项【例4-10】利用<select>标签创建一个用来做学生业余生活调查的页面。代码如下所示。<form><h3>学生业余生活调查</h3>调查人姓名：<inputtype="text"name="username"size="10"/><br><br>爱好的体育运动：<selectname="hobby"> <optionvalue="游泳"selected>游泳</option> <optionvalue="足球">足球</option> <optionvalue="篮球">篮球</option> <optionvalue="跑步">跑步</option></select><br><br>周末一般都在哪：<br><br><selectname="where"size="4"> <optionvalue="在家"selected>在家</option> <optionvalue="去逛街">去逛街</option> <optionvalue="去访友">去访友</option> <optionvalue="去郊游">去郊游</option></select></form>运行本实例，将显示如图4-11所示的效果。图4-11学生业余生活调查许多读者都有这样的经历，在访问一个网站的时候，该网站的一些信息或者功能只对该网站的会员开放，如果想要查看这些信息就需要注册成为该网站的会员。根据上面的情况利用我们学过的知识为某网上商城制作的一个注册页面。运行结果如图4-12所示。图4-12网上商城注册页面4.6综合实例——制作注册页面具体实现过程如下：（1）创建一个表单，设置表单提交到login.html页面，提交方式为post，关键代码如下：<formname="enrol"method="post"action="login.html"></form>（2）在步骤（1）中添加的表单中，创建一个用于进行布局的表格，并为表格加入一张背景图片，表格的大小与图片的大小一致。同时，还需要在表格的适当单元格中加入填写注册信息的表单元素，具体代码如下：<tablebackground="images/rs.jpg"width="1003"height="614"align="center"><tr> <tdwidth="93"height="320"> </td><tdwidth="107"> </td><tdwidth="188"> </td><tdwidth="103"> </td><tdwidth="488"> </td></tr><tr><tdheight="22"> </td><tdalign="right">用户名：</td><td><inputtype="text"name="uname"/></td> <!--用来输入姓名的文字域

--><td> </td><td> </td></tr><tr><tdheight="23"> </td><tdalign="right">性别：</td><td><inputtype="text"name="sex"/></td> <!--用来输入性别的文字域

--><td> </td><td> </td></tr><tr><tdheight="25"> </td><tdalign="right">密码：</td><td><inputtype="password"name="password1"/></td><!--用来输入密码的密码域

--><td> </td><td> </td></tr><tr><tdheight="24"> </td><tdalign="right">确认密码：</td><td><inputtype="password"name="password2"/></td><!--用来确认密码的密码域

--><td> </td><td> </td></tr><tr><tdheight="25"> </td><tdalign="right">QQ号码：</td><td><inputtype="text"name="qqnumber"/></td> <!--用来输入qq号码的文字域

--><td> </td><td> </td></tr><tr><tdheight="18"> </td><tdalign="right">电话号码：</td> <!--用来输入电话的文字域

--><td><inputtype="text"name="tel"/></td><tdalign="center"><!--提交表单的按钮，onclick为鼠标单击事件，alert（）为弹出窗口事件

--><inputname="login"type="image"id="login"src="images/denglu.bmp" onclick="alert('注册成功')"/></td><td> </td></tr><tr><tdheight="25"> </td><tdalign="right">住址：</td><td><inputtype="text"name="address"/></td> <!--用来输入住址的文字域

--><tdalign="center"> <!--document.enrol.reset()为重置事件

--