jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

发布时间：2020-12-14 23:10:33 所属栏目：资源来源：网络整理

导读：本篇章节讲解jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码。供大家参考研究。具体如下：这里实现圆角表单，圆角输入框，无刷新验证，漂亮唯美，是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括，用HTML5可以实现很多超乎寻常

本篇章节讲解jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码。分享给大家供大家参考。具体如下：

这里实现圆角表单，圆角输入框，无刷新验证，漂亮唯美，是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括，用HTML5可以实现很多超乎寻常的效果，从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5，正悲哀着呢。

先来看看运行效果截图：

在线演示地址如下：

http://demo.aspzz.cn/js/2015/jquery-html5-css3-cicle-button-table-codes/

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5+css3+jQuery圆角注册表单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
(function($) { $.InFieldLabels = function(label,field,options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels",base); base.showing = true; base.init = function() { base.options = $.extend({},$.InFieldLabels.defaultOptions,options); base.$label.css('position','absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left,'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel',function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange',function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity },base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel',function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5,fadeDuration: 300,labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this,$field[0],options)); }); }; })(jQuery);
$("#RegisterUserForm label").inFieldLabels();
});
</script>
<style type="text/css">
html,body,h1,form,fieldset,input{margin: 0;padding: 0;border: none;}
body{font-family: Helvetica,Arial,sans-serif;font-size: 12px;}
#registration{color: #fff;background: #2d2d2d;background: -webkit-gradient( linear,left bottom,left top,color-stop(0,rgb(60,60,60)),color-stop(0.74,rgb(43,43,43)),color-stop(1,60)) );background: -moz-linear-gradient( center bottom,60) 0%,43) 74%,60) 100% );-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;margin: 10px;width: 430px;}
#registration a{color: #8c910b;text-shadow: 0px -1px 0px #000;}
#registration fieldset{padding: 20px;}
input.text{-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;border: solid 1px #444;font-size: 14px;width: 90%;padding: 7px 8px 7px 30px;-moz-box-shadow: 0px 1px 0px #777;-webkit-box-shadow: 0px 1px 0px #777;background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;background: url('images/inputSprite.png') no-repeat 4px 5px,-moz-linear-gradient( center bottom,rgb(225,225,225) 0%,rgb(215,215,215) 54%,rgb(173,173,173) 100% );background: url('images/inputSprite.png') no-repeat 4px 5px,-webkit-gradient( linear,225)),color-stop(0.54,215)),173)) );color: #333;text-shadow: 0px 1px 0px #FFF;}
input#email{background-position: 4px 5px;background-position: 4px 5px,0px 0px;}
input#password{background-position: 4px -20px;background-position: 4px -20px,0px 0px;}
input#name{background-position: 4px -46px;background-position: 4px -46px,0px 0px;}
input#tel{background-position: 4px -76px;background-position: 4px -76px,0px 0px;}
#registration h2{color: #fff;text-shadow: 0px -1px 0px #000;border-bottom: solid #181818 1px;-moz-box-shadow: 0px 1px 0px #3a3a3a;text-align: center;padding: 18px;margin: 0px;font-weight: normal;font-size: 24px;font-family: Lucida Grande,Helvetica,sans-serif;}
#registerNew{width: 203px;height: 40px;border: none;text-indent: -9999px;background: url('images/createAccountButton.png') no-repeat;cursor: pointer;float: right;}
#registerNew: hover{background-position: 0px -41px;}
#registerNew: active{background-position: 0px -82px;}
#registration p{position: relative;}
fieldset label.infield{color: #333;text-shadow: 0px 1px 0px #fff;position: absolute;text-align: left;top: 3px !important;left: 35px !important;line-height: 29px;}
</style>
</head>
<body>
<div id="registration">
 <h2>Create an Account</h2>
 <form id="RegisterUserForm" action="" method="post">
 <fieldset>
  <p>
  <label for="name">Name</label>
  <input id="name" name="name" type="text" class="text" value="" />
  </p>
  <p>
  <label for="tel">Phone Number</label>
  <input id="tel" name="tel" type="tel" class="text" value="" />
  </p>
  <p>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" class="text" value="" />
  </p>
  <p>
  <label for="password">Password</label>
  <input id="password" name="password" class="text" type="password" />
  </p>
  <p><input id="acceptTerms" name="acceptTerms" type="checkbox" />
  <label for="acceptTerms">
  I agree to the <a href="">Terms and Conditions</a> and <a href="">Privacy Policy</a>
  </label>
  </p>
  <p>
  <button id="registerNew" type="submit">Register</button>
  </p>
 </fieldset>
 </form>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!