所以我看过许多教程,但仍然没有对这个问题提出一个有凝聚力的答案:标记表单的正确/最佳方法是什么?我有一个由标签,控件组成的逻辑分组元素(输入或选择)和先前的值,即单个字段?
我希望CSS布局将每个分组放在一个新的水平线上。
我见过<div>
封包,<br>
代码,<ul>
,<fieldset>
,<tr>
,什么都没有(即没有标记标记,只有CSS)用于此目的。
除了表单布局的代表不好之外,表格在行的格式需要变化时不是很灵活。并且br
似乎是一个可怕的想法(即使我已经在教程中看到过)。我已经在使用fieldset
来创建表单中字段的逻辑分组,但如果它在语义上比div
更正确,我总是可以使用两个不同的类。 ul
方法似乎很奇怪......外部fieldset
组合了多个字段,为什么我还需要一个ul
来对它们进行分组?
我非常喜欢这个设计中标记的简单性:http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html。但是我很难适应CSS来处理更复杂的字段,例如一个逻辑上属于一起的选择和输入。
所以在这个例子中,我在下面的字段#1和字段#2中包含了什么(如果有的话)?
<form .....>
<fieldset> <legend>Group 1</legend>
<!-- 'field #1' -->
<label for="newName">Name</label>
<input type="text" id="newName">
<!-- oldVal Filled in with Javascript or server-side script -->
<span class="oldVal" id="oldName">Old Name</span>
<!-- 'field #2' -->
<label for="newFood">Favorite Food</label>
<select id="newFood">
<option value="pizza">Pizza</option>
<option value="tacos">Tacos</option>
<option value="other">Other</option>
</select>
<input type="text" id="newFoodOther"> <!-- type here when 'other' is selected -->
<span class="oldVal" id="oldFood">Pizza</span>
</fieldset>
<fieldset> <legend> Group 2</legend>
<!-- more fields here -->
</fieldset>
</form>
最简单的方法是控制表单布局,哪种语义最正确?我是否有幸拥有那些一个人?
答案 0 :(得分:2)
没有单一的正确的方法来语义标记表单。有些方法比其他方法更灵活,但这并不意味着你应该一直选择它们。有时候一点快速标记是最好的。
为了灵活性,我通常使用如下结构:
<form>
<fieldset>
<legend></legend> <!-- optional -->
<label>
<span>Label Text</span>
<input type="..." />
</label>
<!-- repeat -->
<input type="submit" ... />
</fieldset>
</form>
除了CSS的帮助风格,我可能会使用多个标签:
<form>
<fieldset>
<label for="some-id-0">Label Text</label>
<label class="text-label">
<input type="text" id="some-id-0" />
</label>
<label for="some-id-1">Label Text</label>
<label class="password-label">
<input type="password" id="some-id-1" />
</label>
</fieldset>
</form>
但是我可以把它分成一个列表:
<form>
<fieldset>
<dl>
<dt>
<label for="some-id-0">Label Text</label>
</dt>
<dd>
<label class="text-label">
<input type="text" id="some-id-0" />
</label>
</dd>
<dt>
<label for="some-id-1">Label Text</label>
</dt>
<dd>
<label class="password-label">
<input type="password" id="some-id-1" />
</label>
</dd>
</dl>
</fieldset>
</form>
我发现添加更多通用结构元素和类往往会在一定程度上增加灵活性,但是如果你只是想要一个mad-lib形式,你不需要任何结构:
<form>
<p>
Hi, my
<label for="fullName">name</label>
is
<input type="text" id="fullName" name="fullName" placeholder="Full name" />
and I would like to request a copy of
<select id="publication" name="publication">
<option>Super Awesome Newsletter</option>
<option>Even more awesome-er newsletter</option>
<option>Lorem Ipsum weekly</option>
</select>
please send it to
<input type="temail" id="email" name="email" placeholder="email@example.com" />
</p>
<input type="submit" value="Thank you!" />
</form>
最后,语义围绕着您希望表单的读取方式。不幸的是,如果做出重大改变,这意味着重组表格。
答案 1 :(得分:0)
“语义正确”适用于HTML,而不是CSS,我会说你已经覆盖了它。
当然,有多种方法可以对表单进行样式设置,但是如果不添加任何额外的标记,您可以做的一件事就是将标签放入一个“列”并将输入放入另一个“列”:
label {
display: block;
float: left;
clear: left;
width: 150px;
}
input, select {
display: block;
float: left;
width: 150px;
}
http://jsfiddle.net/mblase75/ECmwH/
这就留下了显示“oldVal”字段的问题,但我认为这是一个意见问题。