March 24th, 2006
利用fieldset来应付xhtml 1.1
Category: CSS, Author: Nicky, Popularity: 8%
fieldset（Defines a fieldset）定义域集，用于设定输入框和相应的说明文本，使用户可以利用input等元素借助该输入框输入所需的数据信息。它会在域集包含的文本和其它元素外面绘制一个方框。配合legend（域标题）的使用就可以达到我每篇文章后面“Google | AdSense for content”那样的效果。
在XHTML 1.1的规范下“input”、“textarea”、“select”这些表单元素必需在外面定义一个Tag，那我们就选用”fieldset”来定义它们，但是默认fieldset在IE和Firefox等浏览器下都会显示一个外框，如果你只是为了符合标准而不想显示它，可以在CSS里面定义一个fieldset { margin: 0; padding: 0; border: none;}。当然这是一个为了标准而使用fieldset的方法，fieldset在其他方面是一个必不可少的重要元素，所以W3C很重视它的存在。
例如这个是通不过XHTML 1.0 Strict和XHTML 1.1标准的：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fieldset的应用</title>
</head>
<body>
<form action="#">
<select name="menu1"><option>fieldset的应用</option></select>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fieldset的应用</title>
</head>
<body>
<form action="#">
<select name="menu1"><option>fieldset的应用</option></select>
</form>
</body>
</html>
而这样就可以轻松通过（点击查看W3C校验结果）：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fieldset的应用</title>
<style type="text/css">fieldset { margin: 0; padding: 0; border: none;}</style>
</head>
<body>
<form action="#">
<fieldset><select name="menu1"><option>fieldset的应用</option></select></fieldset>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fieldset的应用</title>
<style type="text/css">fieldset { margin: 0; padding: 0; border: none;}</style>
</head>
<body>
<form action="#">
<fieldset><select name="menu1"><option>fieldset的应用</option></select></fieldset>
</form>
</body>
</html>
Tags：fieldset, xhtml.
评论数量(2) | Add Comments
本文网址：http://www.osxcn.com/css/fieldset-xhtml-11.html
看看 WP 的安全性如何.. ^0^
啊啊啊