一般我们可以通过表单的 title 属性呈现“提示(tooltip)”功能，但是样式过于单一，结合《 [新鲜出炉] 简单的弹出菜单》一文中的效果，我们可以做出自定义样式的提示效果，让你的表单具有“Web 2.0”的味道。 演示：http://www.jindie.net/20060424/ (临时) 主文件(包括脚本)： HTML: <!-- Head # B --> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Apollo System - 用户注册</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <!-- Head # E --> <body> <!-- Header # B --> <!-- Header # E --> <!-- Content # B --> <form action="?action=Reg" method="post" name="regstep1" id="regstep1" onsubmit="if (!formcheck()) return false;"> <table width="480" border="0" align="center" cellpadding="5" cellspacing="1" class="tableBorder"> <thead> <tr> <td colspan="2" align="center" class="tableheader">新会员注册系统</td> </tr> <tr class="tr1"> <td colspan="2">请填写下列各项信息(<span class="required">*</span>为必填项目)。</td> </tr> </thead> <tbody> <tr class="tr0"> <td width="30%" align="right"><label> <span class="required">*</span>用户名</label></td> <td><input name="Account" class="input" id="Account" size="12" maxlength="12" alt="请输入你想注册的用户名称,不得含有特殊字符与空格" onfocus="showMessage(this);" onblur="hideMessage(this);" title="请输入您想住的的用户名。用户名允许长度4-12个字符，允许字符为字母(a-z)和数字(0-9)。" /> <input class="input" name="Submit16" onclick="javascript:check_exist();return false;" type="reset" value="重名检测" /> <!--用户名长度限制在4—12个字符之间。用户名填写范围(0-9 A-Z)字母或数字组合--></td> </tr> <tr class="tr1"> <td align="right"><span class="required">*</span><label>登陆密码</label></td> <td><input name="Password" type="password" class="input" id="Password" size="12" maxlength="16" onfocus="showMessage(this);" onblur="hideMessage(this);" title="密码的长度限制在6-16个字符之间。密码的组成元素只能是英文字母、数字。" /></td> </tr> <tr class="tr0"> <td align="right"><span class="required">*</span><label>密码确认</label></td> <td><input name="ConfirmPassword" type="password" class="input" id="ConfirmPassword" size="12" maxlength="16" onfocus="showMessage(this);" onblur="hideMessage(this);" title="请输入与“密码”相同的信息，这是为了防止设置密码时输入错误。" /></td> </tr> <tr class="tr1"> <td align="right"><span class="required">*</span><label>密码提问</label></td> <td><select name="Question" id="Question" onfocus="showMessage(this);" onblur="hideMessage(this);" title="如果您忘记密码，系统会提出此问题。选择一个容易勾起您的回忆的问题吧！"> <option value="您上学第一所学校的名字？">您上学第一所学校的名字？</option> <option value="您的生日是什么？">您的生日是什么？</option> <option value="您最喜欢吃的菜是什么？">您最喜欢吃的菜是什么？</option> <option value="您最喜欢的运动是什么？">您最喜欢的运动是什么？</option> <option value="您最喜欢的演员是谁？">您最喜欢的演员是谁？</option> <option value="您的父亲叫什么名字？">您的父亲叫什么名字？</option> <option value="你兄弟有几个？">你兄弟有几个？</option> <option value="您的爱人叫什么？">您的爱人叫什么？</option> <option value="您的宠物叫什么名字？">您的宠物叫什么名字？</option> </select></td> </tr> <tr class="tr0"> <td align="right"><span class="required">*</span><label>密码答案</label></td> <td><input name="Answer" class="input" id="Answer" size="32" onfocus="showMessage(this);" onblur="hideMessage(this);" title="此答案与前面的问题对应，当您忘记密码时，系统会根据您在这里设定的提示问题和答案帮助您重新设置密码(<em>切忌密码提问和密码答案相同,以防别人盗取您的密码</em>)。" /></td> </tr> <tr class="tr1"> <td align="right"><span class="required">*</span><label>联系邮箱</label></td> <td><input name="EMail" type="text" id="EMail" size="32" onfocus="showMessage(this);" onblur="hideMessage(this);" title="如果您填写了密码答案请填写您的联系电子邮箱地址。" /></td> </tr> <tr class="tr0"> <td align="right"> <input type="hidden" name="askmejoin" value="" /></td> <td><input name="b1" class="input1" type="submit" value="注册" /> <input name="reset" type="reset" class="input1" value="取消" /></td> </tr> <tr class="tr1"> <td align="right"><label>注意事项</label></td> <td> <ul> <li>请仔细填写上边的所有信息，以便与您联系 </li> <li>如有问题，请连系本站客户服务中心</li> </ul></td> </tr> </tbody> </table> </form> <!-- Content # E --> <!-- Footer # B --> <!-- Footer # E --> <div id="form_message"> <div id="form_message_header"></div> <div id="form_message_content"></div> <div id="form_message_footer"></div> </div> <script language="javascript" type="text/javascript"> var oMessage; // 全局变量，菜单 var sTitle; //function showMessage(e, sMessage) function showMessage(obj, sMessage) { oMessage = document.getElementById("form_message"); oMessage.style.left = findPosX(obj) + 15 + "px"; //oMessage.style.left = ((e.clientX - 0) + "px"); oMessage.style.top = findPosY(obj) + obj.offsetHeight - 2 + "px"; //oMessage.style.top = ((e.clientY + document.documentElement.scrollTop) - 3 + "px"); oMessage.style.visibility = "visible"; //oMessage.style.display = "block"; document.getElementById("form_message_content").innerHTML = obj.title; sTitle = obj.title; obj.title = ""; } function hideMessage(obj) { if (oMessage) { oMessage.style.visibility = 'hidden'; //oMessage.style.display = 'none'; obj.title = sTitle; sTitle = ""; } } function findPosX(obj) { var iPosLeft = 0; while (obj.offsetParent) { iPosLeft += obj.offsetLeft; obj = obj.offsetParent; } return iPosLeft; } function findPosY(obj) { var iPosTop = 0; while (obj.offsetParent) { iPosTop += obj.offsetTop; obj = obj.offsetParent; } return iPosTop; } </script> </body> </html> CSS 文件： HTML: /* HTML */ body { color: #000; background: #fff; } body, table, tr, td, input, textarea, select { font: 12px/1.5em Tahoma, Helvetica, Sans-Serif, Simsun; } em { color: #f00; /*font-weight: bold;*/ } /* fonts */ .required { color: #f00; } .redfonts { color: #f00; background: #fff; } .bluefonts { color: #00f; background: #fff; } .boldfonts { font-weight: bold; } /* TABLES */ .tableborder { border: 1px solid #f90; } .tableheader { color: #000; font-weight: bold; background: #fc0; border-bottom: 2px solid #f90; } .tr0 { color: #000; background: #fcfcfc; } .tr1 { color: #000; background: #f6f6f6; } #form_message { width: 200px; /*display: none;*/ visibility: hidden; position: absolute; } #form_message_header { background: url(images/form_message_top.gif) no-repeat center bottom; height: 17px; } #form_message_content { background: url(images/form_message_middle.gif) repeat-y center center; padding: 8px 10px; } #form_message_footer { background: url(images/form_message_bottom.gif) no-repeat center top; height: 2px; } 使用到的图片见附件。 另外，在《 [新鲜出炉] 简单的弹出菜单》一文中，因为缺少单位“px”，Firefox 下无法得到期望效果。 使用 IE 的用户会发现提示框会被下拉菜单遮挡，这一直都是个头痛的问题，但是在 Firefox 下不会出现。 可以考虑使用模拟下拉菜单的方式来实现，也可以将信息框巧妙地定位在下拉菜单之外的区域。 模拟下拉菜单，可以参考我的《Nice form》一文。
进一步说明。因为我们将提示信息作为 title 的值，所以开始的时候将鼠标覆盖在表单上，也会出现系统定义的提示。 这个可以通过一些方法来解决的，例如不定义 title 属性，而是将信息内容作为 showMessage 函数的参数。