Question

我想知道是否有一个框架可以使标准的html表单看起来更像web 2.0样式，我想在文本框上有圆角和更随意的提交按钮，除了开箱即用的html一个，看起来很老派。

如果你知道一些快速实现的东西，并且开源，请提前感谢你。

Answer 1

尝试使用NiceForms Javascript库来设置样式表单。

或JqTransform用于jQuery。

您可以在下面找到其他一些资源：

http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html

http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/

http://devsnippets.com/reviews/using-jquery-to-style-design-elements-20-impressive-plugins.html

Answer 2

您必须使用css和图像背景的组合来设置表单元素的样式。这很容易做到，你应该能找到很多例子......

http://www.assemblesoft.com/examples/form/

http://pupungbp.erastica.com/css/rounded-corner-input-form/

Answer 3

它叫做CSS。普通的旧HTML外观由默认的CSS设置创建。如果要更改外观，则需要更改CSS。找到一个看起来与您想要的相似的网站，并查看HTML源代码。你会在STYLE标签包含的开头附近看到很多CSS。例如：

<style type="text/css"> 
    input {
        border: none;
        background: #FFF;
        width: 165px;
    }
    .rounded {
        background:  url(rounded.gif) no-repeat left top;
        padding: 8px;
        width: 180px;
    }
    </style>

为了获得实际的圆角，您需要一些可以覆盖锐角的图像。在示例CSS中，它指的是一个框的单个图像，但通常需要四个角图像和四个单独的线图像（顶部，底部，左侧，右侧）。

查看此文章，了解如何使用圆角元素创建表单：http://www.picment.com/articles/css/funwithforms/

Answer 4

关于圆角，您可以使用使用透明度四舍五入的背景图像，或者如果用户使用基于Mozilla的浏览器或歌剧，您可以使用：

#formbox {   
-moz-border-radius: 5px;
background-image: url('roundededges.jpg');
}

在CSS中为任何div添加圆角。无论是那个还是使用一些简单的闪光灯。

HTML表单元素，圆角，框架

4 个答案: