什么是表单元素呢？在注册功能中，输入用户名、输入口令、输入生日、选择学历、选择地区、输入地址信息的输入框、下拉框、单选按钮都是表单元素。之所以能够显示成我们看到的样子是因为他们对应的是html代码。要完成输入功能，需要使用HTML语言提供的这些表单元素，下面介绍常用的表单元素。
在注册功能中，输入用户名和生日的输入框，就是单行文本框。需要输入少量信息的时候应该使用单行文本框。
基本语法格式如下：
<input type="text" name="输入信息的名字" value="输入信息的值">
其中，属性type用于确定表单元素的类型，后面我们会看到很多表单元素的格式非常类似，值为“text”表示这是一个单行文本框，属性name的值表示要输入的信息的名字，属性value的值表示这个文本框的值，通常不需要value属性，它的值一般是让用户输入的。如果需要给这个输入框默认值，可以使用这个属性给定默认值。
在注册功能中，输入用户名的代码为：
<input type="text" name="username">
用户名对应的文本框的名字是username，服务器在获取用户输入的信息的时候会使用这个名字。
在注册功能中，输入生日的代码为：
<input type="text" name="birthday" value="1988-1-1">
该文本框的名字是birthday，并且使用value指定它的值为“1988-1-1”，如果用户不修改这个值，它将作为用户生日的默认值。
请记住：<input type="text">表示单行文本框，name用于指定元素的名字，value可以指定默认值。
注意：name属性的值不能与其它表单元素的值相同，也就是不能出现同名的表单元素。
在注册功能设置密码的时候使用两个密码框。通常在设置密码和身份验证的时候会使用密码框。密码框的特点是在输入信息之后，界面上并不显示用户输入的信息，而是显示“*”号或者“.”。但是用户提交给服务器的信息不是“*”号或者“.”。
密码框的基本格式如下：
<input type="password" name="输入信息的名字" value="输入信息的值">
这个格式与单行文本框非常类似，不同的是type属性的值，这里type属性的值为“password”，说明这个表单元素是密码框，另外两个属性的作用与单行文本框完全相同。
请记住：密码框与单行本文框的区别是，密码框对应的type的值为“password”。
注意：只要是设置密码就应该让用户输入两遍密码。因为输入密码之后显示“*”号，这样如果用户输入错误了，用户也不知道输入错误，以后使用就麻烦了。如果输入两遍则可以解决这个问题，因为只有两次输入了相同的错误内容才可能将错误密码设置成功，而出现两次相同的错误的概率非常低。
在注册功能中，用户选择学历使用的是单选按钮，并且是多个单选按钮，每个选项对应一个单选按钮，用户只能选择其中一个，这多个单选按钮的格式相同。如果用户要输入的信息只有少数几种可能，这时候应该使用单选按钮。
单选按钮的基本格式如下：
<input type="radio" name="输入信息的名字" value="输入信息的值">显示的信息
与单行本文框格式基本相同，type属性的值为“radio”，说明这个表单元素是单选按钮。name仍然是元素的名字，value属性的值是这个单选按钮的值。这个值不会显示给用户，用户能够看到的是标签后面的部分。
单选按钮通常不独立出现，每一种可能的选项就对应一个单选按钮，每个单选按钮对应一个不同的值，用户选择哪个单选按钮，哪个单选按钮的值就可以传递到服务器。
注册功能中，用户选择学历对应的代码如下：
<input type="radio" name="degree" value="1">专科
<input type="radio" name="degree" value="2" checked>本科
<input type="radio" name="degree" value="3">硕士研究生
<input type="radio" name="degree" value="4">博士研究生
这里学历有4个选项，所以有4个单选按钮，且这4个单选按钮的名字是相同的。用户会在4种情况中选择一个，所以这4个单选按钮的值不同，分别是1、2、3和4。用户看不到单选按钮的值，用户看到的是每个标签后的文字，专科、本科、硕士研究生、博士研究生等。如果用户选择专科，得到的值将是1，如果用户选择的是本科，得到的值将是2…
请记住：单选按钮的基本格式与输入框基本相同，不同的是type对应的值为“radio”。有多少个可能的选项就需要多少个单选按钮。如果需要使用默认值，使用checked。
注意两点：
u 一组单选按钮的名字必须相同，但是值不同。
u 单选按钮的值与用户看到的在界面上显示的信息没有关系。
复选框与单选按钮非常类似，相同的地方：
n 一般都不单独出现，而是成组出现。
n 同一组复选框或者单选按钮的名字相同。
n 必须指定值。
n 选择哪一个选项，得到的是这个选项对应的值。
n 每个选项的值和显示给用户看的信息是独立的。
不同的地方：
n 单选按钮对应的type属性的值是“radio”，而复选框对应的type属性的值是“checkbox”。
n 单选按钮只能选择一个，而复选框能选择多个。
注册功能中没有使用到复选框，下面是一个复选框的例子，用于选择个人的爱好。因为个人的爱好可以是多个，所以允许多选，应该使用复选框。
<input type="checkbox" name="like" value="1">运动
<input type="checkbox" name="like" value="2">看电影
<input type="checkbox" name="like" value="3">听音乐
<input type="checkbox" name="like" value="4">读书
type的值为checkbox，说明这些元素是复选框。4个复选框的名字都是like，所以这是一组复选框。4个复选框的值不同，分别是1、2、3和4。而用户看到的则是运动、看电影、听音乐和读书。
在注册功能中，地区的选择使用了下拉框，可以从地区中选择一个地区。在这个例子中，只允许选择一个，在有些情况下，下拉框可以进行多选。所以，从功能上来说，下拉框具有单选按钮和复选框两者的功能。
下拉框的基本格式：
<select name="下拉框的名字" [multiple] [size=n]>
<option value="值1" [selected]>值1</option>
<option value="值2" [selected]>值2</option>
<option value="值3" [selected]>值3</option>
<option value="值4" [selected]>值4</option>
...
<option value="值n" [selected]>值n</option>
</select>
从这个格式可以看出，下拉框与前面的几个表单元素的格式完全不同。下拉框有两部分组成：第一部分是下拉框本身；第二部分是多个下拉框选项。
下拉框本身的开始标志是<select name…>，结束标志是</select>。在开始标志中，name表示下拉框的名字，是必须的，与前面介绍的其他元素的名字的作用相同。multiple属性用于确定下拉框中的元素是否允许多选，如果允许多选，需要写这个属性，如果不允许多选，则不用写，默认是单选。size属性用于确定下拉框的显示形式，如果size等于1，采用下拉框的形式；如果size大于1，采用具有滚动条的列表框的形式。默认情况下是下拉框的形式。
下拉框中的每个选项对应一个option标签，开始标志是<option…>，结束标志是</option>，中间是显示给用户的选项。在开始标志中，可以使用value指定这个选项的值，与单选按钮和复选框的用法类似。另外在开始标志中，可以使用selected属性，如果使用这个属性，表示整个选项被选上了。如果想设定当前选项为默认选项，可以使用selected属性。
注册功能中，地区选择所使用的下拉框的代码如下：
<select name="下拉框的名字">
<option value="华东" selected>华东</option>
<option value="华南">华南</option>
<option value="华北">华北</option>
<option value="东北">东北</option>
<option value="东南">东南</option>
<option value="西南">西南</option>
<option value="西北">西北</option>
<option value="东北">东北</option>
<option value="华中">华中</option>
</select>
这个下拉框只允许单选，并且是以下拉框的形式显示，默认选项是“华东”。
注意：下拉框选项中的值和显示给用户的值可以不相同。
文本域主要用于输入多行文字，如果输入的文字比较多的时候，可以采用文本域。
文本域的基本格式如下：
<textarea rows="8" name="名字" cols="40">默认值</textarea>
该标签由3部分组成：包括开始标志<textarea…>，标签的默认值，结束标志</textarea>。在标签的开始标志中，name属性的作用同样是指出表单元素的名字，使用rows指定文本域的行数，使用cols指定文本域的列数。
注册功能中，输入备注采用的就是文本框。代码如下：
<textarea rows="8" name="comment" cols="40">默认值</textarea>
注意：文本域不是通过value属性赋值，而是把值写在开始标志和结束标志之间。
点击重置按钮可以把所有的输入信息取消，让输入界面恢复到最初的状态。在注册界面中，如果用户在输入过程中不想使用已经输入的信息了，可以把已经输入的信息全部删除。但是，如果点击重置按钮一下就可以完成这个任务。
重置按钮的基本格式如下：
<input type="reset" value="重置">
与单行文本框的语法非常相似，重置按钮的type值为reset。另外，在这个格式中没有看到name属性，这里把name属性省略了，因为这个表单元素比较特殊，特殊的地方在于它不是用于提交信息的，所以不用给出名字，系统会给一个默认名字。value属性指出这个按钮上显示的内容。
注意：重置按钮并不是清空所有的信息，而是把所有的元素恢复到默认值。
只要涉及提交信息，都应该提供一个提交按钮，当点击提交按钮的时候，用户输入的信息将提交给服务器，意味着输入过程的结束。注册界面中也包含一个提交按钮。
提交按钮的基本格式如下：
<input type="submit" value="提交">
提交按钮与重置按钮的格式基本相同，并且提交按钮也比较特殊。提交按钮本身可以完成信息的提交，但是提交按钮本身的信息通常没有用，所以也不关心提交按钮的名字，value的值是提交按钮上面显示的内容。
实例
注册界面。
<table align="center">
<tr>
<td> 用户ID：</td>
<td><input type="text" name="userid">6-8位 </td>
</tr>
<tr>
<td> 用户名：</td>
<td><input type="text" name="username">2-10位</td>
</tr>
<tr>
<td> 口令：</td>
<td><input type="password" name="userpass">6-8位，不能与用户ID相同</td>
</tr>
<tr>
<td> 确认口令：</td>
<td><input type="password" name="userpass2"></td>
</tr>
<tr>
<td> 生日：</td>
<td><input type="text" name="birthday">格式为：1988-1-1</td>
</tr>
<tr>
<td> 学历：</td>
<td>
<input type="radio" name="degree" value="专科">专科
<input type="radio" name="degree" value="本科" checked>本科
<input type="radio" name="degree" value="硕士研究生">硕士研究生
<input type="radio" name="degree" value="博士研究生">博士研究生
<input type="radio" name="degree" value="其他">其他
</td>
</tr>
<tr>
<td> 地区：</td>
<td>
<select name="local">
<option value="华东">华东</option>
<option value="华南">华南</option>
<option value="华北">华北</option>
<option value="东北" selected>东北</option>
<option value="东南">东南</option>
<option value="西南">西南</option>
<option value="西北">西北</option>
<option value="华中">华中</option>
</select>
</td>
</tr>
<tr>
<td> E-mail:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td> 地址：</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td> 电话：</td>
<td><input type="text" name="phone">
数字和连字符，例如88223322-123</td>
</tr>
<tr>
<td> 备注：</td>
<td> <textarea rows="8" name="comment" cols="40"></textarea></td>
</tr>
<tr>
<td> <input type="reset" value="重置"></td>
<td> <input type="submit" value="提交"></td>
</tr>
</table>
上一讲： 第十讲 Web应用输入概述
下一讲：第十二讲 form元素的使用