Un formulaire HTML est une section d’un document contenant des contrôles tels que des champs de texte, des champs de mot de passe, des cases à cocher, des boutons radio, un bouton d’envoi, des menus, etc.
Un formulaire HTML facilite la saisie des données à envoyer au serveur pour traitement, telles que nom, adresse électronique, mot de passe, numéro de téléphone, etc.
Pourquoi utiliser un formulaire
Les formulaires HTML sont obligatoires si vous souhaitez collecter des données auprès du visiteur du site.
<form action="server url" method="get|post"> //controles d’entré ex: textfield, textarea, radiobutton, button </form>
Balises de formulaire HTML
Voyons la liste des balises de formulaire HTML 5.
Étiquette | La déscription |
---|---|
<form> | Il définit un formulaire HTML pour saisir les entrées du côté utilisé. |
<input> | Il définit un contrôle d’entrée. |
<textarea> | Il définit un contrôle d’entrée multiligne. |
<label> | Il définit une étiquette pour un élément d’entrée. |
<fieldset> | Il regroupe l’élément lié dans un formulaire. |
<legend> | Il définit une légende pour un élément <fieldset>. |
<select> | Il définit une liste déroulante. |
<optgroup> | Il définit un groupe d’options associées dans une liste déroulante. |
<option> | Il définit une option dans une liste déroulante. |
<button> | Il définit un bouton cliquable. |
Élément HTML <form>
L’élément HTML <form> fournit une section de document pour prendre les entrées de l’utilisateur. Il fournit diverses commandes interactives pour la soumission d’informations au serveur Web, telles qu’un champ de texte, une zone de texte, un champ de mot de passe, etc.
Remarque: L’élément <form> ne crée pas lui-même un formulaire, mais constitue un conteneur destiné à contenir tous les éléments de formulaire requis, tels que <input>, <label>, etc.
Syntaxe:
<form> // éléments de formulaire </form>
Elément HTML <input>
L’élément HTML <input> est un élément de formulaire fondamental. Il est utilisé pour créer des champs de formulaire, pour prendre les entrées de l’utilisateur. Nous pouvons appliquer différentes entrées classées pour collecter différents utilisateurs du formulaire d’informations. Voici l’exemple pour montrer la saisie de texte simple.
Exemple:
<body> <form> Entrez votre nom <br> <input type="text" name="username"> </form> </body>
Résultat :
Le contrôle TextField
L’attribut type = « text » de la balise input crée un contrôle textfield . L’attribut name est facultatif, mais il est requis pour le composant côté serveur, tel que JSP, ASP, PHP, etc.
<form> Nom: <input type="text" name="nom"/> <br/> Prénom: <input type="text" name="prénom"/> <br/> </form>
Résultat :
Balise <textarea> dans le formulaire
La balise <textarea> est utilisée pour insérer du texte sur plusieurs lignes dans un formulaire. La taille de <textarea> peut être spécifiée en utilisant l’attribut « rows » ou « cols » ou par CSS.
Exemple:
<!DOCTYPE html> <html> <head> <title>Formulair</title> </head> <body> <form> Entrez votre addresse:<br> <textarea rows="2" cols="20"></textarea> </form> </body> </html>
Résultat :
Il est préférable d’avoir une étiquette dans la forme. Comme il rend l’analyseur de code / navigateur / convivial.
Si vous cliquez sur l’étiquette, elle se concentrera sur le contrôle de texte. Pour ce faire, vous devez avoir un attribut dans la balise label qui doit être identique à l’attribut id de la balise input.
<form> <label for="nom">Nom: </label> <br/> <input type="text" id="nom" name="nom"/> <br/> <label for="prenom">Prénom: </label> <input type="text" id="prenom" name="prenom"/> <br/> </form>
Contrôle de mot de passe
Le mot de passe n’est pas visible par l’utilisateur dans le contrôle du champ de mot de passe.
<form> <label for="password">Mot de passe: </label> <input type="password" id="password" name="password"/> <br/> </form>
Résultat :
HTML 5 Contrôle email
Le champ email est nouveau dans HTML 5. Il valide le texte pour une adresse e-mail correcte. Vous devez utiliser @ et. dans ce champ.
<form> <label for="email">Email: </label> <input type="email" id="email" name="email"/> <br/> </form>
Résultat :
Le bouton radio
Le bouton radio type=« radio » permet de sélectionner une option parmi plusieurs. Il est utilisé pour la sélection du genre, des questions de quiz, etc.
Si vous utilisez un nom pour tous les boutons radio, un seul bouton radio peut être sélectionné à la fois.
En utilisant les boutons radio pour plusieurs options, vous ne pouvez choisir qu’une seule option à la fois.
<form> <label for="gender">Genre: </label> <input type="radio" id="gender" name="gender" value="male"/>Male <input type="radio" id="gender" name="gender" value="femelle"/>Female <br/> </form>
Résultat :
Contrôle de case à cocher (Checkbox)
Le contrôle de case à cocher checkbox est utilisé pour vérifier plusieurs options à partir de cases à cocher données.
<form> Hobby:<br> <input type="checkbox" id="cricket" name="cricket" value="cricket"/> <label for="cricket">Cricket</label> <br> <input type="checkbox" id="football" name="football" value="football"/> <label for="football">Football</label> <br> <input type="checkbox" id="hockey" name="hockey" value="hockey"/> <label for="hockey">Hockey</label> </form>
Résultat :
Remarque: Celles-ci sont similaires aux boutons radio, à la différence qu’il peut choisir plusieurs options à la fois et que le bouton radio peut sélectionner un bouton à la fois.
Le bouton Submit
Les HTML <input type = « submit »> permettent d’ajouter un bouton de soumission sur une page Web. Lorsque l’utilisateur clique sur le bouton d’envoi, le formulaire est alors envoyé au serveur.
Syntaxe:
<input type="submit" value="submit">
Le type = submit, en spécifiant qu’il s’agit d’un bouton d’envoi
L’attribut value peut être tout ce que nous écrivons sur le bouton d’une page Web.
L’attribut name peut être omis ici.
Exemple:
<form> <label for="nom">Entrer le nom</label><br> <input type="text" id="name" name="name"><br> <label for="pass">Entrer le Mot de passe</label><br> <input type="Password" id="pass" name="pass"><br> <input type="submit" value="submit"> </form>
Résultat :
Elément HTML <fieldset>:
L’élément <fieldset> en HTML permet de regrouper les informations associées d’un formulaire. Cet élément est utilisé avec l’élément <legend> qui fournit une légende aux éléments groupés.
Exemple:
<form> <fieldset> <legend>Information utilisateur:</legend> <label for="name">Nom</label><br> <input type="text" id="name" name="name"><br> <label for="pass">Mot de passe</label><br> <input type="Password" id="pass" name="pass"><br> <input type="submit" value="submit"> </fieldset> </form>
Résultat :
Exemple de formulaire HTML
Voici l’exemple d’une forme d’inscription simple.
<! DOCTYPE html> <html> <tête> <title> Formulaire en HTML </title> </head> <body> <h2> Formulaire d'inscription </h2> <form> <fieldset> <legend> Informations personnelles de l'utilisateur </legend> <label> Entrez votre nom complet </label> <br> <input type = "text" name = "name"> <br> <label> Entrez votre email </label> <br> <input type = "email" name = "email"> <br> <label> Entrez votre mot de passe </label> <br> <input type = "password" name = "pass"> <br> <label> confirmez votre mot de passe </label> <br> <input type = "password" name = "pass"> <br> <br> <label> Entrez votre sexe </label> <br> <input type = "radio" id = "genre" name = "genre" value = "homme"/> Homme <br> <input type = "radio" id = "genre" name = "sexe" value = "femme"/> Femme <br/> <input type = "radio" id = "genre" name = "genre" value = "autres"/> autres <br/> <br> Entrez votre adresse: <br> <textarea> </textarea> <br> <type d'entrée = "submit" value = "inscription"> </fieldset> </form> </body> </html>
Résultat :