JS+CSS实现的一种交互体验表单页面

更新时间：2009年12月23日 00:21:45 作者：

JavaScript+CSS实现精致的、符合标准的表单效果，鼠标点击输入框，立即会提示用户该输入框的填写要求，色彩搭配也极和谐，我喜欢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS+CSS实现的一种交互体验</title> <style> @charset "gb2312"; /*元素初始值*/ html {background: #FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin: 0px;padding: 0px;} p{cursor: text;} h1,h2,h3,h4,h5,h6{font-size:100%;} ol,ul{list-style-type: none;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} table{border-collapse:collapse;} fieldset,img{border:0;} img{display:block;} caption,th{text-align:left;} body{position: relative;font-size:62.5%;font-family: "宋体"} a{text-decoration: none;} /*demo所用元素值*/ #need {margin: 20px auto 0;width: 610px;} #need li {height: 26px;width: 600px;font: 12px/26px Arial, Helvetica, sans-serif;background: #FFD;border-bottom: 1px dashed #E0E0E0;display: block;cursor: text;padding: 7px 0px 7px 10px!important;padding: 5px 0px 5px 10px;} #need li:hover,#need li.hover {background: #FFE8E8;} #need input {line-height: 14px;background: #FFF;height: 14px;width: 200px;border: 1px solid #E0E0E0;vertical-align: middle;padding: 6px;} #need label {padding-left: 30px;} #need label.old_password {background-position: 0 -277px;} #need label.new_password {background-position: 0 -1576px;} #need label.rePassword {background-position: 0 -1638px;} #need label.email {background-position: 0 -429px;} #need dfn {display: none;} #need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 7px;color: #676767;} </style> <script type="text/javascript"> function suckerfish(type, tag, parentId) { if (window.attachEvent) { window.attachEvent("onload", function() { var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); type(sfEls); }); } } hover = function(sfEls) { for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" hover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" hover\\b"), ""); } } } suckerfish(hover, "li"); </script> </head> <body> <ol id="need"> <li><label class="old_password">原始密码：</label> <input name='' type='password' id='' /></li> <li><label class="new_password">新的密码：</label> <input name='' type='password' id='' /><dfn>（密码长度为6~20字节。不修改请留空）</dfn></li> <li><label class="rePassword">重复密码：</label> <input name='' type='password' id='' /></li> <li><label class="email">邮箱设置：</label> <input name='' type='text' id='' /><dfn>（我们不会给您发送任何垃圾邮件。）</dfn></li> </ol> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript 未知高度元素垂直居中实现代码
JavaScript未知高度元素的垂直居中代码，允许你在不知道外层元素高度的情况下，用Js强制其居中，虽然用了JavaScript有些麻烦，不过效果甚好，值得一试。
2009-12-12
javascript实现的仿腾讯QQ窗口抖动效果代码
JS实现的腾讯QQ窗口抖动效果代码,类似qq的抖动效果
2008-09-09
js新浪首页可关闭背景效果代码
新浪首页可关闭背景效果代码，每逢过节或遇到重大节日，新浪等门户的首页都为以此为背景，改变风格与事件对应，当然了用户可选择关闭背景，你现在看到的这款代码就是实现背景的关闭，实用简单。
2010-11-11
一种让页面完全把过来显示的脚本代码
一种让页面完全把过来显示的脚本代码...
2007-09-09
JS实现简洁(隔行换色、高亮显示)表格特效
JS实现的表格，使用JavaScript编写实现一个简洁的表格，大家参考一下，加入了隔行换色，并且鼠标滑过时还有高亮显示特效，我看到了都目瞪口呆确实相当不错，有兴趣的朋友可以参考下
2012-12-12
JavaScript实现渐变色效果(不使用图片)
JavaScript渐变色，不使用图片实现渐变色，这样有利的节省了时间省去使用图片的麻烦，而且占用资源极小，渐变色也均匀漂亮，我看了都目瞪口呆，非常值得学习哦，接下来为您详细介绍
2012-12-12
很弱的js表格换行效果（表格移动行）
很弱的js表格换行效果（表格移动行），可以将表格的一行向上或向下移动，主要是学习dom之表格控制操作
2012-11-11
js实现小鱼吐泡泡在页面游动特效
非常逼真的用js写的，在页面中有一条游动的吐泡泡小鱼，对于爱好海洋类的个人网站，加这个效果蛮漂亮的
2008-09-09
弹出提示的效果代码
脚本之家模拟弹出提示效果代码
2008-05-05
js星空效果代码
用js实现的星空效果代码，正壮观
2008-09-09