Une jolie v??rification en combinant du javascript avec du css n???est pas difficile et voici un exemple d???un formulaire d???inscription asser simple en utilisant des messages d???erreurs plus jolie que la l??gendaire boite de dialogue alert
Donc au d??but nous avons notre formulaire dont voici le code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
body{
text-align:center;
margin:auto;
margin-top: 40px;
}
#global{
text-align:center;
margin:auto;
width: 400px;
height: 300px;
}
#general_form{
text-align:left
}
.input_form{
margin: 10px;
padding: 10px;
width:auto;
}
.text_input{
float:left;
display:block;
width: 80px;
height: 20px;
text-align:left;
margin-right: 20px;
}
input{
width: 100px;
height: 20px;
font-size: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id=”global”>
<div id=”text_inscription”>Formulaire d’inscription</div>
<form id=”form1″ name=”form1″ method=”post” action=”">
<div id=”general_form”>
<div class=”input_form”>
<span class=”text_input”>username</span>
<input type=”text” name=”user” id=”user” />
<span id=”msg_user”></span>
</div>
<div class=”input_form”>
<span class=”text_input”>password</span>
<input type=”password” name=”pass1″ id=”pass1″ />
<span id=”msg_pass1″></span>
</div>
<div class=”input_form”>
<span class=”text_input”>re-password</span>
<input type=”password” name=”pass2″ id=”pass2″ />
<span id=”msg_pass2″></span>
</div>
</div>
</form>
</div>
</body>
</html>
Vous remarquerez que le tout est fait en div afin de nous simplifi?? la tache et nous donner plus de libert??, biensure rien n???est obligatoire, personnellement quand il s???agit d???une r??gion ou va y???avoir manipulation je privil??gie les div au table
Donc voila pour le d??but, maintenant avant de continu?? nous avons besoin de jolie icon, une pour le succss et l???autre pour le failed, plusieurs site sont l?? a cette effet comme iconlook ou iconfinder
Apres avoir trouv?? les icons que nous allons utilis?? nous pouvons nous attaquer au code JavaScript, au d??but on cr??e une fonction appeler validate() que voici
<script language=”javascript”>
// fonction de test de validit??s
function validate(id){
var val = document.getElementById(id).value;
var img_span = document.getElementById(’msg_’+id);
// condition de verification de la validit??
if(val != “” & val.length > 4){
img_span.innerHTML = “<img src=’agt_action_success.png’ border=0 />”;
}else{
img_span.innerHTML = “<img src=’agt_action_fail.png’ border=0 />”;
}
}
</script>
et ou on va l???ex??cuter a chaque fois que l???utilisateur tape un caract??re ce qui implique l???utilisation de l?????v??nement onkeypress dans notre champ text
onkeypress=”validate(this.id)”
Donc au final voila le code qu???on aura
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
body{
text-align:center;
margin:auto;
margin-top: 40px;
}
#global{
text-align:center;
margin:auto;
width: 400px;
height: 300px;
}
#general_form{
text-align:left
}
.input_form{
margin: 10px;
padding: 10px;
width:auto;
}
.text_input{
float:left;
display:block;
width: 80px;
height: 20px;
text-align:left;
margin-right: 20px;
}
input{
width: 100px;
height: 20px;
font-size: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>
<script language=”javascript”>
// fonction de test de validit??s
function validate(id){
var val = document.getElementById(id).value;
var img_span = document.getElementById(’msg_’+id);
// condition de verification de la validit??
if(val != “” & val.length > 4){
img_span.innerHTML = “<img src=’agt_action_success.png’ border=0 />”;
}else{
img_span.innerHTML = “<img src=’agt_action_fail.png’ border=0 />”;
}
}
</script>
</head>
<body>
<div id=”global”>
<div id=”text_inscription”>Formulaire d’inscription</div>
<form id=”form1″ name=”form1″ method=”post” action=”">
<div id=”general_form”>
<div class=”input_form”>
<span class=”text_input”>username</span>
<input type=”text” name=”user” id=”user” onkeypress=”validate(this.id)” />
<span id=”msg_user”></span>
</div>
<div class=”input_form”>
<span class=”text_input”>password</span>
<input type=”password” name=”pass1″ id=”pass1″ onkeypress=”validate(this.id)”/>
<span id=”msg_pass1″></span>
</div>
<div class=”input_form”>
<span class=”text_input”>re-password</span>
<input type=”password” name=”pass2″ id=”pass2″ onkeypress=”validate(this.id)”/>
<span id=”msg_pass2″></span>
</div>
</div>
</form>
</div>
</body>
</html>
Pour voir l???exemple cliquez ici
Pour le t??l??charger cliquez ici
Jeu de briques
Snake
Pacman
Bubble