Version compl�te: jsB@nk » Form » Textarea » Accessible Compact formes
URL: https://www.javascriptbank.com/accessible-compact-forms.html
Tight sur l'espace? Utilisez cette JavaScript de créer un compact forme qui est accessible et fonctionne même si JavaScript et CSS sont éteints.
Version compl�te: jsB@nk » Form » Textarea » Accessible Compact formes
URL: https://www.javascriptbank.com/accessible-compact-forms.html
<style type="text/css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.jsbank_sample_cont {margin: 20px; padding: 20px;}.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}/*Created by: Mike Brittain Web Site: http://www.mikebrittain.com/*/FORM#login { position: relative;}DIV#username, DIV#password { position: relative; float: left; margin-right: 3px;}INPUT#username-field, INPUT#password-field { width: 10em;}LABEL.overlabel { position: absolute; top: 3px; left: 5px; z-index: 1; color: #999;}</style><script language="javascript">function initOverLabels () { if (!document.getElementById) return; var labels, id, field; // Set focus and blur handlers to hide and show // LABELs with 'overlabel' class names. labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { if (labels[i].className == 'overlabel') { // Skip labels that do not have a named association // with another field. id = labels[i].htmlFor || labels[i].getAttribute ('for'); if (!id || !(field = document.getElementById(id))) { continue; } // Hide any fields having an initial value. if (field.value !== '') { hideLabel(field.getAttribute('id'), true); } // Set handlers to show and hide labels. field.onfocus = function () { hideLabel(this.getAttribute('id'), true); }; field.onblur = function () { if (this.value === '') { hideLabel(this.getAttribute('id'), false); } }; // Handle clicks to LABEL elements (for Safari). labels[i].onclick = function () { var id, field; id = this.getAttribute('for'); if (id && (field = document.getElementById(id))) { field.focus(); } }; } }};function hideLabel (field_id, hide) { var field_for; var labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { field_for = labels[i].htmlFor || labels[i]. getAttribute('for'); if (field_for == field_id) { labels[i].style.textIndent = (hide) ? '-1000px' : '0px'; return true; } }}// Created by: Simon Willison// http://simon.incutio.com/archive/2004/05/26/addLoadEventfunction addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function() { setTimeout(initOverLabels, 50);});</script><form name="login" action="#" method="post" style="text-align: center; width: 50%;"> <div id="username"> <label for="username-field" class="overlabel"> Username</label> <input id="username-field" type="text" name="username" title="Username" value="" tabindex="1"> </div> <div id="password"> <label for="password-field" class="overlabel"> Password</label> <input id="password-field" type="password" name="password" title="Password" value="" tabindex="2"> </div> <div id="submit"> <input type="submit" name="submit" value="Login" tabindex="3"> </div></form>