表单标记示例 | CSS-Tricks

<form id="myForm" action="#" method="post">

  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1">
  </div>

  <div>
    <h4>Radio Button Choice</h4>

    <label for="radio-choice-1">Choice 1</label>
    <input type="radio" name="radio-choice" id="radio-choice-1" tabindex="2" value="choice-1">

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice" id="radio-choice-2" tabindex="3" value="choice-2">
  </div>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
	
  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>
	
  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox">
  </div>

  <div>
    <input type="submit" value="Submit">
  </div>

</form>

Ant

# 2010年5月19日

我通常将输入包装在标签中以使其更简单。
它在IE6中不起作用，但没有人关心（我的客户也不关心）。

Okto

评论永久链接# 2011年10月8日

Ant 并不更简单，当你想要设置表单样式时，它会变得更复杂，并且可访问性、语义性更差。只需使用“for”，你将有更多选项来设置样式。
只是一个观察。

Wes

# 2012年1月10日

这通常是我使用的。

<div class="input-wrap text required">
    <label for="textinput">Text Input:*</label>
    <input type="text" name="textinput" id="textinput" value="Value" />
</div>
<div class="input-wrap checkbox">
    <label>Checkboxes:</label>
    <div class="option-wrap">
     <label for="checkbox1">Option 1:</label>
    <input type="text" name="checkbox1" id="checkbox1" value="checkbox1" />
    </div>
    <div class="option-wrap">
     <label for="checkbox2">Option 2:</label>
    <input type="text" name="checkbox2" id="checkbox2" value="checkbox2" />
    </div>
</div>

此标记的主要目标是一致性。使用此标记，你几乎可以以任何类型的配置（例如，标签在左、标签在上、标签在右）设置表单样式。

你还可以使用包装器类根据类型（选择、复选框、文本）或状态（错误、有效、必需）来设置输入及其标签的不同样式。

缺点是存在相当多的你可能不会一直使用的额外标记。就我个人而言，我认为为了保持一致性，这是值得的。

Antoine Descamps

# 2012年2月2日

为什么不将每个单选按钮/标签组合包装在一个新的div中，以使它们更紧密地联系起来？

hamburger

# 2012年11月16日

你好，
我有一些建议

如何使用css样式完善标记，使其在所有设备上都能正常工作。
特别是对于像姓名和公司这样的典型输入，建议使用什么宽度？
有人知道一些好的例子吗？

Andrew

# 2012年12月2日

表单中的div？为什么？

Cal

评论永久链接# 2012年12月10日

也许Chris这样做只是为了将不同的表单元素分隔开来，以便于举例说明……

Croydon

# 2013年1月21日

理想情况下，你不会用额外的div弄乱表单。

你可以轻松地使用CSS中固有的表单元素来布局表单

form {}
form fieldset { }
form fieldset label {}
form fieldset input {}
form fieldset input[type=radio] {}
form fieldset input[type=checkbox] {}

// 适用于是/否或性别=M/F类型问题 //
form fieldset fieldset {}
form fieldset fieldset legend {}
form fieldset fieldset label {}
form fieldset fieldset input[type=radio] {}

仅使用表单元素设置表单样式很容易（取决于表单的复杂程度——我用这种方式做过一些非常复杂的表单）而且很有趣！

试一试。不要偷懒，不要恢复到使用div！

Cathy

评论永久链接# 2015年10月22日

太棒了！这正是我想要的……非常酷。谢谢。

Karl Groves

# 2013年8月19日

此示例中tabindex的使用应删除。显式地将tabindex设置为大于0的值几乎总是坏主意，因为这可能会导致仅使用键盘浏览网站的人感到困惑。在大多数情况下，源顺序就足够了。

AndrewWatson

# 2013年8月22日

使用四级标题（h4）可能不是通用代码示例的最佳选择，因为它规定了文档大纲中的位置。并非试图吹毛求疵，只是在提醒大家，以防有人阅读此示例并假设h4的正确位置是在表单中，用作标题。

（显然，在文档中适当的地方应该使用h4）

干杯！
Andrew

Paul Dodkins

# 2014年2月28日

很棒的评论，

我是否错过了我们使用“label”和“input”标签并使用CSS3对齐的部分？大多数阅读材料都说要避免使用“table”来设计表单，我正在尝试这样做，但无法获得使用“table”时相同的整洁对齐方式，

欢迎你的想法和意见

干杯并感谢

josh

评论永久链接# 2015年6月4日

表单不是表格数据，因此不应将其放入表格中进行布局。如果你需要表格具有的某些布局技巧，可以使用display: table、display: table-cell等。希望这有帮助。:)

显示

评论

发表评论 取消回复

发表评论取消回复