jquery 表单美化插件效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <meta http-equiv="content-script-type" content="text/网页特效" />
 <meta http-equiv="content-style-type" content="text/css教程" />
 <meta name="gmapkey" content="" />
 <meta name="description" content="" />
 <meta name="keywords" content="" />

 <title></title>

 <link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
 <link rel="stylesheet" href="demo.css" type="text/css" media="all" />
 
 <script type="text/javascript" src="requiered/jquery.js" ></script>
 <script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script>
 <script language="javascript">
  $(function(){
   $('form').jqtransform({imgpath:'jqtransformplugin/img/'});
  });
 </script>
 
</head>
<body>

 <form action="post.php教程" method="post">
  <div class="rowelem"><label>input text:</label><input type="text" name="inputtext"/></div>
  <div class="rowelem"><label>input password:</label><input type="password" /></div>
  <div class="rowelem"><label>checkbox: </label><input type="checkbox" name="chbox" id=""></div>
  <div class="rowelem"><label>radio :</label>
   <input type="radio" id="" name="question" value="oui" checked ><label>oui</label>
   <input type="radio" id="" name="question" value="non" ><label>non</label></div>
  <div class="rowelem"><label>textarea :</label> <textarea cols="40" rows="12" name="mytext"></textarea></div>

  <div class="rowelem">
   <label>select :</label>
   <select name="select">
    <option value="">1&nbsp;</option>
    <option value="opt1">2&nbsp;</option>
   </select>
  </div>
  <div class="rowelem">
   <label>select redimentionné :</label>
   <select name="select2" >
    <option value="opt1">big option test line with more wordssss</option>
    <option value="opt2">option 2</option>
    <option value="opt3">option 3</option>
    <option value="opt4">option 4</option>
    <option value="opt5">option 5</option>
    <option value="opt6">option 6</option>
    <option value="opt7">option 7</option>
    <option value="opt8">option 8</option>
   </select>
  </div>
  
  <div class="rowelem"><label>submit button:</label><input type="submit" value="envoyer" /></div>
  <div class="rowelem"><label>reset button:</label><input type="reset" value="annuler" /></div>
  <div class="rowelem"><label>input button:</label><input type="button" value="bouton" /></div>
    
 </form>

</body>
</html>

源码下载地址
http://down.111cn.net/down/code/jquery/2010/0831/20543.html

时间: 2024-10-25 17:04:18

jquery 表单美化插件效果的相关文章

jQuery表单美化插件jqTransform使用详解_jquery

jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te

易操作的jQuery表单提示插件_jquery

本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip.分享给大家供大家参考.具体如下: jQuery Form Toolltip 特点: 你可以单独自定义提示信息的CSS样式. 你可以指定淡入淡出的方向,当前支持Top, Bottom, Right 和 Left 运行效果截图如下: 具体代码如下: jquery实例:jQuery Form Toolltip使用方法引入核心文件 <script src="js/jquery/2.1.1/jquery.min.j

基于Form Effect 的表单美化插件介绍

Form Effect - 表单美化插件          1)Formly这个基于jQuery的表单美化插件,并带有表单校验功能. http://thrivingkings.com/formly/                 2)jQuery Tags Input这个jQuery插件能够将一个简单的文本输入转换成一个漂亮的Tag列表. http://xoxco.com/clickable/jquery-tags-input 演示地址: http://xoxco.com/clickable/

一款比较实用齐全的jQuery表单验证插件

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证. 不多说,看DEMO吧:点些下载 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

jquery表单验证插件(jquery.validate.js)的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js

JQuery表单验证插件EasyValidator用法分析_jquery

本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

jquery表单验证插件(jquery.validate.js)的3种使用方式_jquery

jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

jQuery 表单验证插件formValidation实现个性化错误提示_javascript技巧

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

Yii框架中jquery表单验证插件用法示例_php实例

本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm