用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中预览效果如下图:
分享到:
相关推荐
HTML5+CSS3+jquery制作个性注册表单代码
jQuery+CSS3网页表单元素美化代码是一款在原生HTML表单的基础上进行美化,并使用jQuery来制作label动画效果,通常用于美化联系方式表单。
这是一款效果非常精美炫酷的jQuery和CSS3联系方式表单美化插件。大多数网站上都有让用户填写的联系方式表单,一个设计良好的表单能够大大的提升用户的体验度。该表单美化插件在原生HTML表单的基础上进行加工,并使用...
jQuery Css3制作网站登录表单验证带弹出层提示验证表单
200个登录界面模板,基于html+css+js+jquery制作,有各种类型,包括科技炫酷、经典、风景山水、漫画二次元,适用于所有人的选择
6.jquery制作自动播放的TAB切换特效 7.基于jQuery简单的Tab滑动门菜单代码(jQuery MoveTab) 8.简单jquery选项卡插件下载(支持鼠标移上切换、点击切换、Ajax方式切换等) 9.漂亮Tab插件之jQuery自动切换轮播Tab...
jQuery CSS制作超酷的动态按钮
大学生美食网页——日料寿司网页设计采用DIV CSS布局制作,使用jquery制作了图片轮播特效。共6个页面,包括首页、寿司介绍、餐厅推荐、食谱介绍、注册页面、登录页面。顶部导航使用CSS制作了鼠标经过效果,首页寿司...
CSS3动画效果自动登录表单基于jQuery.1.11.0.js制作,表单自动填写功能,动画效果。
简单又令人惊艳的hover效果表单案例 HTML+CSS实现3D旋转卡片 HTML+CSS打造伸缩式导航栏 有点小酷的input输入框动画 HTML+CSS制作闪亮的玻璃图标悬浮效果 HTML+CSS制作富有弹性的导航栏标签 HTML+CSS制作弹性旋转菜单...
Fancy Input是一款效果非常炫酷的Input表单输入文字动画特效jquery插件。它使用CSS3来制作动画特效,共提供了5种输入文字动画特效。
1.使用boostrap框架制作两个网页(可以使用其他框架) index.html 50%:布局合理美观大方。 getIn.html 50%:表单元素灵活应用,验证。 2.index.html 制作一个网站的首页可以类似学校的官网,也可以制作个人介绍的...
搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天我将结合实例给大家介绍一下如何使用CSS3和jQuery来实现一个可伸缩功能的搜索条。 HTML 在需要放置搜索条的页面中放置...
css3对话框插件来制作动画弹出表单
jQ跟CSS3鼠标点击按钮加载特效是一款jQuery基于css3属性制作表单提交激活按钮,文字加载动画过程特效。
操作案例1:制作jQuery Mobile基本页面 1.3.4 jQuery Mobile对话框 1.4 与电话整合 操作案例2:制作商家信息展示页面 2 jQuery Mobile UI组件 2.1 网格系统 2.2 格式化内容 2.3 可折叠的内容 2.4 工具栏 操作案例3:...
作为WEB前端开发者,jQuery和CSS3肯定用得也比较多,那么下面就分享一些由jQuery和CSS3制作成的特效,希望大家会喜欢。 1、基于jQuery和CSS3的圆盘抽奖 这个小程序可以让你在网站上轻松的添加一个抽奖应用,应用是...
《精通JavaScript+jQuery》从JavaScript的基础知识开始...在此基础之上又通过精彩的实例详细讲解了jQuery的相关技术:主要包括jQuery的基础、如何使用jQuery控制页面、制作动画与特效、简化Ajax以及jQuery插件等内容。
遇到网页设计问题的童鞋也可以提问,这些年总结了一些学生网页制作的经验:一般的网页作业需要融入以下知识点: div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频Flash的应用、ul li、下拉...