Главная » 2011 » Март » 11 » Названия полей ввода формы входа (делаем названия полей формы входа внутри них)

<tr><td width="20%" nowrap="nowrap">E-mail:$UID_ICON$</td><td><input class="loginField" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50"/></td></tr>
<tr><td>Пароль:</td><td><input class="loginField" type="password" name="password" size="20" style="width:100%" maxlength="15"/></td></tr>

<tr><td width="20%" nowrap="nowrap">E-mail:$UID_ICON$</td><td>

<div id="username">
<label for="username-field" class="overlabel">Имя пользователя...</label>
<input id="username-field" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50" tabindex="1"/>
</div>
</td></tr>
<tr><td>Пароль:</td><td>

<div id="password">
<label for="password-field" class="overlabel">Пароль...</label>
<input id="password-field" type="password" name="password" size="20" style="width:100%" maxlength="15" tabindex="2"/>
</div>
</td></tr>

<script type="text/javascript">
function initOverLabels () {
   if (!document.getElementById) return;   

   var labels, id, field;

   labels = document.getElementsByTagName('label');
   for (var i = 0; i < labels.length; i++) {

   if (labels[i].className == 'overlabel') {

   id = labels[i].htmlFor || labels[i].getAttribute('for');
   if (!id || !(field = document.getElementById(id))) {
   continue;
   }   

   labels[i].className = 'overlabel-apply';

   if (field.value !== '') {
   hideLabel(field.getAttribute('id'), true);
   }

   field.onfocus = function () {
   hideLabel(this.getAttribute('id'), true);
   };
   field.onblur = function () {
   if (this.value === '') {
   hideLabel(this.getAttribute('id'), false);
   }
   };

   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;
   }
   }
}

window.onload = function () {
   setTimeout(initOverLabels, 50);
};
</script>
<style type="text/css">
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;
}
   label.overlabel {
   color:#999;
   }
   label.overlabel-apply {
   position:absolute;
   top:3px;
   left:5px;
   z-index:1;
   color:#999;
   font-family: Verdana;
   font-size: 11px;
   }
</style>