如何在不使用表格的情况下格式化 HTML 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/179845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Do I Format a HTML Form Without Using Tables
提问by Pablo Fernandez
I know it's bad to use HTML Tables for everything... and that tables should be used only to present tabular data and not to achieve some style goal.
我知道对所有内容都使用 HTML 表格是不好的......而且表格应该只用于呈现表格数据而不是实现某些样式目标。
My question is, how do you make HTML forms with CSS so they look nice and aligned like when using tables?
我的问题是，您如何使用 CSS 制作 HTML 表单，以便它们在使用表格时看起来漂亮且对齐？
回答by Shawn Miller
Nick Rigby wrote an excellent article for A List Apart titled Prettier Accessible Forms
Nick Rigby 为 A List Apart 写了一篇出色的文章，标题为Prettier Accessible Forms
Uses fieldset, legend, label. Highly semantic.
使用字段集、图例、标签。高度语义化。
回答by random
You can try and strip the form as far back as possible and make do with the <label>and various form input elements as needed with a lean on the clear:left;attribute in the CSS.
您可以尝试尽可能地剥离表单，并<label>根据需要使用clear:left;CSS 中的属性来处理各种表单输入元素。
This would make sure each line starts anew without having to wrap each line of the form in an extra <div>or <p>or even making a list out of it.
这将确保每行重新开始而无需包装形式中的每行一个额外的<div>或<p>甚至列了清单出来。
.formlabel{
clear:left;
display:block;
float:left;
margin:0 0 1em 0;
padding:0 0.5em 0 0;
text-align:right;
width:8em;
}
.forminput{
float:left;
margin:0 0.5em 0.5em 0;
}
.formwarning{
clear:left;
float:left;
margin:0 0.5em 1em 0;
}
Here's a sample HTML form showing examples of various input types and an extra validation message that you can hide or style as needed:
这是一个示例 HTML 表单，显示了各种输入类型的示例以及您可以根据需要隐藏或设置样式的额外验证消息：
<fieldset><legend>Details</legend>
<label for="name" class="formlabel">Name</label>
<input id="name" name="name" type="text" class="forminput" />
<div class="formwarning">Validation error message</div>
<label for="dob_year" class="formlabel">DOB</label>
<div class="forminput">
<input id="dob_year" name="dob_year" type="text" size="4" /> /
<input id="dob_month" name="dob_month" type="text" size="2" /> /
<input id="dob_day" name="dob_day" type="text" size="2" />
</div>
<label class="formlabel">Sex</label>
<label for="female" class="forminput">Female</label>
<input id="female" name="sex" type="radio" class="forminput" />
<label for="male" class="forminput">Male</label>
<input id="male" name="sex" type="radio" class="forminput" />
<label for="state" class="formlabel">State</label>
<select id="state" name="state" class="forminput">
<option>ACT</option>
<option>New South Wales</option>
<option>Northern Territory</option>
<option>Queensland</option>
<option>South Australia</option>
<option>Tasmania</option>
<option>Victoria</option>
<option>Western Australia</option>
</select>
<label for="deadseal" class="formlabel">Death certificate</label>
<input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>
In the above example, the DOB does have an extra <div>cluttering things up. You could get rid of it if you style up the date slashes as part of the :afterpseudo-element where needed.
在上面的例子中，DOB 确实有一些额外的<div>混乱。如果您:after在需要时将日期斜杠设置为伪元素的一部分，您可以摆脱它。
Turns out okay in Opera 11.60, Firefox 11, Google Chrome 18 and Internet Explorer 8.
在 Opera 11.60、Firefox 11、Google Chrome 18 和 Internet Explorer 8 中显示正常。
回答by Todd
Take a look at the code used in wufoo forms, they use ul's to format the forms and they look really good.
看看 wufoo 表单中使用的代码，它们使用 ul 来格式化表单，它们看起来非常好。
回答by Walkinraven
HTML
HTML
<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>
CSS
CSS
form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}
I think this is enough.
我觉得这就够了。
回答by Doug T.
I would lookup using the div tag to layout data on a page.
我会使用 div 标签查找页面上的数据布局。
Tables are still very much useful for tabular data, but its frowned upon for laying out a page.
表格对于表格数据仍然非常有用，但它不适合用于布局页面。
View source here on stackoverflow.com, there's probably some good examples.
在 stackoverflow.com 上查看源代码，可能有一些很好的例子。
回答by Cory Dee
Think about putting field names above the field, rather than beside. I find this works about the best.
考虑将字段名称放在字段上方，而不是旁边。我发现这最有效。
