Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS Download

Un form di login... vibrante

di: Alvin Laini 01 Giugno 2009

In questo articolo vedremo, tramite l'ausilio di intriganti effetti speciali resi disponibili dalla libreria Javascript Script.aculo.us, come sia possibile implementare un campo di login che vibra nel caso in cui l'utente inserisca un valore errato. Se vi fosse mai capitato di effettuare un login su un sistema Mac OS X inserendo dei dati errati,riconoscerete immediatamente questo effetto. Ecco l'esempio.

L'esempio in questione è una sempice login box composta dai soliti campi “Username” e “Password”. Questi saranno composti inizialmente con i valori corretti “html” e “html”, ma se modificherete uno dei dei campi con valori errati, vi sembrerà per un istante di vedere doppio ;).

Analizziamo ora insieme il codice HTML dell'esempio in questione:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Login shaker - Script.aculo.us</title>
<script src="http://anystrike.altervista.org/scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
<script src="http://anystrike.altervista.org/scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="javascript/script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/stile.css" media='screen' />
</head>
<body>
<form method="post" action="javascript:void(0);" onsubmit="formSubmit(); return false;" id='shakeForm'>
<div id='shakeBox'>
<fieldset>
<legend>Login Box:</legend>
<div id='msgBox' style="display:none;"></div>
<label>Username: <input type="text" value="html" name="username" maxlength="30" /> <input type="submit" value="login" name="loginSubmit" /></label><br />
<label>Password: <input type="password" value="html" name="pw" maxlength="20" /></label>
</fieldset>
</div>
</form>
</body>
</html>

Nella sezione head, vengono implementati i vari script necessari al funzionamento dell'applicazione: le librerie Prototype,Script.aculo.us e il file script.js che analizzeremo in seguito.

Dopodiché possiamo notare due zone delimitate da due tag div: shakeBox comprenderà tutti gli elementi che in caso di errore dovranno vibrare; msgBox per eventuali messaggi d'errore inviati lato server.

Una volta inseriti i dati, questi verranno elaborati lato server e se il nome utente o la password non saranno conformi alle regole imposte, il box contenente il form “vibrerà”, come succede di default su un sistema Mac. Nel caso i dati siano invece corretti, l'applicazione segnalerà visivamente con un messaggio, il buon esito dell'operazione.

Pagina successiva

Pagine: