用css3和jQuery制作精美的表单
用css3和jQuery制作一个简单的精美表单
html代码如下:
<span class="title">Mask Your Input Forms and Make It Beauty</span> <br/><br/> <div id="container"> <p class="separator"><br/></p> <p class="small-title">Too Plain</p> <input class="too-plain" value="Enter your email here" /> <p class="separator"><br/></p> <p class="small-title">Fading The Label</p> <form> <label class="username-label" for="username">Username</label> <input type="text" name="username" class="username" /> <label class="password-label" for="password">Password</label> <input type="password" name="password" class="password" /> </form> <p class="separator"><br/></p> <p class="small-title">Sliding? Don't Worry</p> <form> <label class="username-label-sliding" for="username-sliding">Username</label> <input type="text" name="username" class="username-sliding" /> <label class="password-label-sliding" for="password-sliding">Password</label> <input type="password" name="password" class="password-sliding" /> </form> <p class="separator"><br/></p> </div>
css代码如下:
* { margin:0; padding:0; } body { text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; line-height:1.5em; margin-top:8%; background:#eaeaea; } input { padding:7px; border:5px solid #e0e0e0; -webkit-border-radius:20px; border-radius:20px; -moz-border-radius:20px; } input:focus { outline:none; } #container { text-align:left; width:700px; margin-left:auto; margin-right:auto; } .separator { border-bottom:1px dashed #ccc; margin-bottom:3px; } .title { font-size:30px; margin-bottom:1.5em; font-weight:bold; font-style:italic; text-shadow:0 2px 0 #fff; } .small-title { font-size:20px; margin-bottom:0.5em; font-weight:bold; font-style:italic; text-shadow:0 2px 0 #fff; } .username-label, .password-label, .username-label-sliding, .password-label-sliding { position:absolute; margin:9px 9px 9px 12px; } .username-sliding, .password-sliding { width:150px; } a, a:visited, a:hover { text-decoration: none; color: #000; }
jQuery代码如下:
$(document).ready(function(){ $('.too-plain').focus(function(){ if($(this).val()=="Enter your email here") {$(this).val("");} }).blur(function(){ if($(this).val()=="") { $(this).val('Enter your email here'); } }); $(".username-label,.password-label").animate({ opacity: "0.4" }).click(function(){ var thisFor=$(this).attr("for"); $('.'+thisFor).focus(); }) $(".username").focus(function(){ $(".username-label").animate({opacity:"0"},"fast"); if($(this).val()=="username") { $(this).val()==""; } }).blur(function(){ if($(this).val()=="") { $(this).val()=="username"; $(".username-label").animate({opacity:"0.4"},"fast"); } }) $('.password').focus(function(){ $(".password-label").animate({opacity:"0"},"fast"); if($(this).val()=="password"){ $(this).val()==""; } }).blur(function(){ if($(this).val()=="") { $(this).val()=="password"; $('.password-label').animate({opacity:"0.4"},"fast"); } }); $('.username-label-sliding,.password-label-sliding').animate({opacity:"0.4"}).click(function(){ var thisFor=$(this).attr('for') $('.'+thisFor).focus(); }) $('.username-sliding').focus(function() { $('.username-label-sliding').animate({ marginLeft: "7em" }, "fast"); if($(this).val() == "username") $(this).val() == ""; }).blur(function() { if($(this).val() == "") { $(this).val() == "username"; $('.username-label-sliding').animate({ marginLeft: "12px" }, "fast"); } }); $('.password-sliding').focus(function() { $('.password-label-sliding').animate({ marginLeft: "7em" }, "fast"); if($(this).val() == "password") { $(this).val() == ""; } }).blur(function() { if($(this).val() == "") { $(this).val() == "password"; $('.password-label-sliding').animate({ marginLeft: "12px" }, "fast"); } }); })
在firefox3.6,ie9,chrome中预览效果下图:
在ie7/8中预览效果如下图:
用css3和jQuery制作精美的表单的更多相关文章
- CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...
- jquery通过class验证表单不能为空
在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护. 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证.(ID ...
- 运用jQuery写的验证表单
//运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
- 基于jQuery商品分类选择提交表单代码
分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览 源码下载 实现的代码: <div class="yList ...
- 一款纯css3实现的超炫3D表单
今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 第二百二十一节,jQuery EasyUI,Form(表单)组件
jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...
- Jquery来对form表单提交(mvc方案)
来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...
- jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
随机推荐
- CSS 设计理念
今天整理CSS2.1的规范,发现这个,分享给大家. CSS2.1 作为 CSS2 和 CSS1 的后序版本,基于一下一组设计理念: 向前和向后兼容.CSS2.1 的用户代理能够理解 CSS1 的样式表 ...
- hadoop 视频教程3之实战教程
一,视频内容: 海量数据处理平台框架 hadoop介绍 hadoop 生态系统介绍 hdfs 设计原则 hdfs 系统架构 namenode datanode secondarynamenode hd ...
- jquery开发表格插件项目之知识点累积 二
$.addClass() 增加样式 $.removeClass() 去除样式 $.toggleClass() 单击增加样式,再单击取消样式 $.hasClass() 判断是否存在样式,存在返回true ...
- 2010-2011 ACM-ICPC, NEERC, Moscow Subregional Contest Problem J. Joke 水题
Problem J. Joke 题目连接: http://codeforces.com/gym/100714 Description The problem is to cut the largest ...
- JDK 动态代理的简单理解
动态代理 代理模式是 Java 中的常用设计模式,代理类通过调用被代理类的相关方法,提供预处理.过滤.事后处理等服务,动态代理及通过反射机制动态实现代理机制.JDK 中的 java.lang.refl ...
- 大型电商业务架构 IT大咖说 - 大咖干货,不再错过
大型电商业务架构 IT大咖说 - 大咖干货,不再错过 http://www.itdks.com/dakashuo/new/dakalive/detail/591
- Struts2 高危漏洞修复方案 (S2-016/S2-017)
近期Struts2被曝重要漏洞,此漏洞影响struts2.0-struts2.3所有版本,可直接导致服务器被远程控制从而引起数据泄漏,影响巨大,受影响站点以电商.银行.门户.政府居多. 官方描述:S2 ...
- STM32 microcontroller system memory boot mode
The bootloader is stored in the internal boot ROM memory (system memory) of STM32 devices. It is pro ...
- fritshoogland 大神ORACLE :pga-memory-operation latch
https://fritshoogland.wordpress.com/2017/03/01/oracle-12-2-wait-event-pga-memory-operation/#comment- ...
- Java对象池
单例模式是限制了一个类只能有一个实例,对象池模式则是限制一个类实例的个数.对象池类就像是一个对象管理员,它以Static列表(也就是装对象的池子)的形式存存储某个实例数受限的类的实例,每一个实例还要加 ...