资讯频道 → Web前端
阅读更多

30顶
0踩

Web前端

转载新闻 24 个漂亮的个性化 HTML 表单技术

2009-04-20 16:31 by 副主编 zly06 评论(5) 有46142人浏览
HTML JavaScript jQuery

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/

  • 大小: 22.6 KB
  • 大小: 13 KB
  • 大小: 5.1 KB
  • 大小: 2.7 KB
  • 大小: 4.5 KB
  • 大小: 4.6 KB
  • 大小: 7.3 KB
  • 大小: 9.5 KB
  • 大小: 2.5 KB
  • 大小: 2 KB
  • 大小: 14.1 KB
  • 大小: 9.5 KB
  • 大小: 3 KB
  • 大小: 3.7 KB
来自: comsharp
30
顶
0
踩
评论 共 5 条 请登录后发表评论
5 楼 jacking124 2011-01-25 10:42
很不错的资源，学习了，
4 楼 labchy 2010-09-21 15:03
不错 可惜收藏不了
3 楼 gggyx 2009-07-06 09:45
很好啊``
2 楼 yitu86 2009-05-20 23:00
偶也喜欢……
1 楼 xgm_gdqy 2009-04-21 11:42
相当好啊！！我喜欢！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • CSS3 神奇按钮，个性化表单按钮元素

    摘要:脚本资源,CSS特效,CSS3　神奇的CSS3按钮，个性化的表单按钮元素，看到那些单选按钮和复选框以及那些类似Iphone手机开关的按钮了吗？绝对比默认的表单按钮更漂亮。代码上也并不多，是学习的好范例。

  • html表单制作选择,24 个漂亮的个性化 HTML 表单技术

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

  • HTML其他个性化简介怎么写,24个漂亮的个性化HTML表单技术

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

  • （转） 24 个漂亮的个性化 HTML 表单技术

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

  • html 表单 元素 美化,分享10款jQuery的表单元素样式美化插件

    表单是网站和web应用开发中非常重要的一个元素，我们这里收集了10款jQuery表单美化插件，能有有效地帮助你提高web应用功能和使用体验。希望大家喜欢！你是不是喜欢美化你的checkbox，下拉菜单，文件上传或者是radio...

  • 单框选择html5,8个非常个性化的CSS3单/复选框

    单选框和复选框在网页表单中应用十分广泛，但是浏览器默认自带的单选框和复选框...1、jQuery超级个性化的单线框和复选框今天要分享的也是一个非常个性化的单选框和复选框插件，颜色你可以自己定义。2、CSS3漂亮的自...

  • css 表单 样式_使用CSS样式化Web表单

    css 表单 样式A big part of our work as website designers is the ability to make things look good and function well. We spend hours taking the time to make every aspect of our site visually compelling,...

  • 10款精美而实用的HTML5表单（登录、联系和搜索表单）

    1、HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩。今天我们要分享一款仿Facebook的登录表单，无论从外观还是功能上说，这款登录表单还是挺接近Facebook登录表单的。 在线演示 源码...

  • Android 进阶技术汇总一： 个性化控件(View) 方案汇总

    前言：个性化控件(View)： 主要介绍那些不错个性化的View，包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、...

  • html5 漂亮单选按钮样式,10个HTML5美化版复选框和单选框

    单选框html一、CSS3漂亮的自定义Checkbox复选框 9款迷人样式以前咱们分享过一款很是不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮，外观很是时尚。今天咱们来分享一款9款样式迷人的CSS3漂亮的...

  • 用HTML+CSS做一个漂亮简单的个人网页——樱木花道篮球3个页面 学生个人网页设计作品 学生个人网页模板 简单个人主页

    1网页简介：此作品为...3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

  • 个性化控件

     Android开源项目第一篇——个性化控件(View)篇  包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPic

  • 基于Qt开发的截图工具- 支持全屏截图， 支持自定义截图，支持捕获窗口截图，支持固定大小窗口截图，颜色拾取，图片编辑

    基于Qt开发的截图工具.zip 截图工具（QScreenShot） Qt编写的一款截图工具。 特点 - 支持全屏截图 - 支持自定义截图 - 支持捕获窗口截图 - 支持固定大小窗口截图 - 颜色拾取 - 图片编辑 - 图片上传到wordpress 环境 Qt6.2 QtCreate 8

  • 毕业设计&课设_ 校园活动管理系统，优化校园活动组织流程，涵盖多方面功能模块的便捷平台.zip

    该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。

  • 毕业设计基于ASP.NET技术的班级展示网站构建(源代码+论文).zip

    基于ASP.NET技术的班级展示网站构建资源，是一套针对教育机构或学生团体，旨在通过ASP.NET框架开发班级风采展示平台的指导资料或教程。此资源详细介绍了如何利用ASP.NET的强大功能，快速搭建一个功能完善、界面友好的在线班级展示平台。 该资源涵盖了从需求分析、数据库设计、前端页面制作到后端逻辑实现的全过程。通过实例演示，指导用户如何设置班级信息、学生风采展示、活动公告、图片上传与浏览等核心功能模块。同时，结合ASP.NET的MVC架构，实现了前后端分离，提高了代码的可维护性和可扩展性。 此外，该资源还提供了丰富的代码示例和注释，帮助开发者深入理解ASP.NET框架的工作原理，掌握如何运用其强大的数据库操作、用户认证与授权等特性。对于初学者来说，这是一份难得的入门教程；而对于有一定经验的开发者，则是一份提升技能的参考资料。 总之，基于ASP.NET技术的班级展示网站构建资源，是教育机构和学生团体实现班级风采在线展示的理想选择，也是开发者学习ASP.NET框架应用的宝贵资源。

  • 基于springboot的流浪动物管理系统源码数据库文档.zip

    基于springboot的流浪动物管理系统源码数据库文档.zip

  • 基于springboot+vue的实践性教学系统源码数据库文档.zip

    基于springboot+vue的实践性教学系统源码数据库文档.zip

  • 基于Python+Django家居全屋定制系统源码数据库文档.zip

    基于Python+Django家居全屋定制系统源码数据库文档.zip

  • Umi-OCR-main.zip

    Umi-OCR-main.zip

  • 基于springboot复兴村医疗管理系统源码数据库文档.zip

    基于springboot复兴村医疗管理系统源码数据库文档.zip

Global site tag (gtag.js) - Google Analytics