JavaScript/jQuery 和自定义表单元素
大家好，
stackoverflow 一直是解决编程相关问题的好资源。这是我第一次用mysqlf问问题，因为我绝对找不到好的解决方案。所以，如果我忘记了什么，请原谅我 - 我愿意学习;-)
我已经使用 JS 和 jQuery 很长时间了。 jQuery 的好处是，有大量的资源和插件可以满足您可以开箱即用的各种需求。 然而，我看到很多网站使用非常好的表单元素（样式输入：文本/密码、单选、复选框、下拉菜单等）。但我找不到任何 jQuery 插件或 JavaScript 框架，它们提供了设计/样式表单元素的可能性。它们要么缺乏元素支持，要么非常不稳定。
- jQuery UI（我最近开始使用）不支持文本输入和下拉菜单。
- NiceForms 非常简洁，但在某些浏览器中有点不稳定，而且相当 hacky。它用各种绝对定位的 div 替换一些元素，这有时会完全破坏我的布局或只是不起作用（在浮动时等）。它还缺乏许多基本属性，例如某些元素的宽度。
我正在寻找一种以图形方式设置它们样式的方法。所以我不想只通过 CSS 修改它的边框。你知道我可以使用什么资源吗？ 我自己编写代码，但我有点害怕这项艰巨的工作，因为让自定义表单字段在所有常见浏览器上运行可能会非常伤脑筋。
有谁知道除了 jQuery UI 和 NiceForms 之外的其他（仍然维护或稳定）方法？
Hallo everyone,
stackoverflow has always been a good resource for programming related questions. This is the first time I ask a question by mysqlf, as I absolutely can't find a good solution. So please forgive me if I forgot anything - I'm willing to learn ;-)
I've used JS and jQuery for a long time now. The benefit of jQuery is, that there are lot's of resources and plugins for various needs you can use out of the box.
However, I see lots of websites using quite nice form elements (Styled inputs for: text/password, radio, checkboxes, dropdowns, etc). But I couldn't find any jQuery plugin or JavaScript framework, which provides the possibility to design/style form elements. Either they lack of element support or they're very unstable.
- jQuery UI (which I've recently started to use) doesn't support text-inputs and drop down menus.
- NiceForms is quite neat, but it's a little bit unstable in some browsers and rather hacky. It replaces some elements with various absolute positioned divs, which sometimes completely destroys my layout or just doesn't work (while floating etc.). Also it lacks lots of basic attributes like the width of some elements.
I'm looking for a way to style them graphically. So I don't want to just modify its borders via CSS. Do you know any resources, I can use for that?
I'd code it myself, but I'm a bit afraid of the huge work, as it can be very nerve-wracking to make customized form fields work on all the common browsers.
Does anyone know some other (still maintained or stable) approaches than jQuery UI and NiceForms?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
有很多解决方案... 这里有 25 个
There are many solutions out there... Here are 25 of them
再想一想，
是否有任何特殊原因可以在 CSS 功能之外设置表单元素的样式，这些功能随着时间的推移而不断增长（例如 CSS3），并且实际上会有利于表单可用性？您想要做什么 CSS 无法完成的样式？
更多内容：我建议您考虑一下习惯了常用 HTML 表单元素及其功能以及它们在屏幕上显示方式的用户。如果您完全改变它们的外观，则可能意味着您的表单从可用性的角度来看会变得更糟。所以一些样式是可以的，太多可能会让你的表单无法使用。
但是，如果您只是需要自定义表单字段，则通常可以将它们作为 jQuery 插件获取，但它们通常基于现有的 HTML 输入元素。
具有一致样式的丰富功能替代方案
但是，如果您询问丰富的表单功能，总有 ExtJS ，它的样式非常一致并提供很多很多（甚至更多）元素和功能。而且制作非常非常专业（从 2.0 开始就非常好，而且还在变得更好）。
Think again
Are there any particular reasons to style form elements outside of CSS capabilities which are growing in time (think of CSS3) and would actually benefit form usability? What kind of styling would you like to do that can't be done by CSS?
On more thing: I suggest you think of your users that are used to the usual HTML form elements and their functionality as well as how they appear on screen. If you'd completely change the way they look, it could mean that your form would make it much worse from the usability point of view. So some styling is OK, too much of it may make your form unusable.
But if it's just custom form fields that you're after, you can get them usually as jQuery plugins, but they are usually based on existing HTML input elements.
Rich functionality alternative with consistent styling
But if you're asking about rich form capabilities there's always ExtJS which is very consistently styled and provides lots and lots (and even more) elements and capabilities. And is very very professionally made (it's been very good since 2.0 and it's just getting better).
以下是用于设置表单样式的 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
Here is a metric tonne of jQuery plugins to style forms:
http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/
Also this:
http://pixelmatrixdesign.com/uniform/
Boom! 50+ form skinning jQuery plugins!
http://www.tripwiremagazine.com/2009/09/50-jquery-plugins-for-form-enhancements.html
From the above, jqTransform looks nifty. Here's a tutorial on using it:
http://woork.blogspot.com/2009/04/how-to-skin-html-form-elements-in.html