当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 24个漂亮的个性化HTML表单技术

HTML/XHTML教程
你应该知道的CSS的十八个技巧
初学者很好的参考:HTML标签详尽讲解
学习网页标准制作技术之CSS相关基础知识
学习网页标准制作网页之CSS混合布局应用
HTML基础教程:详细学习常用HTML标签的语义
网页设计基础:基本的页面设计元素布局比例
网页制作基础:图像文件的路径知识
html基础系列教程Ⅰ:从p开始,循序渐进
html基础系列教程Ⅱ:丰富段落里的标签
html基础系列教程Ⅲ:用途相似的标签
html基础系列教程Ⅳ:链接与文本标签们
html基础系列教程Ⅴ:美化段落文本Ⅰ
html基础系列教程Ⅵ:美化段落文本Ⅱ
Web标准知识:(X)HTML Strict 下的嵌套规则
Web标准知识:语义与样式无关
Web标准知识:DIV不是万能膏药
web标准知识:当标题不能显示完整的时候
web标准知识:以图换字的几个方法及思路
CSS教程:legend标签设定宽度的技巧
html基础:常用小技巧几例

HTML/XHTML教程 中的 24个漂亮的个性化HTML表单技术


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 128 ::
收藏到网摘: n/a

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

  Checkbox 与 Radio Buttons 相关

  1.) FancyForm

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

  

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

 

  2.) CRIR: Checkbox & Radio Input Replacement

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

  

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

 

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

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

  

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

 

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

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

  

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

 

  5.) prettyCheckboxes

  

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

 

  6.) jQuery checkbox

  

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

 

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

  Custom Radio Button Implement With jQuery

  slayeroffice Custom Checkbox Elements

  Customized Html Controls: Creating Custom Checkbox

  Styled Form Controls

  Fancy Checkboxes and Radio Buttons

  Inside Technique : Custom Checkboxes

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

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

  

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

 

  2.) jQuery Dropdown Check List

  

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

 

  3.) Custom Select With Icons

  

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

 

  4.) ComboBoxes Using MooTools

  

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

 

  5.) Select Replacement

  

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

 

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

  mcDropdown jQuery Plug-in

  jQuery Custom Select Box v.0.01

  Arc90 Arc90

  Control.SelectMultiple

  更多 Form 控件对象

  1.) Custom Form Elements (CFE)

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

  

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

 

  2.) Emblematiq Niceforms

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

  

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

 

  3.) jQuery Plugin: jNice

  

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