下载掌阅APP，畅读海量书库
立即打开
文本域是最为常用的表单类型，使用“input”表示。另外，对于文本域表单，在HTML 5中也提供了很多不同的输入类型，输入类型使用“type”定义。下面分别介绍演示。
text类型的文本域是最常见的文本域类型，表示如下：
text文本框：<input type='text' name='test'>
网页展现结果如图8-1所示。
图8-1 text文本框
color类型的表单将会调出拾色器用于选取颜色，例如：
color：<input type='color' name='test'>
当用鼠标点中表单时将会调出拾色器，结果如图8-2所示。
图8-2 color类型文本框
date类型允许从一个日期选择器选择一个日期，例如：
生日: <input type="date" name="bday">
当鼠标移动到表单点选时效果如图8-3所示。
图8-3 date类型表单
datetime类型允许你选择一个日期（UTC时间），例如：
生日 (日期和时间): <input type="datetime" name="bdaytime">
效果如图8-4所示。
图8-4 datetime类型
email类型用于应该包含email地址的输入域，例如：
<form action="demo-form.php">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
当单击Submit按钮时，程序会对email表单进行验证，若不符合email格式，则会给出如图8-5所示的提示。
图8-5 email表单类型
month类型允许选择一个月份，不包含日期，例如：
生日(月和年): <input type="month" name="bdaymonth">
效果如图8-6所示。
图8-6 month类型表单
number类型用于应该包含数值的输入域，并且还能够设定对所接收的数字的限定，也可设置步进长度，例如：
数量（1～10，步进为3）<input type="number" name="quantity" min="1" max="10" step="3">
此文本域中数量从1开始，每次可以增加3，最大不超过10，所以可取值为1、4、7、10。效果如图8-7所示。
图8-7 number类型
range类型用于应该包含一定范围内数字值的输入域，显示为滑动条，例如：
<input type="range" name="points" min="1" max="10">
效果如图8-8所示。
图8-8 range类型
search类型用于搜索域，比如站点搜索或Google搜索，例如：
Search Google: <input type="search" name="googlesearch">
其和普通文本框text表现形式一致。
tel类型表单定义输入电话号码字段，例如：
电话号码: <input type="tel" name="usrtel">
表现形式和text文本框一致。
url类型用于应该包含URL地址的输入域。在提交表单时，会自动验证url域的值，例如：
<form action="demo-form.php">
添加你的主页: <input type="url" name="homepage"><br>
<input type="submit">
</form>
效果如图8-9所示。
图8-9 url类型
week类型允许选择周和年，例如：
<input type='week'>
效果如图8-10所示。
图8-10 week类型
除了文本域之外，HTML中还提供了很多其他类型的表单。
密码字段通过标签<input type="password">来定义：
<form>
Password: <input type="password" name="pwd">
</form>
浏览器显示效果如图8-11所示。
图8-11 密码字段表单
注意：密码字段字符不会明文显示，而是以星号或圆点替代的。
<input type="radio">标签定义了表单单选框选项。如下代码定义了一组单选按钮：
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
效果如图8-12所示。
图8-12 单选按钮
一组单选按钮的name应该保持一致。
<input type="checkbox">标签定义了复选框。用户需要从若干给定的选择中选取一个或若干选项。下面的示例定义了一组复选框。
<input type="checkbox" name="vehicle" value="Bike">bike
<input type="checkbox" name="vehicle" value="Car">car
效果如图8-13所示。
图8-13 复选框
<input type="submit">定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。在介绍文本域的时候已经用到过提交按钮。如下代码定义一个完整的带提交按钮的表单。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
效果如图8-14所示。
图8-14 提交按钮
下拉框使用select标签定义。如下代码定义一组下拉框。
<select name="car">
<option value="volvo" >Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes" >Mercedes</option>
<option value="audi" >Audi</option>
</select>
效果如图8-15所示。
图8-15 下拉框
使用HTML表单可上传文件到服务器，用PHP接收处理。HTML中使用type="file"来定义文件域表单，例如：
<input type="file">
在Chrome浏览器中的效果如图8-16所示。在不同的浏览器中显示的样式会有所不同。
图8-16 文件域