html – 表单样式最佳实践

发布时间：2020-12-14 22:45:18 所属栏目：资源来源：网络整理

导读：我在Photoshop中创建了一组很好的表单元素,我希望将它们转换为HTML和CSS.简单的输入文本表单将具有背景图像,因为字段的大小不会改变.但是,文本区域表单将在用户键入时动态更改大小. 通常,为了构建这种样式,我将表单字段包装在div中,如下所示：或者在一个包

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

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


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


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


最佳答案
我不完全确定你的“最佳实践”是什么意思,但我改进的一件事是语义.
您可以(应该？)使用< fieldset>而不是a,而无意义的< div>.
而且您不需要在textarea周围使用两个< div>,甚至不需要在单个< div>上使用多个背景图像. (这是一个CSS3属性,并没有广泛支持).
相反,你应该包装< textarea>在< label>中元素,并嵌套您的背景图像,如下所述：
试试这个：


额外奖励：将表单元素包装在< 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).

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!