表单样式最佳实践

Question

5

我已经在Photoshop中创建了一组美观的表单元素，现在想将它们转换为HTML和CSS。简单的输入文本表单将有一个背景图像，因为该字段的大小不会改变。然而，文本区域表单将随用户键入动态改变大小。

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

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

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

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

有没有更好的方法来处理这个问题？换句话说，这些字段样式是可以重复使用的高级图片（用于字段主体），并且具有顶部和底部的样式。问题是，如何最好地处理这些高级表单样式？

- Akaishen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cabgfx · Accepted Answer

我不完全确定您所说的“最佳实践”是什么意思，但我会改进语义。

您可以（应该？）使用 <fieldset> 代替一个没有意义的 <div>。

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

相反，您应该将 <textarea> 包装在一个 <label> 元素中，并按照我下面描述的嵌套您的背景图像：

尝试这个：

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

奖励：像这样将表单元素包装在标签中，可以为用户提供更大的点击区域，以便用户集中注意力处理当前的表单元素。只需小心