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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS+CSS实现的一种交互体验表单页面

Javascript: 代码生成器 document.write(); 不错的文字特效，逐字变色效果; javascript下用键盘控制层的移动的代码; 有提示确定与取消功能的弹出式窗的代码; js下弹出窗口的变通; 在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码; 用JAVASCRIPT如何给<textarea></textarea>赋值; 将光标定位到textarea的某一行的javascript代码; 把textarea中字符串里含有的回车换行替换成<br>的javascript代码; 让textarea控件的滚动条怎是位与最下方; 用javascript实现改变TEXTAREA滚动条和按钮的颜色，以及怎样让滚动条变得扁平; 在textarea中屏蔽js的某个function的javascript代码; textarea的value是html文件源代码,存成html文件的代码; 在textarea中显示html页面的javascript代码; 用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中; 如何做到打开一个页面，过几分钟自动转到另一页面; JS 建立对象的方法; 运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序; JS Timing; 用javascript实现图片马赛克后显示并切换

No. « ‹ 62 63 64 65 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 348 ::

收藏到网摘: n/a

javascript 仿开心网好友印象功能(点击文字弹出印象框) js 效率组装字符串 StringBuffer

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 全选提示:你可先修改部分代码,再按运行]

javascript 仿开心网好友印象功能(点击文字弹出印象框) js 效率组装字符串 StringBuffer

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

评论 (0) All

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