4.1 表单和表单元素

实例068 使用文本框做一个人口调查的页面

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\068

实例说明

表单的主要功能是收集信息，具体说是收集浏览者的信息。本实例将使用表单元素中的文本框，做一个人口调查的页面。实例运行效果如图4.1所示。

图4.1 在页面中使用文本框

技术要点

在表单元素中，文本框是指type属性值为text的<input>标签。文本框可以输入任何类型的文本、数字或字母。输入的内容以单行显示。具体语法如下：

<input type="text" name="field_name" maxlength=max_valuesize=size_valuevalue="field_value">

文本框属性的取值和含义如表4.1所示。

表4.1 文本框属性

实现过程

创建index.html文件，在文件中创建表单，在表单中定义4个文本框，分别用来输入用户的姓名、性别、年龄和居住地址。程序代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>人口调查页面</title>

</head>

<body>

<form>

<h3 align="center">人口调查表</h3>

<!--设置表示姓名的文字域长度为20-->

姓名：<input type="text" name="username" size=20 ><br/>

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

性别：<input type="text" name="sex" size=4 maxlength=1>&nbsp;&nbsp;

<!--设置表示年龄的文字域长度为4最大输入字符数为3-->

年龄：<input type="text" name="age" size=4 maxlength=3 ><br/>

<!--设置表示地址的文字域长度为50，文字域中默认值为吉林省长春市-->

居住地址：<input type="text" name="address" size=50 value="吉林省长春市">

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

为文本框设置CSS样式。

设置文本框的只读属性。

实例069 使用密码域创建一个简单的注册页面

本实例可以提高工作效率

实例位置：光盘\mingrisoft\04\069

实例说明

本实例使用密码域，创建一个简单的注册页面。运行本实例，当用户输入密码和确认密码时，可以看到输入的字符均以圆点“●”显示，实例运行结果如图4.2所示。

图4.2 在页面中添加密码域

技术要点

在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号“*”或圆点显示。具体语法如下：

<input type="password"name="field_name" maxlength=max_valuesize=size_value>

密码域属性的含义如表4.2所示。

表4.2 密码域属性

实现过程

创建 index.html文件，在文件中创建表单，在表单中定义一个文本框和两个密码域，完成用户注册表单的设计，代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>用户注册页面</title>

</head>

<body>

<form>

<h3 align="center">用户注册</h3>

用&nbsp;户&nbsp;名：<input type="text" name="username" size=15><br>

密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password"name="password" maxlength=8 size=15><br>

确认密码：<input type="password" name="password2" maxlength=8 size=15 >

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

使用文本框和密码域创建一个简单的登录页面。

使用密码域制作更改密码界面。

实例070 使用单选按钮做一个用户信息表

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\070

实例说明

单选按钮在网站开发过程中应用非常广泛。本实例将在页面中使用单选按钮，做一个用户信息表。运行本实例，结果如图4.3所示。

图4.3 在页面中使用单选按钮

技术要点

本实例主要应用表单元素中的单选按钮。在网页中，单选按钮用来让浏览者进行单一选择，在页面中以圆框表示。在单选按钮控件中必须设置参数 value 的值。而对于一个选择中的所有单选按钮来说，往往要设定同样的名称，这样在传递时才能更好地对某一个选择内容的取值进行判断。具体语法如下：

<input type="radio"name="field_name" checked value="value">

参数说明如下：

● checked：表示此项为默认选中。

● value：表示选中项目后传送到服务器端的值。

实现过程

创建index.html文件，在文件中创建表单，在表单中定义3个文本框和两个单选按钮，完成用户信息表单的设计，代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>用户信息页面</title>

</head>

<body>

<form>

<h3 align="center">用户信息表</h3>

姓名：<input type="text" name="username" size=15/><br>

性别：<input type="radio" name="sex" checked value="男"/>男

<input type="radio"name="sex" value="女"/>女<br>

身份证号：<input type="text" name="IDcard" size=20/><br>

籍贯：<input type="text" name="comefrom"size=50/>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

通过单选按钮选择表情符号来表达个人心情。

通过单选按钮选择登录用户类型。

实例071 使用复选框选择你所喜欢的运动

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\071

实例说明

浏览者在填写表单时，有一些内容可以通过让浏览者进行选择的形式来实现。例如常见的网上调查，首先提出调查的问题，然后让浏览者在若干个选项中进行选择。又例如收集个人信息时，要求在个人爱好的选项中进行选择等。本实例将在页面中使用复选框，选择你所喜欢的运动。实例运行结果如图4.4所示。

图4.4 在页面中使用复选框

技术要点

本实例主要应用表单元素中的复选框。复选框能够进行项目的多项选择，以一个方框表示。具体语法如下：

<input type="checkbox"name="field_name" checked value="value">

参数说明如下：

● checked：表示此项为默认选中。

● value：表示选中项目后传送到服务器端的值。

实现过程

创建index.html文件，在文件中创建表单，在表单中定义6个复选框，分别代表6种不同的运动项目，代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>选择你所喜欢的运动</title>

</head>

<body>

<form>

<h3 align="center">选择你所喜欢的运动</h3>

<input type="checkbox" name="hobby" value="跑步">跑步

<input type="checkbox" name="hobby" value="游泳">游泳

<input type="checkbox" name="hobby" value="篮球">篮球<br/>

<input type="checkbox" name="hobby" value="乒乓球">乒乓球

<input type="checkbox" name="hobby" value="登山">登山

<input type="checkbox" name="hobby" value="滑冰">滑冰

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

使用复选框选择你所喜欢的兴趣爱好。

使用复选框选择你所从事的职业。

实例072 使用文件域来上传图片

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\072

实例说明

文件域在上传文件时经常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。本实例将创建一个上传图片的页面，并使用文件域来上传图片。运行本实例，当单击“浏览”按钮时会弹出窗口，要求用户选择要上传的文件，运行结果如图4.5所示。

图4.5 使用文件域上传图片

技术要点

本实例主要应用表单元素中的文件域。在设置电子邮件的附件、上传头像、发送文件时常常会看到这一控件。具体语法如下：

<input type="file" name="field_name">

参数field_name表示文件域的名称。

实现过程

创建index.html文件，在文件中创建表单，在表单中定义文件域来上传图片，代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>图片上传页面</title>

</head>

<body>

<center>

<form>

<h3 align="center">图片上传</h3>

请选择图片：<input type="file" name="photo"/>

</form>

</center>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

使用文件域上传网页文件。

使用文件域上传电子邮件的附件。

实例073 使用文本域创建一个留言板页面

本实例可以提高工作效率

实例位置：光盘\mingrisoft\04\073

实例说明

在HTML中还有一种特殊定义的文本样式，称为文本域。它与普通文本框的区别在于可以添加多行文字，从而可以输入更多的文本。这类控件在一些留言板中最为常见。本实例将通过使用文本域创建一个留言板页面。实例运行结果如图4.6所示。

图4.6 创建留言板页面

技术要点

本实例主要应用表单元素中的文本域标记<textarea>。其具体语法如下：

<textareaname="textname" value="text_value"rows=rows_valuecols=cols_valuevalue="value"></textarea>

这些属性的含义如表4.3所示。

表4.3 文本域标记属性

实现过程

创建 index.html文件，在文件中创建表单，在表单中定义一个文本框用来输入留言标题，再定义一个文本域用来输入留言内容，代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>留言板页面</title>

</head>

<body>

<form>

<h3 align="center">留言板</h3>

留言标题：<input type="text" name="username" size=30><br/><br/>

<!--设置一个文本域，设置该文本域的行数为5列数为50-->

留言内容：<textareaname="word"rows=5 cols=50></textarea>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在文本域中显示用户注册的服务条款。

为文本域设置CSS样式。

实例074 创建一个用来做学生业余生活调查的页面

本实例可以提高工作效率

实例位置：光盘\mingrisoft\04\074

实例说明

菜单列表类的控件主要用来选择给定答案中的一种，这类选择往往答案比较多，使用单选按钮比较浪费空间。可以说，菜单列表类的控件主要是为了节省页面空间而设计的。本实例将通过菜单列表标记<select>和<option>创建一个用来做学生业余生活调查的页面。实例运行结果如图4.7所示。

图4.7 学生业余生活调查

技术要点

本实例主要是通过菜单列表标记<select>和<option>来实现的。

菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮展开菜单后才能看到全部的选项。而列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。具体语法如下：

<select name="select_name" size=select_sizemultiple>

<option value="option_value"selected>选项</option>

<option value="option_value">选项</option>

</select>

这些属性的含义如表4.4所示。

表4.4 菜单和列表标记属性

续表

实现过程

创建 index.html文件，在文件中创建表单，在表单中分别定义一个菜单和列表，完成学生业余生活调查页面的设计。具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>学生业余生活调查页面</title>

</head>

<body>

<form>

<h3>学生业余生活调查</h3>

调查人姓名：<input type="text" name="username" size="10"/><br>

喜欢吃哪种快餐：

<select name="eat">

<option value="肯德基"selected>肯德基</option>

<option value="麦当劳">麦当劳</option>

<option value="德克士">德克士</option>

<option value="必胜客">必胜客</option>

</select>

爱好的体育运动：<select name="hobby" multiple="multiple">

<option value="跑步"selected>跑步</option>

<option value="游泳">游泳</option>

<option value="篮球">篮球</option>

<option value="滑冰">滑冰</option>

</select>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

创建用来显示出生年月日的下拉菜单。

创建一个带有预选值的下拉列表。

实例075 让密码域更安全

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\075

实例说明

虽然在密码域中已经将输入的字符以掩码形式显示了，但是它并没有实现真正保密，因为用户可以通过复制该密码域中的内容，并将复制的密码粘贴到其他文档中，查看密码的“真实面目”。为实现密码的真正安全，可以将密码域的复制功能屏蔽，同时改变密码域的掩码符号。运行本实例，输入密码并选中所输入的密码，再单击鼠标右键时，可以发现原来的复制菜单项变为灰色即为不可用状态，并且复制快捷键<Ctrl+C>也不可用。实例运行结果如图4.8所示。

图4.8 让您的密码域更安全

技术要点

本实例主要是通过控制密码域的 oncopy、oncut、onpaste 事件来实现密码域的内容禁止复制的功能，并通过改变其style样式属性来实现改变密码域中掩码的样式。

实现过程

（1）在页面中添加密码域，代码如下：

<input name="txt_passwd" type="password" class="textbox" id="txt_passwd"size="12" maxlength="50">

（2）添加代码，禁止用户复制、剪切和粘贴密码，代码如下：

<input name="txt_passwd" type="password" class="textbox" id="txt_passwd"size="12" maxlength="50" oncopy="returnfalse"oncut="return false"onpaste="return false">

（3）改变密码域的掩码样式，将style属性中的“font-family”设置为“Wingdings”，代码如下：

<input name="txt_passwd" type="password" class="textbox" id="txt_passwd"size="12" maxlength="50" oncopy="returnfalse"oncut="return false"onpaste="return false"style="font-family:Wingdings;">

举一反三

根据本实例，读者可以进行以下操作。

在注册页面中使用安全的密码域。

在登录页面中使用安全的密码域。

实例076 制作个人信息页面

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\076

实例说明

本实例应用表单以及常用表单元素创建一个录入个人信息的页面。实例运行结果如图 4.9所示。

图4.9 个人信息页面

技术要点

本实例中主要应用的表单元素有文本框、单选按钮、下拉菜单、复选框和文本域。关于这些表单元素的介绍请参考前面的实例，这里不再赘述。

实现过程

创建index.html文件，在文件中创建一个form表单，在表单中添加文本框、单选按钮、下拉菜单、复选框、文本域、提交按钮和重置按钮，并应用表格对表单元素进行合理的布局。关键代码参考如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>输入个人信息</title>

<styletype="text/css">

<!-

body,td,th {

font-size: 12px;

padding: 5px;

}

-->

</style>

</head>

<body>

<formid="form1" name="form1" method="post" action="">

<tablewidth="503"border="0"align="center" cellspacing="1"bgcolor="#BBBBBB">

<tr>

<tdheight="46"colspan="2"bgcolor="#DDDDDD"><fontcolor="#333333"size="+2">请输入你的个人信息</font></td>

</tr>

<tr>

<td width="82"height="20"align="right"bgcolor="#DDDDDD">姓名：</td>

<tdwidth="414"height="20"bgcolor="#DDDDDD"><inputtype="text"name="name"/></td>

</tr>

<tr>

<td height="20"align="right"bgcolor="#DDDDDD">性别：</td>

<tdheight="20"bgcolor="#DDDDDD"><inputtype="radio" name="sex"value="男"/>男

&nbsp;&nbsp;<input type="radio" name="sex" value="女"/>女</td>

</tr>

<tr>

<td height="20"align="right"bgcolor="#DDDDDD">学历：</td>

<td height="20"bgcolor="#DDDDDD">

<select name="edu">

<option value="">高中</option>

<option value="">专科</option>

<option value=""selected="selected">本科</option>

<option value="">硕士</option>

<option value="">博士</option>

</select>

</td>

</tr>

<tr>

<td height="20"align="right"bgcolor="#DDDDDD">爱好：</td>

<tdheight="20"bgcolor="#DDDDDD"><inputtype="checkbox"name="interest[]"value="看电影"/>看电影

<input type="checkbox" name="interest[]" value="听音乐"/>听音乐

<input type="checkbox" name="interest[]" value="演奏乐器"/>演奏乐器

<input type="checkbox" name="interest[]" value="打篮球"/>打篮球

<input type="checkbox" name="interest[]" value="看书"/>看书

<input type="checkbox" name="interest[]" value="上网"/>上网</td>

</tr>

<tr>

<td height="20"align="right"bgcolor="#DDDDDD">地址：</td>

<tdheight="20"bgcolor="#DDDDDD"><inputtype="text"name="address"/></td>

</tr>

<tr>

<td height="20"align="right"bgcolor="#DDDDDD">电话：</td>

<tdheight="20"bgcolor="#DDDDDD"><inputtype="text"name="tel"/></td>

</tr>

<tr>

<td height="20"align="right"bgcolor="#DDDDDD">qq：</td>

<tdheight="20"bgcolor="#DDDDDD"><inputtype="text" name="qq"/></td>

</tr>

<tr>

<td align="right"valign="top"bgcolor="#DDDDDD">自我评价：</td>

<td bgcolor="#DDDDDD"><textareaname="comment"cols="30"rows="5"></textarea></td>

</tr>

<tr>

<td bgcolor="#DDDDDD">&nbsp;</td>

<tdbgcolor="#DDDDDD"><inputtype="submit"name="Submit"value="提交"/>

<input type="reset" name="Submit2" value="重置"/></td>

</tr>

</table>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

应用表单元素制作一个详细的注册页面。

应用表单元素制作一个商品信息添加页面。

上一章目录下一章