形成造型最佳实践

时间:2011-09-05 19:26:22

标签: html css forms

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:4)

我不完全确定你的“最佳实践”是什么意思,但我要改进的一件事是语义。 你可以(应该?)使用<fieldset>而不是<div>,而不是<div>

你不需要在textarea周围使用两个<div>,或者在一个<textarea>上使用多个背景图片(这是一个CSS3属性,而不是广泛使用 - 支持)。

相反,您应该将<label>包裹在<fieldset class="expandableInput"> <label> Semantic text: <textarea></textarea> </label> </fieldset> 元素中,然后嵌套背景图片,如下所述:

试试这个:

<label>

奖励:将<select>这样的表单元素包裹起来,可以提供更大的点击区域,让用户可以专注于手头的表单元素。只是要警惕.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);} ,它不会很好(即使它是有效的HTML)

CSS类似于:

{{1}}

也; 对于表单元素的一致外观,在每个浏览器和平台,我强烈推荐Nathan Smith的Formalize CSS(在旧浏览器中需要JS支持HTML5)。