当前位置:园子博客 » Xhtml » 语义化表单里的标签

语义化表单里的标签

2月 27th, 2009 | Filed under Xhtml | 共有6,773次浏览

表单是用户提交信息的重要渠道,是(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>

效果如下图所示:

form_1.gif

当然,这只是最初的样式,我们可以通过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下的截图,注意虚线框的不同。

form_2.gif

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>

效果如图:

form_3.gif

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

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

 效果如图:

form_4.gif

这时,<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>

效果如图: 

form_5.gif

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

目前还没有任何评论.
您必须在 登录 后才能发布评论.