I. Utilisation des formulaires
Résumé des éléments clés:
Balise de formulaire
<form><br></br> Éléments d'entrée<br></br></form>
Les balises input avec différents attributs type:
Valeurs possibles:
text: Champ texte<br></br>password: Champ mot de passe<br></br>checkbox: Cases à cocher<br></br>radio: Boutons radio (mêmes name pour groupe exclusif)<br></br>file: Sélecteur de fichier<br></br>submit: Bouton soumettre<br></br>reset: Bouton réinitialiser<br></br>textarea: Zone de texte<br></br><br></br>select&option: Menu déroulant<br></br><br></br>Attributs:<br></br> selected: Sélection par défaut<br></br> disabled: Désactiver l'élément<br></br> checked: Cocher par défaut<br></br> size: Nombre d'options visibles<br></br> multiple: Autoriser plusieurs sélections<br></br> placeholder: Indice d'entrée<br></br><br></br> Étiquettes associées:<br></br> <label></label>
Exemples concrets:
Formulaire de saisie
<form action="https://example.com">
Prénom:<input type="text" name="prenom"/><br>
Nom de famille:<input type="text" name="nom">
</form>
Champ mot de passe
<form action="https://example.com">
Identifiant:<input type="text" name="identifiant"/><br>
Mot de passe:<input type="password" name="motDePasse">
</form>
Boutons raddio
<form action="https://example.com">
<input type="radio" name="genre" value="masculin" />Homme<br> <!--Mêmes name pour groupe exclusif-->
<input type="radio" name="genre" value="feminin">Femme
</form>
Cases à cocher
<form action="">
<input type="checkbox" name="vehicule" value="Velo">J'ai un vélo<br>
<input type="checkbox" name="vehicule" value="Voiture">J'ai une voiture
</form>
Boutons d'action
<form action="">
Identifiant:<input type="text" name="utilisateur"/><br>
Mot de passe:<input type="password" name="mdp"><br>
<input type="submit" value="Valider" />
<input type="reset" value="Annuler">
</form>
Sélecteur de fichier
<form action="">
<input type="file" name="fichier" />
</form>
Menu déroulant
<form action="">
<select>
<option value="A">Paris</option> <!--selected pour pré-sélection-->
<option value="B">Londres</option>
</select>
</form>
Zone de texte
<form action="">
<textarea rows="10" cols="30" placeholder="Tapez votre message..."></textarea>
</form>
Bouton personnalisé
<form action="">
<input type="button" name="bouton" value="Cliquez ici"/>
</form>
Sélecteur de couleur
<input type="color" name="couleur" />
Choix interactif
Sélecteur de date
<input type="date" name="naissance" />
Date et heure avec fuseau
<form action="">
Date de naissance:<input type="datetime" name="datetime" />
</form>
Date et heure locale
<form action="">
Date de naissance:<input type="datetime-local" name="datetime" />
</form>
Adresse e-mail
<form action="">
E-mail: <input type="email" name="courriel">
</form>
Bouton image
<input type="image" src="bouton_valider.png" alt="Soumettre">
Envoie les coordonnées au serveur
Sélecteur mois/année
Date (mois/année): <input type="month" name="mois" />
Champ numérique
Quantité (1 à 5): <input type="number" name="quantite" min="1" max="5">
Potentiomètre
<input type="range" name="valeur" min="1" max="10" step="2">
Champ recherche
Recherche: <input type="search" name="recherche">
Numéro de téléphone
<form action="">
Téléphone: <input type="tel" name="telephone">
</form>
Sélecteur d'heure
Heure: <input type="time" name="heure">
URL
<form action="">
Site web: <input type="url" name="site">
</form>
Sélecteur semaine/année
<form action="">
Semaine: <input type="week" name="semaine">
</form>
Groupe titré
<form><br></br> <fieldset>
<legend>Connexion utilisateur</legend><br></br> </fieldset><br></br></form>
Exemple complet
1
2 <html>
3 <head>
4 <title>Formulaire</title>
5 <style>
6 .boite{
7 width: 330px;
8 height: 403px;
9 background-color: #12B7F5;
10 margin: 0 auto;
11 }
12 .boite .entree{
13 width: 220px;
14 height: 30px;
15 font-size: 18px;
16 font-weight: 600;
17 }
18 .boite form{
19 width: 100%;
20 height: 100%;
21 margin: 3px 19px;
22 }
23 .bouton{
24 width: 170px;
25 height: 42px;
26 border-radius: 10px 0px 0px 10px;
27 text-align: center;
28 line-height:42px;
29 float: left;
30 background-color: green;
31 color: white;
32 font-weight: 700;
33 }
34 .fleche{
35 width: 0px;
36 height: 0px;
37 border-style: solid;
38 border-color: transparent transparent transparent green;
39 border-width: 21px 24px 21px 38px;
40 float: left;
41 }
42 </style>
43
44 </head>
45 <body>
46 <div class="boite">
47 <form>
48 Courriel:<input type="email" name="email" class="entree"/><br>
49 Mot de passe:<input type="password" name="mdp" class="entree"/><br>
50 Nom réel:<input type="text" name="nomReel" class="entree"/><br>
51 <label>
52
53 Genre: <input type="radio" name="genre">Homme
54 <input type="radio" name="genre">Femme
55 </label><br>
56
57 Date de naissance:<select>
58 <option selected>Sélectionnez</option>
59 </select>Année
60 <select>
61 <option selected>---</option>
62 </select>Mois
63 <select>
64 <option selected>---</option>
65 </select>Jour<br>
66
67 <span style="color: blue;font-size:12px;margin: 10px 0px;" >Pourquoi cette information ?</span><br>
68 <label style="line-height: 57px;position: relative;">
69
70 Mon rôle:<select>
71 <option>Sélectionnez</option>
72 </select><span style="font-size: 11px;">(Essentiel)</span>
73 </label><br>
74 ![]() <span style="display:block;font-size: 12px;text-align: center;">Image non lisible ?</span>
75 <label style="line-height: 60px;">Code de vérification:<input type="text" name="code" style="width: 117px;height: 27px; line-height: 40px;"></label>
76 <div class="bouton">
77 Créer un compte
78 </div>
79 <div class="fleche"></div>
80 </form>
81 </div>
82
83 </body>
84 </html>
Exemple complet### II. Formulaire de connexion
Code source:
1
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .zone{
8 width: 430px;
9 height: 330px;
10 background-color: #e5c9c9;
11 margin: 0 auto;
12 position: relative;
13 }
14 .zone .enTete{
15 width: 100%;
16 height:110px;
17 background-color: #3648da;
18 border: 2px solid black;
19
20 }
21 .corps{
22 width: 100%;
23 height: 210px;
24 background-color: aliceblue;
25 border: 2px solid red;
26 position: relative;
27 }
28 .photo{
29 width: 70px;
30 height: 70px;
31 display: block;
32 background-color: #e8e0e0;
33 position: absolute;
34 left: 180px;
35 top: 75px;
36 border-radius: 50%;
37 box-shadow: 0px 3px 14px #125ea4;
38 z-index: 10;
39 }
40 .contenu{
41 width: 250px;
42 height: 190px;
43 padding: 50px 0 0 0;
44 position: absolute;
45 left:90px;
46 right: 0px;
47 }
48 .zone .corps .contenu #champTexte{
49 width: 227px;
50 height: 33px;
51 border: none;
52 border-bottom: 1px solid #e5e5e5;
53 font-size: 18px;
54 font-weight: 500;
55 }
56 .zone .corps .contenu #champMotPasse{
57 width: 227px;
58 height: 33px;
59 border: none;
60 border-bottom: 1px solid #12b7f5;
61 font-size: 31px;
62
63 }
64 .info{
65 font-size: 12px;
66 font-weight: 500;
67 color: #b1b1b1;
68 }
69 .lien{
70 font-size: 11px;
71 padding-left: 26px;
72 color: #b1b1b1;
73 }
74 #boutonConnexion{
75 width:16.5rem ;
76 height:2.1875rem;
77 background-color:#1399ca;
78 border-radius: 6px;
79 font-size: 16px;
80 color: #fff;
81
82 }
83 </style>
84
85 </head>
86 <body>
87 
88 <div class="zone">
89 <div class="enTete">
90
91 </div>
92 <div class="corps">
93 <div class="contenu">
94 <form action="">
95 <input type="text" name="identifiant" id="champTexte"/>
96 <input type="password" name="motDePasse" id="champMotPasse"/>
97 <input type="checkbox" name="connexionAuto"/><span class="info">Connexion automatique</span>
98 <input type="checkbox" name="souvenir"/><span class="info">Mémoriser</span>
99 <a href="" class="lien">Mot de passe oublié ?</a>
100 </form>
101 <input type="submit" name="connexion" value="Se connecter" id="boutonConnexion"/>
102 </div>
103 </div>
104 <i class="photo"></i>
105 </div>
106 </body>
107 </html>
Exemple complet