注册
登录
标签
在线时间兑换积分
帮助
精品酷站论坛
»
CSS代码交流
» Formfieldhints.--表单提示效果.
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
[css提高]
Formfieldhints.--表单提示效果.
tension
管理员
个人空间
发短消息
加为好友
当前离线
1
#
大
中
小
发表于 2008-6-13 10:51
只看该作者
Formfieldhints.--表单提示效果.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Form field hints with CSS and JavaScript</title> <style type="text/css"> /* All form elements are within the definition list for this example */ dl { font:normal 12px/15px Arial; position: relative; width: 350px; } dt { clear: both; float:left; width: 130px; padding: 4px 0 2px 0; text-align: left; } dd { float: left; width: 200px; margin: 0 0 8px 0; padding-left: 6px; } /* The hint to Hide and Show */ .hint { display: none; position: absolute; right: -250px; width: 200px; margin-top: -4px; border: 1px solid #c93; padding: 10px 12px; /* to fix IE6, I can't just declare a background-color, I must do a bg image, too! So I'm duplicating the pointer.gif image, and positioning it so that it doesn't show up within the box */ background: #ffc url("http://bbs.pickbar.com/month_0806/20080613_5972d943306e8a88f9fdgbO3gRiiJ1RJ.gif") no-repeat -10px 5px; } /* The pointer image is hadded by using another span */ .hint .hint-pointer { position: absolute; left: -10px; top: 5px; width: 10px; height: 19px; background: url("http://bbs.pickbar.com/month_0806/20080613_5972d943306e8a88f9fdgbO3gRiiJ1RJ.gif") left top no-repeat; } </style> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++){ // test to see if the hint span exists first if (inputs[i].parentNode.getElementsByTagName("span")[0]) { // the span exists! on focus, show the hint inputs[i].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs[i].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } // repeat the same tests as above for selects var selects = document.getElementsByTagName("select"); for (var k=0; k<selects.length; k++){ if (selects[k].parentNode.getElementsByTagName("span")[0]) { selects[k].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } selects[k].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } } addLoadEvent(prepareInputsForHints); </script> </head> <body> <p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p> <dl> <dt> <label for="firstname">First Name:</label> </dt> <dd> <input name="firstname" id="firstname" type="text" /> <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="lastname">Last Name:</label> </dt> <dd> <input name="lastname" id="lastname" type="text" /> <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="email">Email:</label> </dt> <dd> <input name="email" id="email" type="text" /> <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span> </dd> <dt><label for="year">Birth Year:</label></dt> <dd> <select id="year" name="year"> <option value="">YYYY</option> <option value="1066">1066</option> <option value="1492">1492</option> <option value="1776">1776</option> <option value="1812">1812</option> <option value="1917">1917</option> <option value="1942">1942</option> <option value="1999">1999</option> </select> <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="username">Username:</label> </dt> <dd> <input name="username" id="username" type="text" /> <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="password">Password:</label> </dt> <dd> <input name="password" id="password" type="password" /> <span class="hint">Between 5-13 characters, but not 7. Never 7.<span class="hint-pointer"> </span></span> </dd> <dt class="button"> </dt> <dd class="button"> <input type="submit" class="button" value="Submit" /> </dd> </dl> </body> </html>
提示:您可以先修改部分代码再运行
附件:
您所在的用户组无法下载或查看附件
UID
1
帖子
707
精华
24
积分
2169
阅读权限
200
在线时间
51 小时
注册时间
2007-5-26
最后登录
2008-8-29
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
设计人
网页设计
设计师加油
平面设计
摄影图片
插画
代码交流区
CSS代码交流
WEB2.0 / AJAX
Javascript
JQuery
ASP,PHP,JSP...
资源共享区
酷站资源
提交酷站
PS笔刷/样式/滤镜&插件
开源软件
免费资源区
实用软件
娱乐其他
灌水专区
娱乐时尚
IT风向标
社会新闻
娱乐八卦
投资理财
智力游戏
站务区
站务管理
控制面板首页
编辑个人资料
积分记录
公众用户组
个人空间管理
基本概况
版块排行
主题排行
发帖排行
积分排行
交易排行
在线时间
管理团队
393张高清晰web2.0站点截图
425款精品毛笔墨迹+38款墨迹底纹..
10位Master级别的Photoshop高手
绝对漂亮的笔刷
Soul 近期新作品欣赏..
熟女养成日志—长草
魔幻抽象/吸血鬼传说!!
photoshop仿CG滤镜
新手必看:积分、资源币、人民币、用户级别、发贴教程
设计QQ群:31195683