表单样式最佳实践

Question

我在 Photoshop 中创建了一组不错的表单元素，并希望将它们转换为 HTML 和 CSS。简单的输入文本表单将具有背景图像，因为该字段的大小不会改变。但是，文本区域表单会随着用户键入而动态改变大小。

通常，为了构建这种样式，我会将表单字段包装在 div 中，如下所示：

<div class = "textarea-top">
  <div class = "textarea-bottom">
    <textarea></textarea>
  </div>
</div>

或者通过在一个包装 div 中使用多个背景图像：

<div class = "textarea">
  <textarea></textarea>
</div>

有没有更好的方法来解决这个问题？重申一下，字段样式是可以重复的高级图像（对于字段的主体），并且具有顶部和底部的样式。问题是，处理这些高级表单样式的最佳做法是什么？

Answer 1

我不完全确定您所说的“最佳实践”是什么意思，但我要改进的一件事是语义。 你可以（应该？）使用<fieldset>'s 而不是一个相当无意义的<div>。

您不需要在textarea 周围使用两个<div>，甚至不需要在一个<div> 上使用多个背景图像（这是一个CSS3 属性，并且没有得到广泛支持）。

相反，您应该将<textarea> 包装在<label> 元素中，并嵌套您的背景图像，如下所述：

试试这个：

<fieldset class="expandableInput">
  <label>
    Semantic text:
    <textarea></textarea>
  </label>
</fieldset>

奖励：像这样将表单元素包裹在<label> 中，可以提供更大的点击区域，让用户能够专注于手头的表单元素。小心<select>'s，它不会很好玩（即使它是有效的 HTML）

CSS 类似于：

.expandableInput {background: url(/path/to/first/img);}
  .expandableInput label {display: block; background: url(/path/to/second/img);}
    .expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);}

还有； 为了使表单元素在每个浏览器和平台上的外观保持一致，我强烈推荐 Nathan Smith 的 Formalize CSS（它需要 JS 才能在旧浏览器中支持 HTML5）。