表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入的信息，我们经常会用到表单，那么你明白表单里的每个标签的正确语义吗？今天园子给大家分享一下表单里一些常用标签的使用方法。

form标签的使用

form是用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。

fieldset & legend标签的使用

fieldset用于对表单中的元素进行分组，而在<fieldset>这个组内，<legend>就是它的标题，用于描述<fieldset>所包含的内容。一般可视化浏览器把<fieldset>渲染为带边框的，<legend>一般显示在左上角。要注意的一点是，<legend>元素必须是<fieldset>内的第一个元素，否则<legend>前面的内容将出现在<fieldset>前面，而不是在里面。
fieldset元素不仅仅适用于大块的内容分组，也可以用于选项的分组，就像这样：

1
2
3
4
5
6
7

<fieldset>
<legend>个人爱好</legend>
<input type=”checkbox” id=”likeSleep” name=”like”/>
<label for=”likeSleep”>睡觉</label>
<input type=”checkbox” id=”likeEat” name=”like” />
<label for=”likeEat”>吃饭</label>
</fieldset>

效果如下图所示：

当然，这只是最初的样式，我们可以通过css重新定义它的外观。

label标签的使用

HTML 4.0引入了label对象，你可以使用它将文本与其他任何(X)HTML对象或内部控件关联。无论用户单击<label>或者(X)HTML 对象，被链接的<label>和(X)HTML对象在引发和接收事件时行为一致，而要连接<label>和(X)HTML对象的方式是：将<label>的for属性设置为要关联的(X)HTML对象的id属性。例如：

<label for=”username”>用户：</label><input type=”text” id=”username” name=”username” />

当用户单击<label>内的文本（用户：）时，<label>会将焦点设置到文本框。
<label>主要是给表单组件增加可访问性设计的，一般我们都把 label 用在表单里。除以上方法，还可以直接用 label 套嵌整个表单组件和文本标签，例如下面的例子：

1
2

<label for=”likeSleep”><input type=”checkbox” id=”likeSleep” name=”like”/>睡觉</label>
<label for=”likeEat”><input type=”checkbox” id=”likeEat” name=”like” />吃饭</label>

下图左边为单击“睡觉”在Firefox下选中复选框的，右边是在IE下的截图，注意虚线框的不同。

input标签的使用

这个是在表单里应用得最多的一个标签，一个由属性值来决定标签的意义的标签。基本结构是：

<input type=”…” id=”…” name=”…” value=”…” />

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。下面列举了一些input常用的几种类型。

• type=”password”
  密码输入框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被“*”代替，而输入的文字会被隐藏。
• type=”checkbox”
  复选框复选框允许在待选项中选中一项以上的选项。
• type=”radio”
  单选框当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
• type=”file”
  文件上传框有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮（语言是中文的浏览器）。
• type=”hidden”
  隐藏域元素不会显示在文档里，所以用户也无法操作该元素。该元素通常用来传输一些客户端到服务器的状态信息。虽然此元素不会显示出来，但是用户通过查看 (X)HTML 的源代码还是可以看到该元素属性的值，所以请注意，不要用该元素传递敏感信息，例如密码。
• type=”image”
  创建一个图像控件，该控件单击后将导致表单立即被提交，并且会提交点击该元素的坐标，例如： 

  <input type=”image” name=”test” src=”test.gif” mce_src=”test.gif” />

  将把x坐标以test.x 、y 坐标以test.y提交，就是在name后面加个.x和.y组成两个新的name，value的任何属性值都将被忽略，src 属性指定了img元素。

• type=”button”
  这是一个普通的按钮，它的值并不会提交，而是显示在按钮上，如果没有通过JavaScript给其添加操作时，它将是个普通的可视元素。
• type=”submit”
  提交按钮，将表单（Form）里的信息提交给表单里action属性所指向的地址。如果用户单击提交按钮提交了表单，并且按钮指定了 name 标签属性，那么该按钮也将在提交的数据中。
  如果在同一表单中有多个<input type=”submit” …/> 按钮， 按回车键将使用第一个<inputtype=”submit” …/>按钮提交表单，除非此时正有另一个<input type=”submit” ../>按钮获得了焦点。如果另外一个<input type=”submit” …>按钮已获得焦点，按回车键将使用该<input type=”submit” …>按钮提交表单，为什么有可能是多个提交按钮呢？因为type=”submit”的值也是可以提交的。
• type=”reset”
  重置按钮，默认的文字是“重置”。可以通过value属性指定文字。该按钮单击后将重置表单控件为其默认值。

在<input>的属性里，name和id并非必须的，name是由表单处理用，而id是给label做连接用，value的显示是因类型而异：type=”text”的直接显示于文本框内；type=”password”的以星号代替value的值；type=”checkbox”、type=”radio”的无法直接在页面上看到；type=”file”的因安全问题，无默认的value，即使你给它添加了value，也会被忽略；type=”hidden”的因为本身已经隐藏，自然也没显示；type=”image”的并无value值，它是由用户点击时实时创建的；type=”button”、type=”submit”、type=”reset”这三种类型的input的value属性指定了显示在按钮上的文字。

textarea标签的使用

多行文本输入框，也是一种让访问者自己输入内容的表单对象，接受的内容比单行文本输入框更多。例如：

<textarea id=”…” name=”…” cols=”…” rows=”…” wrap=”…”>多行文本输入框的内容是写在这里面</textarea>

其中cols属性定义多行文本框的宽度，单位是单个字符宽度（注：Firefox默认没有滚动条，所以得到额外的宽度）；rows属性定义多行文本框的高度，单位是单个字符高度（IE浏览器是计算单个字符宽度）；wrap属性定义输入内容大于文本域时显示的方式，可选值如下：

• 默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
• off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；
• virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
• physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

select & optgroup & option标签的使用

下拉选择框或列表框，是不是听起来很奇怪呢？没错，<select>也是一个由属性决定表现的，同时，这个属性也是CSS无法代替的，它就是size。例如：

1
2
3
4
5

<select id=”…” name=”…” >
<option value=”…”>传说中的测试1</option>
<option value=”…”>传说中的测试2</option>
<option value=”…”>传说中的测试3</option>
</select>

效果如图：

这种就是默认的下拉选择框，而给添加了size属性的会是怎样呢？

1
2
3
4
5

<select id=”…” name=”…” size=”4″ >
<option value=”…”>传说中的测试1</option>
<option value=”…”>传说中的测试2</option>
<option value=”…”>传说中的测试3</option>
</select>

 效果如图：

这时，<select>变成了列表框，size是决定列表框的行数，当然，我们可以再通过CSS重新定义他的高度。optgroup标签可以给<select>的options分类，需要使用一个label属性，在可视化浏览器里，它的属性值会在下拉列表里显示为一个不可选的标题。

1
2
3
4
5
6
7
8

<select id=”…” name=”…”>
<optgroup label=”传说中的分组1″ >
<option value=”…”>传说中的测试1</option>
<option value=”…”>传说中的测试2</option>
<optgroup label=”传说中的分组2″ />
<option value=”…”>传说中的测试3</option>
</optgroup>
</select>

效果如图： 

option就是选择中的内容了，value属性值并不会在浏览器显示，它只是作为提交数据的值。

作者：园子 yzznl.cn