Html 表单样式设计最佳实践

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

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

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

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

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

---

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

我不完全确定您所说的“最佳实践”是什么意思，但我要改进的一点是语义。 你可以（应该？）使用

，而不是一个毫无意义的

而且您不需要在

文本区域周围使用两个
，甚至不需要在单个
上使用多个背景图像（这是CSS3属性，不受广泛支持）

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

试试这个：

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

还有,；
为了在每种浏览器和平台上保持表单元素的一致外观，我可以强烈推荐Nathan Smith的（在较旧的浏览器中需要JS支持HTML5）。
谢谢CabGFX，这真的很有帮助。Formalize看起来非常整洁，我稍后会尝试一下。至于我想做什么，我需要三个背景图像（顶部、中间和底部）。我将进一步研究Fieldset标记，看看如何使表单更具语义。我不认为您会想用字段集包装所有文本区域，尽管我可能错了。无论如何，这是有帮助的。谢谢很高兴它起到了作用——足以接受答案？关于
，您是对的，它意味着在表单中对一个或多个字段进行逻辑分组，最好使用
来表示字段的上下文。我将编辑我的答案，提供更多细节，以获得你的三张背景图片。是的，它保证了一个被接受的答案。我为我的延误道歉；我忘了，因为我还是新来的使用标签是一个很棒的主意！再次感谢你的帮助。
.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);}