06 Avr2016
Page d'inscription dans un club de sport
Objectifs :
- Création d'un formulaire d'inscription à l'aide de HTM5.
- Mise en forme avec le CSS 3.
- Implémentation des validateurs avec JavaScript.
Énoncé :
On désire créer un formulaire d’inscription suivant :
![phpinscription](/images/articles/php/phpinscription.png)
Formulaire
- Créer le formulaire à l'aide des balaises HTML 5.
- Les champs doivent être obligatoirement renseignés,
Exemple de champ obligatoire
- Le champ nom prend le focus dès le chargement de la page,
- Le nom doit être en majuscule,
- Le prénom doit commencer par une lettre en majuscule les autres lettres doivent être en minuscule,
- La champ date de naissance doit être sous la forme : jj/mm/aaaa.
- Les champs doivent être obligatoirement renseignés,
- Créer une feuille de style afin d'appliquer le style suivant sur le formulaire :
- legend : couleur bleu, taille 14px, police arial avec un ombre pour le text.
- la première colonne du tableau : couleur blueviolet, taille 10px, police arial.
- la dernière colonne du tableau : couleur rouge, police arial.
- les inputs : un arrière plan avec couleur aquamarine, bordure avec une couleur bleu avec des coins arrondis,
- au passage de la sourie sur un input, la couleur de l'arrière plan sera changée en bisque,
- lorsqu'un champ prend le focus, la couleur de l'arrière plan sera aliceblue la couleur de l'écriture sera en black,
- au passage de la sourie sur les boutons la dimension change automatiquement ainsi que les types les bordures,
Formulaire avec les styles
- Rajouter une fonction javascript permettant de tester que les deux mots de passe sont bien identiques :
Mots de passe non identiquesMots de passe non identiques
Structure de projet
![phpinscription6](/images/articles/php/phpinscription6.png)
Structure de projet
Page inscription "index.php"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ma page</title> <script src="/script/script.js" type="text/javascript"></script> <link href="/style/style.css" rel="stylesheet" type="text/css"/> </head> <body> <form onsubmit="verify()"> <fieldset> <legend>Inscription</legend> <table border="0"> <tr> <td>Nom</td> <td><input type="text" name="nom" value="" required="" autofocus="" placeholder="Tapez votre nom" pattern="[A-Z]*" title="En majuscule"/></td> <td>*</td> </tr> <tr> <td>Prenom</td> <td><input type="text" name="prenom" value="" /></td> <td>*</td> </tr> <tr> <td>Date de naissance</td> <td><input type="date" name="date" value="" /></td> <td>*</td> </tr> <tr> <td>Mot de passe</td> <td><input id="pass1" type="password" name="pass1" value="" /></td> <td>*</td> </tr> <tr> <td>Confirmez mot de passe</td> <td><input id="pass2" type="password" name="pass2" value="" oninput="verify()"/></td> <td>*<label id ="msg"></label></td> </tr> <tr> <td></td> <td><input type="submit" value="Valider" class="classe" /> <input type="reset" value="Annuler" class="classe"/></td> <td></td> </tr> </table> </fieldset> </form> </body> </html>
Feuille de style "style.css"
legend{ color: blue; font-size: 14px; font-family: arial; text-shadow: 2px 2px greenyellow; } tr td:first-child{ color: blueviolet; font-size: 10px; font-family: arial; } tr td:last-child{ color: red; font-family: arial; } input{ background: aquamarine; border: 2px solid blue; border-radius: 10px 10px; } input:hover{ background: bisque; } input:focus{ background: aliceblue; color: black; } .classe:hover{ width: 70px; height: 40px; border: 2px dashed background; background: beige; } label{ font-size: 9px; font-style: italic; }
Script JavaScript "script.js"
function verify() { var pass1 = document.getElementById("pass1").value; var pass2 = document.getElementById("pass2").value; if (pass1 !== pass2) { document.getElementById("msg").innerHTML = "Invalid"; document.getElementById("msg").style.color = "red"; } else { document.getElementById("msg").innerHTML = "Valide"; document.getElementById("msg").style.color = "green"; } }