- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 8字
- 2024-12-21 21:58:36
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>
<!--设置表示年龄的文字域长度为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>
用 户 名：<input type="text" name="username" size=15><br>
密 码：<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="男"/>男
<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"> </td>
<tdbgcolor="#DDDDDD"><inputtype="submit"name="Submit"value="提交"/>
<input type="reset" name="Submit2" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
应用表单元素制作一个详细的注册页面。
应用表单元素制作一个商品信息添加页面。