5.2 表单基本元素的使用_HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）-QQ阅读女频现言网

书名：HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）
作者名：张工厂
本章字数：1890字
更新时间：2025-02-25 11:36:38

5.2 表单基本元素的使用

表单元素是能够让用户在表单中输入信息的元素，常见的有文本框、密码框、下拉菜单、单选按钮、复选框等。

5.2.1 单行文本输入框text

文本框是一种让访问者自行输入内容的表单对象，通常被用来填写单个字或简短的回答，如用户姓名和地址。代码格式如下：

<input type="text" name="..." size="..." maxlength="..." value="...">

其中，type="text"定义单行文本输入框；name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；size属性定义文本框的宽度，单位是单个字符宽度；maxlength属性定义最多输入的字符数；value属性定义文本框的初始值。

【例5.2】（实例文件：ch05\5.2.html）

<!DOCTYPE html>
<html>
<head><title>输入用户的姓名</title></head>
<body>
<form>
请输入您的姓名：
<input type="text" name="yourname" size="20" maxlength="15"><br />
请输入您的地址：
<input type="text" name="youradr" size="20" maxlength="15">
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-2所示，可以看到两个单行文本输入框。

图5-2 单行文本输入框

5.2.2 多行文本框标记<textarea>

多行文本框标记<textarea>主要用于输入较长的文本信息。代码格式如下：

<textarea name="..." cols="..." rows="..." wrap="..."></textarea >

其中，name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；cols属性定义多行文本框的宽度，单位是单个字符宽度；rows属性定义多行文本框的高度，单位是单个字符高度；wrap属性定义输入内容大于文本域时显示的方式。

【例5.3】（实例文件：ch05\5.3.html）

<!DOCTYPE html>
<html>
<head><title>多行文本输入</title></head>
<body>
<form>
请输入您最新的工作情况<br />
<textarea name="yourworks" cols="50" rows="5"></textarea>
<br />
<input type="submit" value="提交">
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-3所示，可以看到多行文本框。

图5-3 多行文本框

5.2.3 密码域password

密码输入框是一种特殊的文本域，主要用于输入一些保密信息。当网页浏览者输入文本时，显示的是黑点或其他符号，这样就增加了输入文本的安全性。代码格式如下：

<input type="password" name="..." size="..." maxlength="...">

其中，type="password"定义密码框；name属性定义密码框的名称，要保证唯一性；size属性定义密码框的宽度，单位是单个字符宽度；maxlength属性定义最多输入的字符数。

【例5.4】（实例文件：ch05\5.4.html）

<!DOCTYPE html>
<html>
<head><title>输入用户姓名和密码 </title></head>
<body>
<form >
用户姓名：
<input type="text" name="yourname">
<br />
登录密码：
<input type="password" name="yourpw"><br />
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-4所示，输入用户名和密码时可以看到密码以黑点的形式显示。

图5-4 密码输入框

5.2.4 单选按钮radio

单选按钮主要是让网页浏览者在一组选项里只能选其一。代码格式如下：

<input type="radio" name="..." value = "...">

其中，type="radio"定义单选按钮；name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；value属性定义单选按钮的值，在同一组中它们的域值必须是不同的。

【例5.5】（实例文件：ch05\5.5.html）

<!DOCTYPE html>
<html>
<head><title>选择感兴趣的图书</title></head>
<body>
<form >
请选择您感兴趣的图书类型：
<br />
<input type="radio" name="book" value="Book1">网站编程<br />
<input type="radio" name="book" value="Book2">办公软件<br />
<input type="radio" name="book" value="Book3">设计软件<br />
<input type="radio" name="book" value="Book4">网络管理<br />
<input type="radio" name="book" value="Book5">黑客攻防<br />
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-5所示，即可看到5个单选按钮，用户只能选中一个单选按钮。

图5-5 单选按钮

5.2.5 复选框checkbox

复选框主要是让网页浏览者在一组选项里可以同时选择多个选项。每个复选框都是一个独立的元素，必须有一个唯一的名称。代码格式如下：

<input type="checkbox" name="…" value ="…">

其中，type="checkbox"定义复选框；name属性定义复选框的名称，在同一组中的复选框都必须用同一个名称；value属性定义复选框的值。

【例5.6】（实例文件：ch05\5.6.html）

<!DOCTYPE html>
<html>
<head><title>选择感兴趣的图书</title></head>
<body>
<form >
请选择您感兴趣的图书类型：<br />
<input type="checkbox" name="book" value="Book1">网站编程<br />
<input type="checkbox" name="book" value="Book2">办公软件<br />
<input type="checkbox" name="book" value="Book3">设计软件<br />
<input type="checkbox" name="book" value="Book4">网络管理<br />
<input type="checkbox" name="book" value="Book5" checked>黑客攻防<br />
</form>
</body>
</html>

技巧提示

checked属性主要用来设置默认选中项。

在IE 11.0中浏览效果如图5-6所示，即可看到5个复选框，其中【黑客攻防】复选框被默认选中。

图5-6 复选框

5.2.6 选择列表标记<select>

下拉列表主要用于在有限的空间里设置多个选项，它既可以用作单选，也可以用作多选。代码格式如下：

其中，name属性定义选择列表的名称；size属性定义选择列表的行数；multiple属性表示可以多选，如果不设置该属性，则只能单选；value属性定义选择项的值；selected属性表示默认已经选择本选项。

【例5.7】（实例文件：ch05\5.7.html）

在IE 11.0中浏览效果如图5-7所示，列表内显示了3个选项，用户可以按住Ctrl键选择多个选项。

图5-7 选择列表

5.2.7 普通按钮button

普通按钮用来控制其他定义了脚本的处理工作。代码格式如下：

<input type="button" name="..." value="..." onclick="...">

其中，type="button"定义普通按钮；name属性定义普通按钮的名称；value属性定义按钮的显示文字；onclick属性表示单击行为，也可以通过指定脚本函数来定义按钮的行为。

【例5.8】（实例文件：ch05\5.8.html）

在IE 11.0中浏览效果如图5-8所示，单击【单击我】按钮即可将文本框1中的内容复制到文本框2中。

图5-8 单击按钮后的复制效果

5.2.8 提交按钮submit

提交按钮用来将输入的信息提交到服务器。代码格式如下：

<input type="submit" name="..." value="...">

其中，type="submit"定义提交按钮；name属性定义提交按钮的名称；value属性定义按钮的显示文字。通过提交按钮可以将表单里的信息提交给action所指向的文件。

【例5.9】（实例文件：ch05\5.9.html）

<!DOCTYPE html>
<html>
<head><title>输入用户名信息</title></head>
<body>
<form  action="http://www.yinhangit.com/yonghu.asp" method="get">
请输入您的姓名：
<input type="text" name="yourname">
<br />
请输入您的住址：
<input type="text" name="youradr">
<br />
请输入您的单位：
<input type="text" name="yourcom">
<br />
请输入您的联系方式：
<input type="text" name="yourcon">
<br />
<input type="submit" value="提交">
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-9所示，输入内容后单击【提交】按钮，即可将表单中的数据提交到指定的服务器中。

图5-9 提交按钮

5.2.9 重置按钮reset

重置按钮用来清空表单中输入的信息。代码格式如下：

<input type="reset" name="..." value="...">

其中，type="reset"定义重置按钮；name属性定义重置按钮的名称；value属性定义按钮的显示文字。

【例5.10】（实例文件：ch05\5.10.html）

<!DOCTYPE html>
<html>
<body>
<form>
请输入用户名称：
<input type="text">
<br/>
请输入用户密码：
<input type="password">
<br />
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-10所示，输入内容后单击【重置】按钮，即可实现将表单中的数据清空的目的。

图5-10 【重置】按钮