24 个漂亮的个性化 HTML 表单技术

 

24 HTML Form Elements Customization Techniques

HTML form elements do not render consistently across all browsers. While some form elements such as textbox and textarea can be styled through CSS to look the same on most browsers, others are ugly enough which can’t be ruled by CSS. Here are 24 solutions you can use to customize your form elements.

Checkbox and Radio Buttons

1.) FancyForm

FancyForm is a powerful replacement script used to provide the ultimate flexibility in changing the appearance and function of checkbox and radio buttons form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers. It requires MooTools JavaScript framework. fancyform

2.) CRIR: Checkbox & Radio Input Replacement

This combination of JavaScript and CSS will hide checkbox and radio buttons. This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. The form is still fully functional if JavaScript is disabled or not supported. crir

3.) Ryan Fait’s Custom Checkboxes & Radio Buttons

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. ryanfait

4.) ARC - Adam’s Radio/Checkbox Customization

The script parses a specified form for input types and associated labels. If the input type is found to be a radio button or checkbox then the widget is hidden and the label is altered to display a custom widget-style-image by modifying the label’s CSS style.arc

5.) prettyCheckboxes

prettycheckboxes

6.) jQuery checkbox
jquerycheckbox
7.) Articles & Tutorials On Customizing Checkbox and Radio Buttons

Select / Dropdown Box

1.) JavaScript Image Combobox

imagecombobox1

2.) jQuery Dropdown Check List

jquerydropdownchecklist1

3.) Custom Select With Icons

customselect

4.) ComboBoxes Using MooTools

mootoolscombo

5.) Select Replacement

select-replacement

6.) Additional Select Box Customization (Won’t Work If JavaScript Disabled)

Almost All Form Elements

1.) Custom Form Elements (CFE)

Custom Form Elements unites all efforts in the web to enhance web-based XHTML forms in terms of style, usability and accessibility by using Javascript and/or CSS. Custom Form Elements work cross-browser, currently supporting most A-grade browsers.cfe

2.) Emblematiq Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.niceforms

3.) jQuery Plugin: jNice

jnice

24 个漂亮的个性化 HTML 表单技术

by 管理员 on 2009年04月20号

COMSHARP CMS 写道:HTML 表单对象在不同浏览器渲染方式并不一致,尽管一些对象,如
textbox 和 textarea 可以通过 CSS 在不同浏览器获得一致的外观,其它多数无法通过CSS
控制外观的对象在有些浏览器中看上去十分丑陋,本文精选了24个对表单对象进行个性化定制的技术。

Checkbox 与 Radio Buttons 相关


1.) FancyForm

FancyForm 是一个非常强大的 JavaScript 库,可以作为 checkbox 和 radio button
的替代品,能生成非常漂亮的 checkbox 和 radio button,并支持几乎所有浏览器,该 JavaScript 库需要
MooTools JavaScript 框架的支持。



2.) CRIR: Checkbox & Radio Input Replacement

这个 JavaScript 和 CSS 组合可以隐藏表单中的 checkbox 和 radio button,并允许你使用 CSS 对
checkbox 与 radio button 的设置式样模拟 checkbox 和 radio button。表单的功能不会改变,仍可以收集
checkbox 和 radio button 的数据值,checkbox 和 radio button 的标签会触发那些隐藏的对象。



3.) Ryan Fait’s Custom Checkboxes & Radio Buttons

这个 JavaScript 和 CSS 组合允许你使用自己的图片模拟 checkbox,radio button 以及 select
列表控件。这个很周到的 JavaScript 库还可以在浏览器禁用了 JavaScript 的时候,自动用回传统的表单控件。



4.) ARC - Adam’s Radio/Checkbox Customization

该脚本会对表单中的 checkbox 和 radio button 及其标签进行探测,一旦发现,就会使用基于 CSS 式样的图形标签替换这些控件。



5.) prettyCheckboxes



6.) jQuery checkbox



7.) 一些用来定制 checkbox 和 radion button 的文章

选择和下拉框(Select / Dropdown Box)相关


1.) JavaScript Image Combobox (JavaScript 图形化 Combobox)



2.) jQuery Dropdown Check List



3.) Custom Select With Icons


4.) ComboBoxes Using MooTools


5.) Select Replacement



6.) 更多 select box 定制技术 (基于 JavaScript)

更多 Form 控件对象


1.) Custom Form Elements (CFE)

Custom Form Elements 集合了各种技术,增强 XHTML Web 表单控件对象,基于 javaScript 和 CSS 实现更漂亮的效果,提高易用性与可访问性。支持绝大多数主流浏览器。



2.) Emblematiq Niceforms

Niceforms 是一个可以替代几乎所有 web 表单对象的 JavaScript 库。你可以使用默认的主题,甚至可以开发自己的主题。



3.) jQuery Plugin: jNice



本文来源:http://www.netwaver.com/23/24-html-form-elements-customization-techniques/

 

 

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要定义要验证的表单元素和它们对应的验证规则。可以使用一个对象来存储这些信息: ``` var fields = { username: { required: true, minlength: 6, maxlength: 20 }, email: { required: true, email: true }, password: { required: true, minlength: 8, maxlength: 20 }, confirm_password: { required: true, equalTo: '#password' } }; ``` 在这个例子中,有四个表单元素需要验证,分别是用户名、电子邮件、密码和确认密码。每个元素的验证规则都以属性的形式存储,比如 `required` 表示该元素必须填写,`minlength` 和 `maxlength` 分别表示最小和最大长度,`email` 表示必须是合法的电子邮件地址,`equalTo` 表示必须与指定的另一个元素的值相同。 接下来,需要编写一个插件来实现表单验证功能。可以使用 jQuery 的扩展机制来实现这个插件。以下是一个简单的例子: ``` $.fn.myValidation = function(options) { var settings = $.extend({ errorClass: 'error', errorMessage: 'This field is required' }, options); return this.each(function() { var $form = $(this); $form.find('input[type="submit"]').on('click', function(event) { event.preventDefault(); $form.find('.' + settings.errorClass).removeClass(settings.errorClass); $.each(fields, function(name, rules) { var $field = $form.find('[name="' + name + '"]'); var value = $field.val(); if (rules.required && !value) { $field.addClass(settings.errorClass); $field.after('<span class="' + settings.errorClass + '-message">' + settings.errorMessage + '</span>'); } if (rules.minlength && value.length < rules.minlength) { $field.addClass(settings.errorClass); $field.after('<span class="' + settings.errorClass + '-message">This field must be at least ' + rules.minlength + ' characters long</span>'); } if (rules.maxlength && value.length > rules.maxlength) { $field.addClass(settings.errorClass); $field.after('<span class="' + settings.errorClass + '-message">This field must be no more than ' + rules.maxlength + ' characters long</span>'); } if (rules.email && value && !isValidEmail(value)) { $field.addClass(settings.errorClass); $field.after('<span class="' + settings.errorClass + '-message">This field must be a valid email address</span>'); } if (rules.equalTo && value !== $form.find(rules.equalTo).val()) { $field.addClass(settings.errorClass); $field.after('<span class="' + settings.errorClass + '-message">This field must match ' + rules.equalTo + '</span>'); } }); }); }); }; function isValidEmail(value) { // 判断是否为合法的电子邮件地址 } ``` 这个插件的作用是在表单提交时对每个表单元素进行验证,如果有错误,则添加一个错误类和错误消息。可以通过传入参数来定制错误类和错误消息的样式。 最后,需要编写个性化HTML 代码来显示错误消息。可以通过设置 CSS 样式来实现不同的样式效果。以下是一个简单的例子: ``` <form> <label for="username">Username:</label> <input type="text" name="username" id="username"> <label for="email">Email:</label> <input type="email" name="email" id="email"> <label for="password">Password:</label> <input type="password" name="password" id="password"> <label for="confirm_password">Confirm Password:</label> <input type="password" name="confirm_password" id="confirm_password"> <input type="submit" value="Submit"> </form> <style> .error { border-color: red; } .error-message { color: red; } </style> ``` 在这个例子中,当表单元素验证不通过时,会添加一个名为 `error` 的 CSS 类,用来显示错误的边框颜色。同时,也会添加一个名为 `error-message` 的 CSS 类,用来显示错误消息的文本颜色。可以根据自己的需求来修改这些样式

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值