窗体造型最佳实践

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

通常情况下，打造出了这种风格，我会敷窗体域的div，因为这样的：

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

或在一个包裹格使用多个背景图像：

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

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

来源

2011-09-05 Akaishen

我不完全确定“最佳实践”是什么意思，但我会改进的一点是语义。你可以（应该？）使用<fieldset>而不是一个毫无意义的<div>。

而且您不需要在textarea附近使用两个<div>，或者在单个<div>（这是一个CSS3属性，但没有广泛支持）上使用多个背景图像。

相反，你应该换一个<label>元素<textarea>和巢您的背景图像，因为我已经描述如下：

试试这个：

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

加成：包装形式元素<label>就是这样，提供了一个更大的点击区域，让用户能够专注于手头的表单元素。只是要警惕<select>的，它没有发挥好（尽管它是有效的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）。

来源

2011-09-06 08:18:05 cabgfx

谢谢CabGFX，真的有帮助。 Formalize看起来非常整齐，我稍后再试一试。至于我想要做的，我需要三个背景图片（顶部，中间重复和底部）。我会更多地关注Fieldset标签，并了解如何让表单更加语义化。我不认为你会想要用字段集合来包装所有的文本区域，尽管我可能是错的。无论如何，这有所帮助。谢谢！ – Akaishen

很高兴帮助 - 足以接受答案？对于'

'你是对的，它的意思是在你的表格中对一个或多个字段进行逻辑分组，最好用''来表示字段的上下文。我将编辑我的答案，以获得更多关于实现三个背景图像的详细信息。 – cabgfx

是的，它保证一个被接受的答案。我为延误表示歉意。我忘了，因为我在这里还是比较新的。 ;）使用标签是一个很棒的主意！再次感谢你的帮助。 – Akaishen

窗体造型最佳实践

回答

相关问题