表單提示

<textarea cols="50" rows="15" name="code" class="xhtml:collapse:firstline[1]">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Form Prompt&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;meta http-equiv="Pragma" content="no-cache"/&gt; &lt;meta http-equiv="Cache-Control" content="no-cache"/&gt; &lt;mce:style type="text/css"&gt;&lt;!-- /* 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 */ } /* The pointer image is hadded by using another span */ .hint .hint-pointer { position: absolute; left: -10px; top: 5px; width: 10px; height: 19px; } --&gt;&lt;/mce:style&gt;&lt;style type="text/css" mce_bogus="1"&gt; /* 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 */ } /* The pointer image is hadded by using another span */ .hint .hint-pointer { position: absolute; left: -10px; top: 5px; width: 10px; height: 19px; } &lt;/style&gt; &lt;mce:script type="text/javascript"&gt;&lt;!-- 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&lt;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&lt;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); // --&gt;&lt;/mce:script&gt; &lt;/head&gt; &lt;body&gt; &lt;p style="font:normal 12px/15px Arial;" mce_style="font:normal 12px/15px Arial;"&gt;Tab or click through the fields to reveal the hints.&lt;/p&gt; &lt;dl&gt; &lt;dt&gt; &lt;label for="firstname"&gt;First Name:&lt;/label&gt; &lt;/dt&gt; &lt;dd&gt; &lt;input name="firstname" id="firstname" type="text"/&gt; &lt;span class="hint"&gt;This is the name your mama called you when you were little.&lt;span class="hint-pointer"&gt;&lt;/span&gt;&lt;/span&gt; &lt;/dd&gt; &lt;dt&gt; &lt;label for="lastname"&gt;Last Name:&lt;/label&gt; &lt;/dt&gt; &lt;dd&gt; &lt;input name="lastname" id="lastname" type="text"/&gt; &lt;span class="hint"&gt;This is the name your sergeant called you when you went through bootcamp.&lt;span class="hint-pointer"&gt;&lt;/span&gt;&lt;/span&gt; &lt;/dd&gt; &lt;dt&gt; &lt;label for="email"&gt;Email:&lt;/label&gt; &lt;/dt&gt; &lt;dd&gt; &lt;input name="email" id="email" type="text"/&gt; &lt;span class="hint"&gt;The thing with the @ symbol and the dot com at the end.&lt;span class="hint-pointer"&gt;&lt;/span&gt;&lt;/span&gt; &lt;/dd&gt; &lt;dt&gt; &lt;label for="year"&gt;Birth Year:&lt;/label&gt; &lt;/dt&gt; &lt;dd&gt; &lt;select id="year" name="year"&gt; &lt;option value=""&gt;YYYY&lt;/option&gt; &lt;option value="1066"&gt;1066&lt;/option&gt; &lt;option value="1492"&gt;1492&lt;/option&gt; &lt;option value="1776"&gt;1776&lt;/option&gt; &lt;option value="1812"&gt;1812&lt;/option&gt; &lt;option value="1917"&gt;1917&lt;/option&gt; &lt;option value="1942"&gt;1942&lt;/option&gt; &lt;option value="1999"&gt;1999&lt;/option&gt; &lt;/select&gt; &lt;span class="hint"&gt;Pick a famous year to be born in.&lt;span class="hint-pointer"&gt;&lt;/span&gt;&lt;/span&gt; &lt;/dd&gt; &lt;dt&gt; &lt;label for="username"&gt;Username:&lt;/label&gt; &lt;/dt&gt; &lt;dd&gt; &lt;input name="username" id="username" type="text"/&gt; &lt;span class="hint"&gt;Between 4-12 characters.&lt;span class="hint-pointer"&gt;&lt;/span&gt;&lt;/span&gt; &lt;/dd&gt; &lt;dt&gt; &lt;label for="password"&gt;Password:&lt;/label&gt; &lt;/dt&gt; &lt;dd&gt; &lt;input name="password" id="password" type="password"/&gt; &lt;span class="hint"&gt;Between 5-13 characters, but not 7.Never 7.&lt;span class="hint-pointer"&gt;&lt;/span&gt;&lt;/span&gt; &lt;/dd&gt; &lt;dt class="button"&gt;&lt;/dt&gt; &lt;dd class="button"&gt; &lt;input type="submit" class="button" value="Submit"/&gt; &lt;/dd&gt; &lt;/dl&gt; &lt;/body&gt; &lt;/html&gt;</textarea>