这篇文章主要介绍了jquery+html5+css3实现圆角无刷新表单带输入验证功能代码,加入了html5与css3技术,使得整个表单效果更加唯美华丽,需要的朋友可以参考下
本文实例讲述了jquery+html5+css3实现圆角无刷新表单带输入验证功能代码。分享给大家供大家参考。具体如下：
这里实现圆角表单，圆角输入框，无刷新验证，漂亮唯美，是对这款基于html5/css3/jquery来实现的表单效果的简要概括，用html5可以实现很多超乎寻常的效果，从此你会喜欢上html5,会骂一下万恶的ie,到现在ie8还不支持html5，正悲哀着呢。
先来看看运行效果截图：
具体代码如下：
<!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, rgb(60,60,60)) );background: -moz-linear-gradient( center bottom, rgb(60,60,60) 0%, rgb(43,43,43) 74%, rgb(60,60,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, left bottom, left top, color-stop(0, rgb(225,225,225)), color-stop(0.54, rgb(215,215,215)), color-stop(1, rgb(173,173,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, arial, 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><p 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></p></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
javascript和html5 canvas如何绘制一个小人的代码
jquery 如何实现一个滑动按钮的开关
如何用js和css3制作炫酷的弹窗效果
以上就是jquery和html5和css3实现圆角无刷新表单带输入验证的功能的详细内容。