我想展示一个包含带标签的文本字段的HTML表单,就像这样:
名字: [_____________] 姓氏: [_____________] 出生日期: [________]
我的显而易见的方法是使用一个<TABLE>
,然后将标签和文本字段放在其单元格中,但是否有更好的方法,例如基于CSS的方法?
编辑:
- 我正在寻找一种减少HTML文件冗余的方式。
- 是的,我正在寻找标签的自动大小调整。请参见关于标签换行的相关问题
我想展示一个包含带标签的文本字段的HTML表单,就像这样:
名字: [_____________] 姓氏: [_____________] 出生日期: [________]
我的显而易见的方法是使用一个<TABLE>
,然后将标签和文本字段放在其单元格中,但是否有更好的方法,例如基于CSS的方法?
编辑:
white-space: no-wrap
,并且/或者 - 这是真正的异端邪说 - 在th
标签上使用可靠的nowrap
属性),它们能够很好地处理被缩小的情况,并且它们很容易。将每个标签单元格设置为标题,将每个字段单元格设置为普通单元格。确保标签真的是就可用性而言,如果垂直空间不是限制因素,则每个字段上方都带有标签的字段列表是最快读取和填写的,并且可以美观地完成。有关更多信息,请参见网络上的许多可用性研究,例如 http://www.lukew.com/resources/articles/web_forms.html
我想使用定义列表(<dl>
),因为它们通常是语义上正确的。标签由用户输入定义。对我来说有意义。<dl>
比表格更准确地表达了语义内容。
<dl>
<dt><label for="name>Name</label></dt>
<dd><input type="text" id="name" /></dd>
<dt><label for="email>Email</label></dt>
<dd><input type="text" id="email" /></dd>
</dl>
这里有一个示例
顺便说一句,它们在所有浏览器中都能很好地降级,甚至包括文本浏览器。
display: inline-block
不就可以自动调整大小吗? - Boris Guérywidth:33%
,而不是display:inline-block
(虽然你也需要在dt
中使用它)。这意味着dt
将至少占容器的33%,但长标签会更长,导致错开的外观。当您使标签如此大时(浏览器窗口宽度的~17%),可能并不是很重要,但通常您没有那么多的空间可用。 - T.J. Crowder我认为我做的类似于这样,但也不会自动调整文本的长度,但在我看来更加简洁。
<form>
<label for="firstName">First Name</label>
<input type="textfield" name="firstName" />
<label for="lastName">Last Name</label>
<input type="textfield" name="lastName" />
</form>
label {
float:left;
width:30px;
}
input {
float:left;
margin-left:30px;
}
clear:both
,并为label
和input
都添加display:block
,则此方法效果最佳。 - ccpizza从IE8+开始,您可以使用CSS表格显示来实现此功能:
<!DOCTYPE html>
<html>
<head>
<style>
form > div > label { text-align: right; vertical-align: top }
form { display: table; }
form > div { display: table-row; }
form > div > label,
form > div > textarea,
form > div > input { display: table-cell; }
</style>
</head>
<body>
<form method="post">
<div>
<label for="name">Name</label>
<input type="text" id="name" size="14"/>
</div>
<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>
<div>
<label for="ssn">Social Security Number</label>
<input type="text" id="ssn"/>
</div>
<div>
<label></label>
<input type="submit" value="Send"/>
</div>
</form>
</body>
</html>
form input, form select
{
float: right;
margin-right: 650px;
}
form label
{
float: right;
margin-top: 5px;
margin-right: 10px;
}
form .nofloat
{
float: none;
margin: 0;
}
form br
{
clear: both;
}
并按如下布局
<input type="text" id="name" />
<label for="name">Name</label>
<br />
在这个小而狭窄的代码之上,还有一篇关于使用CSS创建无表格表单的完整文章。
表格的一个问题是空间错误。当您不使用表格时,可以像这样编写标签和输入:
<label for="foo">Blah <input id="foo" type="text"/></label>
适当地封装输入和标签。
另一方面,在表格中,您可以将它们分开:
<td><label for="foo">Blah</label></td><td><input id="foo" type="text"/></td>
这意味着</label>和<input/>之间的区域不响应鼠标点击。
对于普通字段来说还好,但对于单选按钮和复选框来说真的很烦人(或者可能只是我太挑剔了)。
现在,回答你的问题:我认为没有一种好的方法可以在CSS中格式化列(除非列宽已知--你可以用JavaScript实现这个功能...)。所以T.J. Crowder肯定有一个很好的答案。
然而,CSS(和强制宽度)有一个优点,就是我曾经创建过一个非常大的表单,覆盖整个屏幕。所有字段都会出现在一个屏幕上(因为客户想要这样),而CMS没有输出表格。但即使如此,表格也将是一场噩梦,因为所有字段都被放置在不对齐的列中。这在表格中将会非常困难(使用表格作为网格,这将是一个布局表格!)。
更新:
根据下面的评论,singe31表示<input/>
不能定义在<label>
标签内。这是错误的。HTML 4.01 DTD很容易阅读,我们可以看到:
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
<input/>
可以出现在 <label>
标签中,这是完全合法的。http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element
向下滚动一点,直到看到“代码示例”:
代码示例
例如,在点击或按下复选框标签会选中复选框的平台上,单击或按下以下代码片段中的标签可能会触发用户代理运行合成点击激活步骤来激活输入元素,就好像元素本身已被用户触发:
<label><input type=checkbox name=lost> 丢失</label>
在其他平台上,行为可能仅是将控件聚焦或不执行任何操作。
<input>
应该不应该一开始就在 <label>
里面。它要么在前面,要么在后面,绝不能在里面。 - singe3通常情况下,我发现如果不使用表格来创建表单,就会出现一些问题。以下是我无法解决的一般问题:
可能还有一些我忽略的问题,但如果您使用CSS,则最灵活的标记如下:
<div class='form-field'>
<label>Name</label>
<input />
</div>
<div class='form-field'>
<label>Name</label>
<div class='form-inputs'>
<input />
<input />
</div>
</div>
通过上述标记,您可以实现非常灵活的表单,我不会发布CSS,因为它与2列布局非常相似。
我仍然需要坐下来尝试并弄清楚纯CSS表单是否适用于所有场合,但说实话这是非常不可能的!
使用CSS样式表对表单进行样式化是最糟糕的事情。我遇到的唯一主要跨浏览器问题是在样式化FieldSet和Legend元素时。没有真正的黑客,但需要一些工作才能看起来好。
<table/>
,而是停止使用<table/>
来呈现非表格布局。但如果你实际上正在呈现一个表格... 使用<table/>
!这是语义上正确的选择。 - roufamaticth
包含(比如说)“名字:”,接下来的td
包含“Sam”,下一行的th
是“姓氏:”,随后是td
=“Samson”,那么这就是表格数据。那么如果“Sam”和“Samson”是字段,为什么它不是表格数据呢?这是一个有趣的问题...... - T.J. Crowder