Comment faire un formulaire en HTML
Code de base
<form action="/envoyer.php" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message :</label>
<textarea id="message" name="message" rows="4" cols="40" required></textarea>
<label for="mechant">Choisissez un méchant :</label>
<select id="mechant" name="mechant">
<option value="ganondorf">Ganondorf</option>
<option value="bowser">Bowser</option>
<option value="drfacilier">Dr. Facilier</option>
<option value="davyjones">Davy Jones</option>
</select>
<button type="submit">Envoyer</button>
</form>
Créer un formulaire peut s’avérer utile pour générer des contacts sur son site ou pour faire des demandes de devis en ligne. Je vais donc vous montrer comment en faire un, basiquement, en HTML.
Résultat obtenu
Explications
Ce formulaire permet d’envoyer en « post » les informations entrées par l’utilisateur. L’attribut « name » que l’on voit sur les input servent justement à transmettre les valeurs du champs au serveur. Concernant les éléments, il existe plusieurs balises HTML dans un formulaire :
<label> | Lié avec son input grâce à l’attribut « id », quand on clique dessus, il redirige vers l’input associé (pas mal pour l’accessibilité et ceux qui ont du mal à cliquer) |
<input> | Champs remplissables par l’utilisateur, ils peuvent prendre plusieurs type comme text, number, email, radio, checkbox, etc… ca dépend du type de donnée que vous voulez obtenir |
<textarea> | Zone de texte pour mettre des messages personnalisés, renvoi une chaine de caractères |
<select> | Liste de choix (menu déroulant) qui vient avec ses <option> et la possibilité de mettre un attribut « multiple » pour permettre la selection multiple |
<button> | Utilisé pour soumettre le formulaire quand l’attribut « type » est égal à « submit », ou bien pour reset le formulaire si c’est égal à « reset » ou encore juste pour le rendre neutre mais utilisable pour des comportements que l’on voudrait faire en JS, grâce à la valeur « button » |
<fieldset> | Utilisé pour grouper visuellement des champs |
<datalist> | Liste de suggestions pour un <input> |