En regardant mes tweet, un lien SmashingMagazine faisant référence à cet article a attiré mon attention.
Le principe est de déplacer les label des zone de saisie des formulaire à l’intérieur de la zone de saisie lorsque cette dernière ne contient pas le focus, et de le remettre à sa place lors du focus.
L’article original utilisait JQuery , je vous propose son adaptation pour RightJS.
<head>
<style>
body { font:12px/1.3 Arial, Sans-serif; }
form { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
div { clear:both;position:relative;margin:0 0 10px; }
label { cursor:pointer;display:block; }
input[type="text"] { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; }
input[type="text"]:focus { border-color:#777; }
input[name="zip"] { width:150px; }
/* submit button */
input[type="submit"] { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333;background:#ddd; }
input[type="submit"]:active{ margin-top:1px; }
</style>
<script type="text/javascript" src="js/right-min.js"></script>
<script type="text/javascript">
// <!--
var slidingLabelInit = function slidingLabelInit() {
// wanna collect all labels wrapped in a slider tag class
$$('form#info .slider label').each(function(el){
var labelColor = '#999';
var restingPosition = '5px';
// put label in input
el.setStyle({
'color' : labelColor,
'position' : 'absolute',
'top' : '6px',
'left' : restingPosition,
'display' : 'inline',
'z-index' : '99'
});
// grab the input value
var inputval = el.next('input').value;
// grab the label width, then add 5 pixels to it
var labelMoveLeft = (el.dimensions()).width + 5;
if ((typeof inputval !== "undefined" && inputval !== null)) {
//moveTo
el.moveTo( -labelMoveLeft,7 );
}
el.siblings('input').first().on( 'focus', function(){
el = this.siblings('label').first();
if ((typeof this.value !== "undefined" && this.value !== null)) {
//moveTo
el.moveTo( -((el.dimensions()).width+5),7 );
}
}).on( 'blur', function(){
el = this.siblings('label').first();
if ((typeof this.value == "undefined" || this.value == null || this.value.length ==0 )) {
//moveTo
el.moveTo( 5 ,7 );
}
});
});
};
document.observe('ready', slidingLabelInit);
// -->
</script>
</head>
<body>
<div id="element-id1"></div>
<h1>Sliding Labels Original by <a href="http://www.csskarma.com" rel="home">CSSKarma</a></h1>
<p><a href="http://www.csskarma.com/blog/sliding-labels/">Back to the Original article</a></p>
<form action="" method="post" id="info">
<h2>Contact Information</h2>
<div id="name-wrap" class="slider">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div><!--/#name-wrap-->
<div id="email-wrap" class="slider">
<label for="email">E–mail</label>
<input type="text" id="email" name="email">
</div><!--/#email-wrap-->
<div id="street-wrap" class="slider">
<label for="st">Street</label>
<input type="text" id="st" name="st">
</div><!--/#street-wrap-->
<div id="city-wrap" class="slider">
<label for="city">City & State</label>
<input type="text" id="city" name="city">
</div><!--/#city-wrap-->
<div id="zip-wrap" class="slider">
<label for="zip">Zip code</label>
<input type="text" id="zip" name="zip">
</div><!--/#zip-wrap-->
<input type="submit" id="btn" name="btn" value="submit">
</form>
</body>
Il reste l’animation a améliorer, ça fera partie d’un prochaine tutorial
