Form con etichette animate in MooTools

Dare un tocco di classe al form nella sezione contatti del nostro sito può rivelarsi decisivo nel finalizzare un lavoro ben fatto: MooTools ci viene incontro con quest’effetto sliding applicato alle etichette dei campi del form. Clickando nelle aree specifiche per l’immissione dei dati richiesti, le etichette inscritte nei campi slitteranno verso sinistra, vivacizzando il form e la pagina.

Iniziamo scaricando il file javascript di MooTools necessario, a questo link, oppure effettuate il download del pacchetto al termine di questo articolo. Salviamolo nella directory principale del sito e richiamiamolo nell’<head> del nostro file index col seguente html:

<script type="text/javascript" src="mootools-1.2.4.js"></script>

E procediamo col Css, sempre all’interno del tag <head>:

</script> <style type="text/css">

div.slider { 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>

Ora è il turno del javascript, ancora all’interno dell’<head>:

<script type="text/javascript">

//when the dom is ready...

window.addEvent('domready',function() {

//a few settings

var labelColor = '#999', restingPosition = 5;

//for every form field

$$('form#info .slider label').each(function(label){

//set the label enhancements into place

label.setStyles({

color: labelColor,

position: 'absolute',

top: 6,

left: restingPosition,

display: 'inline',

'z-index': 99

});

//get input value

var input = label.getNext('input');

//grab label width, add resting position value

var width = label.getSize().x;

var move = width + restingPosition;

//onload, check if a field is filled out, if so, move the label out of the way

if(input.get('value') !== '') {

label.tween('left',0 - move);

}

// if the input is empty on focus move the label to the left

// if it's empty on blur, move it back

input.addEvents({

focus: function() {

if(input.get('value') == '') {

label.tween('left',0 - move);

}

else {

label.setStyle('left',0 - move);

}

},

blur: function() {

if(input.get('value') == ''){

label.tween('left',restingPosition);

}

}

});

});

});

</script>

Terminiamo il progetto con l’inserimento dell’html necessario nel <body> dell’index:

<div id="content"><div class="center">

<div id="content-left">

<h1 style="margin-top:20px;">Form con etichette animate in MooTools</h1>

<p>Click nei campi per attivare lo slide delle etichette</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&ndash;mail</label>

<input type="text" id="email" name="email" />

</div><!--/#email-wrap-->

<div id="street-wrap" >

<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 &amp; 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>

Chiaramente il form per funzionare correttamente deve essere integrato con il giusto codice php, e per questo vi rimandiamo al nostro specifico tutorial.

Fonte

Alla prossima!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *