LES FORMULAIRES
- Formulaire
Comme vous le savez déjà un formulaire permet de récupérer des informations auprès de l'internaute qui sont transmises à un serveur pour divers traitements ( enregistrement de nouvel utilisateur, vérification d'identité, etc..).
Exercice 4.1
Le but va être de réaliser un formulaire d'identification, votre formulaire devra ressembler à celui-ci:
Créer la page formulaire.html qui va recevoir votre formulaire.
1. Saisir le code ci-dessous et tester
<!DOCTYPE html>
<html lang= fr>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 24px;
}
.form-row {
display: flex;
align-items: center;
margin-bottom: 12px;
max-width: 560px;
}
.form-row label {
width: 180px;
margin-right: 12px;
}
.form-row input {
flex: 1;
padding: 8px;
font-size: 1rem;
}
button {
padding: 10px 18px;
font-size: 1rem;
cursor: pointer;
}
.message {
margin-top: 16px;
color: green;
}
.error {
margin-top: 16px;
color: red;
}
</style>
</head>
<body>
<h1>Formulaire</h1>
<form id=userForm>
<div class=form-row>
<label for=nom>Nom</label>
<input type=text id=nom name=nom />
</div>
<div class=form-row>
<label for=pass1>Mot de passe</label>
<input type=password id=pass1 name=pass1 />
</div>
<div class=form-row>
<label for=pass2>Confirmer le mot de passe</label>
<input type=password id=pass2 name=pass2 />
</div>
</form>
<div id=feedback></div>
</body>
</html>
2. Modifier le contenu de la balise Form: placer après le champ de saisie du nom un div de la classe form-row, ce div contiendra le champ de saisie du Prénom:
3. Modifier le contenu de la balise Form: placer après le champ de saisie de confirmation du mot de passe un div de la classe form-row, ce div contiendra un bouton de type submit :
<button type=submit> Envoyer</button>
Tester le rendu. Vous pouvez maintenant passer au chapitre JavaScript qui va vérifier ce formulaire
Créé avec HelpNDoc Personal Edition: Créer des sites web d'aide facilement