第3章 HTML高阶_网页编程技术-QQ阅读轻小说男生网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第3章 HTML高阶

本章要点

▲会使用表单的基本结构制作表单页面

▲会使用各种表单元素实现注册页面

▲能理解post和get两种提交方式的区别

▲会使用框架结构实现多窗口展示页面

3.1 表单标签

HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端递交的有关信息。表单由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有这些都放在<form>标签中。一个文档中可以包含多个表单，而且在每个表单中可以放置主体内容。

表单可以用于调查、订购、搜索等功能。一般表单由两部分组成，一是描述表单元素的HTML源代码；二是客户端的脚本。表单的处理过程是：当单击表单中的提交按钮，输入在表单的信息就会上传到服务器中，然后由服务器有关的应用程序处理，或者保存到服务器中的数据库中，或者返回给客户端浏览器。

网页中经常能见到如图3.1所示的页面，进行用户注册的功能，页面中可以使用户录入信息的元素就是表单元素。

图3.1 注册页面

※ 基本语法：<form name=" field_name " action="URL" method="get|post">表单标签常用的属性如表3-1所示。

表3-1 <form>标签常用属性

一个表单用<form></form>标志来创建，即定义表单的开始和结束位置，在开始和结束标志之间的一切定义都属于表单的内容。<form>标签具有action、method和target属性。action的值是处理程序的程序名。method属性用来定义处理程序从表单中获得信息的方式，可取值为get和post的其中一个。get传送的数据量较小，不能大于2KB。post传送的数据量较大，post一般用于提交的信息比较大的情况下，它比get要安全，因为由它提交的信息不会显示在浏览器地址栏上，而get则用于提交信息比较小的情况，它的速度比post要快，但是安全性低，因为它提交的信息会在浏览器地址栏中显示出来。例如，提交密码时就不能使用et，必须用post。当我们提交的信息较少且对安全要求不高的时候就可以使用get，比如百度搜索。target属性用来指定目标窗口或目标帧。可选当前窗口_self，父级窗口_parent，顶层窗口_top，空白窗口_blank。

※ 范例代码 3.1.html

<form action="mailto:sun@126.com" method="post" name="form1" id="form1">
…
</form>

※ 代码分析

单击“提交”按钮，发送邮件到sun@126.com，表单的传送方式为post。

※ 范例效果图

范例效果如图3.2所示。

图3.2 <form>标签应用

3.2 输入元素

输入表标签<input>是表单中最常用的标签之一。常用的文本域、密码、按钮等都会用到这个标签。

※ 基本语法：<form><input name="元素名称" type="元素类型"></form>

<input>标签属性基本有两种：name（输入元素的名称），type（输入元素的类型），由元素的类型可以确定具体是哪种表单元素。type属性可以包含的属性值如表3-2所示。

表3-2 <input>标签的type属性值

3.2.1 单行文本框

※ 基本语法：<input type="text" name="field_name" value="value1" size=

"value2" maxlength="value3">

可以通过添加value属性，指示或提醒用户该如何输入信息，如下面的例子中value属性值为提醒用户输入日期的格式。

例：<input type="text" value="mm/dd/yyyy" name="date" size="10">

常用的属性如表3-3所示。

表3-3 单行文本框常用属性

※ 范例代码 3.2.html

<form action="mailto:sun@126.com" method="post" name="form1" id="form1">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="font">
<tr>
<td width="100" align="right">姓名：</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td align="right">职业：</td>
<td><input type="text" name="business" id="business" /></td>
</tr>
…
<tr>
<td align="right">联系电话：</td>
<td><input type="text" name="telephone" id="telephone" /></td>
</tr>
…
</table>
</form>

※ 范例效果图

范例效果如图3.3所示。

图3.3 单行文本框应用

3.2.2 密码框

※ 基本语法：<input type="password" name=" field_name " maxlength=value1

size=value2>

密码文本框也是一个单行文本框。当站点访问者在这个框中输入数据时，大部分的Web浏览器都会以星号显示密码以不让别人看到用户所输入的内容。常用的属性如表3-4所示。

表3-4 密码框常用属性

※ 范例代码 3.3.html

<table width="89%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td height="30" colspan="2" valign="middle" nowrap> 用户名:
    <input name="textfield" type="text" size="14" >
  </td>
</tr>
<tr>
  <td height="30" colspan="2" valign="middle" nowrap> 密 &nbsp;码:
    <input name="textfield2" type="password" size="14" >
  </td>
</tr>
<tr align="right">
  <td width="81" height="30" valign="middle"><input type=button value="登陆" >&nbsp;</td>
  <td width="82" align="left" valign="middle">&nbsp;<input type=button value="注册" ></td>
</tr>
</table>
<table width="92%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td nowrap>关健字:<input name="textfield3" type="text" size="14" ></td>
</tr>
<tr>
  <td nowrap>品&nbsp;&nbsp;牌:<input name="textfield4" type="text" size="10" >
搜索 </td>
</tr>
<tr>
  <td align="center" nowrap>&nbsp; </td>
</tr>
</table>

※ 范例效果图

范例效果如图3.4所示。

图3.4 密码框的应用

3.2.3 单选按钮

※ 基本语法：<input type="radio" name=" field_name " value="value" checked >

表单中添加单选按钮可以让站点访问者从一组选项中选择其中之一。checked表示此项被默认选中，value表示选中项目后传送到服务器端的值。单选按钮常用的属性如表3-5所示。

表3-5 单选按钮常用属性

例如：

<input type "radio" name="city" value="beijing" checked>北京
<input type "radio" name="city" value="shanghai" checked>上海
<input type "radio" name="city" value="nanjing" checked>南京

※ 范例代码 3.4.html

…
<tr>
<td align="right">联系目的：</td>
<td><input type="radio" name="buy" id="buy" value="buy" />购买插画
<input type="radio" name="layout" id="layout" value="layout" />展示插画
<input type="radio" name="other" id="other" value="other" />其他</td>
</tr>
…

※ 范例效果

范例效果如图3.5所示。

图3.5 单选按钮

注意：若干个名称相同的单选按钮构成一个单选按钮组，在该组中只能同时选中一个选项。

3.2.4 复选框

※ 基本语法：<input type="checkbox" name="field_name" value="value" checked >

表单中添加复选框可以让站点访问者去选择一个或多个选项或不选项。复选框常用的属性如表3-6所示。

表3-6 复选框的常用属性

例：

<input type="checkbox" name="M1" checked value="rock">摇滚乐
<input type="checkbox" name="M2" checked value="jazz">爵士乐<
input type="checkbox" name="M3" checked value="pop">流行乐

※ 范例代码 3.5.html

<tr>
<td align="right">绘画类型：</td>
<td>
<input type="checkbox" name="finery" id="finery" />服饰插画
<input type="checkbox" name="stilllife" id="stilllife" /> 静物插画
<input type="checkbox" name="enjoyable" id="enjoyable" />写意插画
</td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input type="checkbox" name="Europe" id="Europe" />欧洲插画
<input type="checkbox" name="doodle" id="doodle" />涂鸦插画
<input type="checkbox" name="background" id="background" />背景插画
</td>
</tr>

※ 范例效果图

范例效果如图3.6所示。

图3.6 复选框

3.2.5 按钮

※ 基本语法：<input type="submit|reset|button" name="field_name" value=

"button_text">

使用input标签可以在表单中添加3种类型的按钮：提交按钮、重置按钮和自定义按钮。

按钮常用的属性如表3-7所示。

表3-7 按钮常用的属性

※ 范例代码 3.6.html

<tr>
<td height="100" colspan="2" align="center"><input type="submit" name="button" id="button" value="提交" />
<input type="reset" name="button2" id="button2" value="重置"/></td>
</tr>

※ 范例效果图

范例效果如图3.7所示。

图3.7 按钮

3.2.6 文件域

※ 基本语法：<input type="file" name="field_name">

文件域由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。文件域常用的属性如表3-8所示。

表3-8 文件域常用属性

※ 范例代码 3.7.html

<form action="" method="post" enctype="multipart/form-data" name="form1">
<p>
<input name="textfield" type="text" value="单行文本域" size="43" maxlength="30">
</p>
<p>
<input name="textfield2" type="password" value="密码域" size="43" maxlength="30">
</p>
<p>
<textarea name="textarea" cols="42" rows="4">多行文本域
</textarea>
</p>
<p>
<input type="radio" name="radiobutton" value="radiobutton">
<input type="checkbox" name="checkbox" value="checkbox">
<select name="select">
<option>--请选择--</option>
<option>下拉菜单一</option>
<option>下拉菜单二</option>
<option>下拉菜单三</option>
</select>
</p>
<p>
<input name="file" type="file" size="33">
</p>
<p>
<input type="submit" name="Submit" value="确定传送">
<input name="imageField" type="image" src="images/jiao.gif" width="80" height="20" border="0">
</p>
</form>

※ 范例效果图

范例效果如图3.8所示。

图3.8 文件域

3.2.7 隐藏域

※ 基本语法：<input type="hidden" name="field_name" value="value">

用户是看不到隐藏域的，但单击“提交”按钮后，隐藏域的值也会被传送出去。隐藏域往往用来传递一些无须用户输入或知道的内容。

3.3 多行文本框

在意见反馈栏中往往需要浏览者发表意见和建议，提供的输入区域一般较大，可以输入较多的文字。使用多行文本框可以设置允许多于一行的文字的输入。

※ 基本语法：<textarea name="name" rows=value cols=value value="value">

</textarea>

多行文本框常用的属性如表3-9所示。

表3-9 多行文本框的属性

※ 范例代码 3.8.html

   <textarea name="textarea" id="textarea" cols="30" rows="5"></textarea>

※ 范例效果图

范例效果如图3.9所示。

图3.9 多行文本框

注意1：创建多行文本框时，在<textarea>和</textarea>标记之间输入的文本将作为该控件的初始值。

注意2：多行文本框中的行数和列数是指不用滚动条就可以看到的部分。

3.4 下拉列表和列表框

当浏览者选择的项目较多时，如果使用复选框来选择，占页面的区域就会较多。可以用<select>标记和<option>标记来设置下拉列表或者列表框。其中下拉列表又可以称作为菜单，菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到最全的选项。列表框可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各个选项。

※ 基本语法：

<select name="name" size="value" multiple>
  <option value="value" selected>选项1</option>
  <option value="value">选项2</option>
  …
</select>

下拉列表和列表框的常用属性如表3-10所示。

表3-10 下拉列表和列表框的属性

例：

<select name="music" size="4" multiple>
      <option value="rock" selected>摇滚乐</option>
      <option value="pop" >流行乐</option>
      <option value="jazz" >爵士乐</option>
      <option value="nation" >民族乐</option>
</select>
<BR/>
<select name="city">
      <option value="beijing" selected>北京</option>
      <option value="shanghai" >上海</option>
      <option value="nanjing" >南京</option>
      <option value="guangzhou" >广州</option>
</select>

※ 范例代码 3.9.html

<select name="idtype" class="style5">
    <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>驾照</option>
    <option value=11>出生证</option>
    <option value=12>其他</option>
</select>

※ 范例效果图

范例效果如图3.10所示。

图3.10 下拉列表和列表框

3.5 框架标签

框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的html网页。使用框架可以非常方便地在浏览器中同时浏览不同的页面效果，也可以非常方便地完成导航工作。

3.5.1 框架集<frameset>

框架主要包括两个部分，一个是框架集，另一个是框架。一个被划分成若干框架的窗口区域被称为框架集，框架窗口必须定义在框架集中，框架集定义了一个窗口中显示的框架数、框架的尺寸和载入到框架的网页等。

※ 基本语法：

<html>
<head>
</head>
<frameset>
    <frame src="url地址1">
    <frame src="url地址2">
    ……
<frameset>
    </html>

框架集的主要属性如表3-11所示。

表3-11 <frameset>标签的常用属性

左右分割窗口属性cols：如果想要在水平方向将浏览器分割成多个窗口，这需要使用到框架集的左右分割窗口属性cols。分割几个窗口其cols的值就有几个，值的定义为宽度，可以是数字（单位为像素），也可以是百分比和剩余值。各值之间用逗号分开。其中剩余值用"*"号表示，剩余值表示所有窗口设定之后的剩余部分，当"*"只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，当"*"出现一次以上时，表示按比例分割剩余的窗口空间。

例如：

<frameset cols="40%,40%,*">   将窗口分为40%，40%，20%
<frameset cols="100,200,*">   将窗口分为100像素，200像素，剩余部分
<frameset cols="100,*,*">     将100像素以外的窗口平均分配
<frameset cols="*,*,*">       将窗口分为三等份

上下分割窗口属性rows 与cols属性的设置基本一致。

※ 范例代码 3.10.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset cols="266,41,*" frameborder="no" border="0" framespacing="0">
   <frame src="banner.html" name="leftFrame" scrolling="No">
   <frame src="dht.html" name="leftFrame1" scrolling="No" noresize="noresize">
   <frame src="main.html" name="mainFrame" id="mainFrame" scrolling="yes" />
</frameset>
<noframes>
</noframes>
</html>

※ 代码分析

<frameset>将窗口划分成左中右三个框架，左边的框架宽度为266像素，中间的框架宽度为41像素，右边的框架宽度为浏览器的剩余部分宽度。

※ 范例效果图

范例效果如图3.11所示。

图3.11 左右框架集

3.5.2 框架标签<frame>

<frame>标签放在<frameset>和</frameset>标签之间，用来定义某一个具体的框架窗口。窗口的属性都是通过<frame>标签设置的。<frame>是个单标签，<frame>标签要放在框架集<frameset>中，<frameset>设置了几个子窗口就必须对应几个<frame>标签，框架的主要属性如表3-12所示。

表3-12 <frame>标签的常用属性

※ 范例代码 3.11.html

<frameset cols="266,41,*" frameborder="no" border="0" framespacing="0">
   <frame src="banner.html" name="leftFrame" scrolling="No">
   <frame src="dht.html" name="leftFrame1" scrolling="No" noresize="noresize">
   <frame src="main.html" name="mainFrame" id="mainFrame" scrolling="yes" />
</frameset>

※ 代码分析

<frame>标签中属性src指定要显示的页面分别是banner.html,dht.html和main.html,属性ame指定框架的名称分别为leftFrame,leftFrame1和mainFrame，属性scrolling定义是否有滚动条，因为main.html是主体内容页面，所以定义scrolling属性值为yes,即框架窗口中包含滚动条，使用户可以看到完整的页面。

注意：<frame>标签必须包含name属性和src属性。

3.5.3 浮动框架<iframe>

※ 范例代码 3.12.html

<html>
<head>
</head>
<body>
<iframe id="news" src="page-1.htm" name="news" styles="width:334; height:100%;" frameborder="no" border="0" framespacing="0"></iframe>
</body>
</html>

※ 范例效果图

范例效果如图3.12所示。

图3.12 浮动框架

3.5.4 不支援框架<noframes>

<noframes></noframes>标签，即使在做框架集网页时没有这对标签，文件在很多浏览器解析时也会自动生成<noframes>标签，这对标签的作用是当浏览者使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <noframes>这个标签，当使用的浏览器看不到框架时，他就会看到 <noframes> </noframes>之间的内容，而不是一片空白。

3.6 页面实例——制作注册页面

※ 范例代码 3.13.html

<body>
…
<table width="950" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top"><img src="images/SKYN_11.gif" width="225" height="281" /></td>
    <td width="675" valign="top">
    <iframe width="675" height="400" src="lxfs.html" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
   </iframe>
  </td>
   <td valign="top"><img src="images/SKYN_13.gif" width="50" height="298" /></td>
  </tr>
</table>
…
</body>

lxfs.html页面代码

<body>
…
<form action="mailto:zhengps@126.com" method="post" enctype="text/ plain" name="form1" id="form1">
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="font1">
 <tr>
   <td width="100" align="right">姓 名：</td>
   <td><input type="text" name="textfield" id="textfield" /></td>
 </tr>
 <tr>
   <td width="100" align="right">工作性质：</td>
   <td><input type="text" name="textfield2" id="textfield2" /></td>
 </tr>
 <tr>
    <td width="100" align="right">别墅型号： </td>
    <td><input type="radio" name="radio" id="radio" value="radio" />山景电梯洋房
        <input type="radio" name="radio2" id="radio2" value="radio2" />山景洋房
        <input type="radio" name="radio3" id="radio3" value="radio3" />叠墅</td>
 </tr>
 <tr>
    <td width="100" align="right">购买方式：</td>
    <td><select name="select" id="select">
         <option selected="selected">一次性购买</option>
         <option>分期购买</option>
        </select>
     </td>
   </tr>
   <tr>
     <td width="100" align="right">联系电话： </td>
     <td><input type="text" name="textfield3" id="textfield3" /></td>
   </tr>
   <tr>
       <td width="100" align="right">注 释：</td>
      <td><textarea name="textarea" id="textarea" cols="30" rows="5"></textarea></td>
    </tr>
    <tr>
       <td height="40" colspan="2" align="center" valign="bottom">
         <input type="submit" name="button" id="button" value="提交" />
         <input type="reset" name="button2" id="button2" value="重置
         " /></td>
     </tr>
</table>
</form>
</body>

※ 范例效果图

范例效果如图3.13和图3.14所示。

图3.13 注册页面

图3.14 注册页面

3.7 上机练习

1.制作如图3.15所示页面，注意表单元素的定义。

2.制作如图3.16所示页面，部门包括财务部、人事部、开发部和测试部，消费项目包括用餐、住宿和材料。

图3.15 个人资料注册页面

图3.16 出差费用汇报

3.设计如图3.17所示页面，实现客户询价功能，注意表格的定义，使页面排版更合理。

图3.17 客户询价