JavaScript/jQuery 和自定义表单元素答案

【问题标题】：JavaScript/jQuery and customized form elementsJavaScript/jQuery 和自定义表单元素
【发布时间】：2011-02-01 10:51:29
【问题描述】：

大家好，

stackoverflow 一直是编程相关问题的好资源。这是我第一次问mysqlf的问题，因为我绝对找不到好的解决方案。所以如果我忘记了什么请原谅我——我愿意学习;-)

我已经使用 JS 和 jQuery 很长时间了。 jQuery 的好处是，有很多资源和插件可以满足您开箱即用的各种需求。但是，我看到很多网站使用非常好的表单元素（样式输入：文本/密码、单选、复选框、下拉列表等）。但是我找不到任何 jQuery 插件或 JavaScript 框架，它们提供了设计/样式表单元素的可能性。它们要么缺乏元素支持，要么非常不稳定。

jQuery UI（我最近开始使用）不支持文本输入和下拉菜单。
NiceForms 相当简洁，但在某些浏览器中有点不稳定，而且相当 hacky。它用各种绝对定位的 div 替换了一些元素，这有时会完全破坏我的布局或者只是不起作用（在浮动时等）。此外，它还缺少许多基本属性，例如某些元素的宽度。

我正在寻找一种以图形方式设置样式的方法。所以我不想仅仅通过 CSS 修改它的边框。你知道任何资源，我可以使用吗？我会自己编写代码，但我有点害怕繁重的工作，因为让自定义表单字段在所有常见的浏览器上都可以工作会非常伤脑筋。

有谁知道除了 jQuery UI 和 NiceForms 之外的其他（仍然维护或稳定的）方法吗？

【问题讨论】：

标签： javascript jquery jquery-ui input niceforms

【解决方案1】：

有很多解决方案...Here are 25 of them

【讨论】：

【解决方案2】：

再想一想

是否有任何特别的理由来设置 CSS 功能之外的表单元素样式，这些功能随着时间的推移而增长（想想 CSS3）并且实际上有利于表单可用性？你想要什么样的样式是 CSS 做不到的？

关于更多事情：我建议你想想你的用户已经习惯了普通的 HTML 表单元素及其功能以及它们在屏幕上的显示方式。如果您完全改变它们的外观，这可能意味着您的表单从可用性的角度来看会变得更糟。所以一些样式是可以的，过多的样式可能会使你的表单无法使用。

但如果您只是追求自定义表单字段，您通常可以将它们作为 jQuery 插件获取，但它们通常基于现有的 HTML 输入元素。

具有一致样式的丰富功能替代

但是，如果您询问的是丰富的表单功能，那么ExtJS 总是风格一致，并提供了很多（甚至更多）元素和功能。而且制作非常专业（从 2.0 开始就非常好，而且越来越好）。

【讨论】：

我同意样式化的输入元素（样式超出 css 的能力）在 95% 的情况下都是错误的。考虑到您可以使用 css 使边框变圆、更改 bg 颜色、添加阴影等 - 使用 jquery 这样做是一个非常糟糕的主意，除非您对质量控制和测试有 100% 的把握
由于一致性原因，我得到了作者所要求的印象。我以前见过 ExtJS，看起来很不错——但也就是说，它不是 FOSS（而且在商业上使用相当昂贵）。在我看来，这是一个合理的问题——跨浏览器手动设置表单样式可能需要很长时间，有时你只需要一种快速的方法来处理一些尖叫的客户“让它更漂亮！！！”在你...只是我的两个。 :)
感谢您的回答。我得承认，我同意你的看法。我想我会坚持使用 CSS3 并以“有效”的方式为它们设置样式。我只是希望有一种很好的方法来支持 IE6 等，而无需编写和调试各种不同的样式表。在这种情况下，我唯一想到的就是替换 -fields 并使用图形重组它们。但是，我认为无论如何都应该使用 CSS3 并为旧浏览器显示“常规”输入字段。谢谢:-)
@aendrew：确实如此，但是对于专业（付费）项目，ExtJS 的价格是可以接受的。他们以前也有开源项目的许可证，但我不知道他们是否还有。
@mario：既然你提到了 IE6：我建议你检查你的日志，有多少用户实际上仍在使用它。检查my blog 分析我可以说上个月只有 0.3% 的用户使用 IE6。我认为支持他们的努力不值得。表格也适用于他们。他们只是看起来有点不同。 ;)

【解决方案3】：

这里有大量用于样式表单的 jQuery 插件：

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

还有这个： http://pixelmatrixdesign.com/uniform/

轰隆隆！ 50 多个表单皮肤 jQuery 插件！ http://www.tripwiremagazine.com/2009/09/50-jquery-plugins-for-form-enhancements.html

从上面看，jqTransform 看起来很漂亮。这是一个使用它的教程： http://woork.blogspot.com/2009/04/how-to-skin-html-form-elements-in.html

【讨论】：

感谢 aendrew 和 gearsdigital。感谢您的帮助，并为我指出了这些文章。但如果你已经使用了其中的一些，我很想得到一些反馈。大多数插件/扩展只涵盖几个输入字段。但我会尝试其中一些！