使用CSS的表单布局

In other entries I’ve discussed the correct markup and best practices to make a well-structured, semantic, accessible form. The appearance of the form has been a secondary consideration while I emphasized how important it was to not add extra markup. Forms are not paragraphs, and they do not need <br> tags or tables to display correctly. That is, not surprisingly, the role of CSS.

在其他文章中，我讨论了正确的标记和最佳实践，以使结构合理，语义易访问 。 表单的外观是次要考虑因素，而我强调了不添加额外标记的重要性。 表单不是段落，并且它们不需要<br>标记或表格即可正确显示。 这就是CSS的作用，这并不奇怪。

第一步：弄清Accesskey的快捷方式 (Step One: Clarify Accesskey Shortcuts)

Part of the process of designing a good form is using markup to make it accessible by users of differing abilities. Each label in our form should have a unique accesskey value. While correctly configured browsers will make these accesskey options obvious to users that need them, we want to make sure that everyone who desires to use them is very clear on which shortcuts are present. If you’ve consistently used the first letter from the text of the label for an accesskey, (which is recommended) the CSS to achieve this is very simple:

设计好的表单的过程的一部分是使用标记，以使不同能力的用户可以访问它。 form每个label都应具有唯一的accesskey值。 虽然正确配置的浏览器将使这些accesskey选项对需要它们的用户显而易见，但我们希望确保每个希望使用它们的人都清楚知道存在哪些快捷方式。 如果您一直使用label文本的第一个字母作为accesskey ，(推荐)，CSS的实现非常简单：

label:first-letter {
	font-weight: bolder; 
	color: red;
}

(Of course, you can customize the appearance of the first letters in any way you wish).

(当然，您可以根据需要自定义首字母的外观)。

Sometimes using the first letter of every <label> is impossible, simply because it has been used elsewhere in the form, or because that key press combination is reserved by the system. In that case, you must use other characters in the <label> text.

有时，不可能仅使用每个<label>的首字母，这仅仅是因为它已经以其他形式在表单中使用，或者因为该按键组合是系统保留的。 在这种情况下，必须在<label>文本中使用其他字符。

A good example of this would be two separate fields in a form, one asking for a phone number and the other for a postal code. We cannot use “p” as an accesskey value for both fields. This means adding a little markup to our HTML. To this:

一个很好的例子是表单中的两个独立字段，一个字段要求输入电话号码，另一个字段要求邮政编码。 我们不能用“P”为accesskey对于这两个字段的值。 这意味着在我们的HTML中添加一些标记。 对此：

<label for="postalcode" accesskey="c">
	Postal Code
</label>
<input type="text" name="postalcode" id="postalcode" pattern="[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]">
<label for="phonenumber" accesskey="n">
	Phone Number
</label>
<input type="tel" name="phonenumber" id="phonenumber" pattern="\d{3}[\-]\d{3}[\-]\d{4}">

We add the following inside the <label> for each element:

我们在每个元素的<label>内添加以下内容：

<label for="postalcode" accesskey="c">Postal
<span class="shortcutkey">C</span>ode</label>
<label for="phonenumber" accesskey="n">
	Phone <span class="shortcutkey">N</span>umber
</label>

And change the CSS to:

并将CSS更改为：

label span.shortcutkey {
	font-weight:
	bolder-color: red;
}

An elegantly designed form by Megan Ray

梅根·雷(Megan Ray)精心设计的形式

第二步：使表格可呈现 (Step Two: Make The Form Presentable)

There are many possibilities for cleaning up the appearance of our form via CSS. Let’s start with the simplest:

通过CSS清理表单的外观有很多可能性。 让我们从最简单的开始：

选项1：标签和输入在单独的行上 (Option 1: Label and input on separate lines)

This set of declarations forces each label on its own line, keeping the submit button by itself through the use of an attribute selector:

这组声明将每个标签强制放在自己的行上，通过使用属性选择器来保持submit按钮本身：

label, input[type="submit"] {
	display: block;
}
label {
	display: block;
}

选项2：标签和输入在同一行上，均匀间隔 (Option 2: Label and input on same line, evenly spaced)

Many designs call for <label> elements to be beside their associated form fields, to save on space. In that case, there are two possibilities. The first is an extension of the technique we just used:

许多设计要求<label>元素位于其关联的表单字段旁边，以节省空间。 在这种情况下，有两种可能性。 首先是我们刚刚使用的技术的扩展：

label {
	display: block;
	width: 10em;
	clear: left;
}
label, input {
	float: left;
}

The CSS reads as follows: when the browser encounters a new <label> tag, display it as a block element (so we can give it a width), and make sure that everything is cleared to its left (i.e. nothing comes before it on the line, or influences where the line falls). That will force each element onto a new line when it appears, floating to the left of the following element.

CSS的内容如下：当浏览器遇到一个新的<label>标签，显示为一个block元素(因此，我们可以给它一个width )，并确保一切都被清除它的left (即没有到来之前它线，或影响线的位置)。 这将迫使每个元素出现在新行上，并浮动在下一个元素的left 。

The only problem you may encounter with this technique would be putting two input tags next to each other, such as a divided postal code, or an area code and phone number. In that case, you could overrule the embedded or linked style with an inline style on the affected element.

使用此技术可能遇到的唯一问题是将两个input标签彼此相邻放置，例如分开的邮政编码，区号和电话号码。 在这种情况下，您可以在受影响的元素上用嵌入式样式取代嵌入式样式或链接样式。

选项3：标签和输入在同一行上，标签均匀分布 (Option 3: Label and input on same line, label evenly spaced)

Another possibility for lining up our labels comes from using variants of display: table, the basics of which we covered in a previous section. Essentially, we want our labels to act as if they are in a single column of a table, which should make the width provided to them exactly the same. To the HTML we have used above, we apply the following CSS:

排列标签的另一种可能性来自使用display: table变体display: table ，我们在上一节中介绍了其基本知识。 本质上，我们希望标签的行为就像它们在table的单个列中一样，这应该使提供给它们的width完全相同。 对于上面使用HTML，我们应用以下CSS：

label, input {
	display: table-cell;
}

The problem is that the browser does not know when to place label-input pairs on a new line. We’ll do so by adding a <div> around each pair, and adding appropriate CSS:

问题在于浏览器不知道何时在新行上放置label-input对。 我们将在每对之间添加<div>并添加适当CSS：

<div>
	<label for="postalcode" accesskey="c">
		Postal Code
	</label>
	<input type="text" name="postalcode" id="postalcode" pattern="[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]">
</div>
<div>
	<label for="phonenumber" accesskey="n">
		Phone Number
	</label>
	<input type="tel" name="phonenumber" id="phonenumber" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</div>

As they are block elements, each <div> will automatically divide the label-input pairs onto separate lines. The <div> elements are only used in the context of a <form> with valid markup, so we can use a descendant selector in our declaration:

由于它们是block元素，每个<div>都会自动将标签输入对划分为单独的行。 <div>元素仅在具有有效标记的<form>上下文中使用，因此我们可以在声明中使用后代选择器：

form div {
	display: table-row;
}

Now, in addition to placing the label-input pairs on separate lines, each <div> also acts like a table row, meaning that each column of implied “cells” takes up the same width.

现在，除了将label-input对放在单独的行上之外，每个<div>还像table row ，这意味着隐含的“单元格”的每一列都占用相同的width 。

翻译自: https://thenewcode.com/80/Form-Layout-With-CSS