浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件，其基本语法格式如下：
为了使初学者更好地理解不同的input控件类型，下面对它们做一个简单的介绍。
1.单行文本输入框<input type="text" />
单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。
2.密码输入框<input type="password" />
3.单选按钮<input type="radio" />
单选按钮用于单项选择，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。
4.复选框<input type="checkbox" />
复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项。
5.普通按钮<input type="button" />
普通按钮常常配合javaScript脚本语言使用，初学者了解即可。
6.提交按钮<input type="submit" />
提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用value属性，改变提交按钮上的默认文本。
7.重置按钮<input type="reset" />
当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性，改变重置按钮上的默认文本。
8.图像形式的提交按钮<input type="image" />
图像形式的提交按钮用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。
9.隐藏域<input type="hidden" />
隐藏域对于用户是不可见的，通常用于后台的程序，初学者了解即可。
10.文件域<input type="file" />
当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。
为了更好地理解和应用这些属性，接下来通过案例2-35来演示它们的使用，如图2-35所示。
例2-35 example35.html
图2-36 input控件展示说明
不同类型的input控件外观不同，当对它们进行具体的操作时，如输入用户名和密码、选择性别和兴趣等，显示的效果也不一样。例如，当在密码输入框中输入内容时，其中的内容将以圆点的形式显示，而不会像用户名中的内容一样显示为明文。
11．email类型<input type="email" />
email类型的input元素是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。
12．url类型<input type="url" />
url类型的input元素是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。
13．tel类型<input type="tel" />
tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和pattern属性配合使用。
14．search 类型<input type="search" />
search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，例如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。
15．color类型<input type="color" />
color类型用于提供设置颜色的文本框，实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击color类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。
下面通过案例2-36来设置input元素的type属性来演示不同类型的文本框的用法，如图2-37所示。
例2-36 example36.html
图2-37 input类型展示效果
图2-38 number类型的使用
16．number类型<input type="number" />
number类型的input元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。
number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明如下：
value：指定输入框的默认值。
max：指定输入框可以接受的最大的输入值。
min：指定输入框可以接受的最小的输入值。
step：输入域合法的间隔，如果不设置，默认值是1。
下面通过案例2-37来演示number类型的input元素用法，如图2-38所示。
例2-37 example37.html
17. range类型<input type="range" />
range类型的input元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。
18. Date pickers类型<input type= date, month, week…" />
Date pickers类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期，具体如下表所示。
表2-5 时间和日期类型
下面通过案例2-38来演示在HTML5中添加多个input元素，分别指定这些元素的type属性值为时间日期类型，如图2-39所示。
例2-38 example38.html
图2-39时间日期类型的使用
