Formulaires HTML

Qu'est-ce qu'un formulaire HTML

Les formulaires HTML sont nécessaires pour collecter différents types d'entrées d'utilisateurs, telles que les coordonnées telles que le nom, l'adresse e-mail, les numéros de téléphone ou des détails tels que les informations de carte de crédit, etc.

Les formulaires contiennent des éléments spéciaux appelés contrôles tels que la boîte de saisie, les cases à cocher, les boutons radio, les boutons d'envoi, etc. Les utilisateurs complètent généralement un formulaire en modifiant ses contrôles, par exemple en saisissant du texte, en sélectionnant des éléments, etc. et en soumettant ce formulaire à un serveur Web pour un traitement ultérieur.

La balise <form> est utilisée pour créer un formulaire HTML. Voici un exemple simple de formulaire de connexion :

<form>

    <label>Nom d'utilisateur: <input type="text"></label>
    <label>Mot de passe: <input type="password"></label>
    <input type="submit" value="Envoyer">

</form>

La section suivante décrit les différents types de contrôles que vous pouvez utiliser dans votre formulaire.

La balise input

C'est l'élément le plus couramment utilisé dans les formulaires HTML.

Il vous permet de spécifier différents types de champs de saisie utilisateur, en fonction de l'attribut type. Un élément input peut être de type champ de texte, champ de mot de passe, case à cocher, bouton radio, bouton d'envoi, bouton de réinitialisation, boîte de sélection de fichier, ainsi que plusieurs nouveaux types d'inputs introduits dans HTML5.

Les typesd'input les plus fréquemment utilisés sont décrits ci-dessous.

Champs de texte

Les champs de texte sont des zones d'une ligne qui permettent à l'utilisateur de saisir du texte.

Les contrôles de saisie de texte sur une seule ligne sont créés à l'aide d'un élément <input> dont l'attribut type a la valeur text. Voici un exemple de saisie de texte sur une seule ligne utilisée pour prendre le nom d'utilisateur :

<form>

    <label for="username">Nom d'utilisateur:</label>
    <input type="text" name="username" id="username">

</form>

— La sortie de l'exemple ci-dessus ressemblera à ceci :

Remarque : La balise <label> est utilisée pour définir les étiquettes des éléments <input>. Si vous souhaitez que votre utilisateur saisisse plusieurs lignes, vous devez utiliser <textarea> à la place.

Champ Mot de passe

Les champs de mot de passe sont similaires aux champs de texte. La seule différence est; les caractères d'un champ de mot de passe sont masqués, c'est-à-dire qu'ils sont affichés sous forme d'astérisques ou de points. C'est pour empêcher quelqu'un d'autre de lire le mot de passe sur l'écran. Il s'agit également d'un contrôle de saisie de texte sur une seule ligne créé à l'aide d'un élément <input> dont l'attribut type a la valeur password.

Voici un exemple d'entrée de mot de passe sur une seule ligne utilisée pour prendre le mot de passe de l'utilisateur :

<form>

    <label for="user-pwd">Mot de passe:</label>
    <input type="password" name="user-password" id="user-pwd">

</form>

— La sortie de l'exemple ci-dessus ressemblera à ceci :

Boutons radio

Les boutons radio permettent à l'utilisateur de sélectionner exactement une option parmi un ensemble prédéfini d'options. Il est créé à l'aide d'un élément <input> dont l'attribut type a la valeur radio.

Voici un exemple de boutons radio qui peuvent être utilisés pour collecter des informations sur le sexe de l'utilisateur :

<form>

    <input type="radio" name="genre" id="masculin">
    <label for="masculin">Masculin</label>
    <input type="radio" name="genre" id="feminin">
    <label for="feminin">Féminin</label>

</form>

— La sortie de l'exemple ci-dessus ressemblera à ceci :

Cases à cocher

Les cases à cocher permettent à l'utilisateur de sélectionner une ou plusieurs options parmi un ensemble prédéfini d'options. Il est créé à l'aide d'un élément <input> dont l'attribut  type a la valeur checkbox.

Voici un exemple de cases à cocher qui peuvent être utilisées pour collecter des informations sur les loisirs de l'utilisateur :

<form>

    <input type="checkbox" name="sports" id="football">
    <label for="soccer">Football</label>

    <input type="checkbox" name="sports" id="musique">
    <label for="cricket">Musique</label>

    <input type="checkbox" name="sports" id="lecture">
    <label for="baseball">Lecture</label>

</form>

La sortie de l'exemple ci-dessus ressemblera à ceci :

Remarque : Si vous souhaitez qu'un bouton radio ou une case à cocher soit sélectionné par défaut, vous pouvez ajouter l'attribut checked à l'élément d'entrée, comme <input type="checkbox" checked>.

Zone de sélection de fichier

Les champs de fichier permettent à un utilisateur de rechercher un fichier local et de l'envoyer en pièce jointe avec les données du formulaire. Les navigateurs Web tels que Google Chrome et Firefox affichent un champ de saisie de sélection de fichier avec un bouton Parcourir qui permet à l'utilisateur de naviguer sur le disque dur local et de sélectionner un fichier.

Ceci est également créé à l'aide d'un élément <input>, dont la valeur d'attribut type est définie sur file. 

<form>

    <label for="file-select">Téléverser un fichier:</label>
    <input type="file" name="upload" id="file-select">

</form>

La sortie de l'exemple ci-dessus ressemblera à ceci :

Il existe plusieurs autres types d'entrée. Veuillez consulter le chapitre sur les nouveaux types d'entrée HTML5 pour en savoir plus sur les nouveaux types d'entrée introduits.

Zone de texte multiligne

Textarea est un contrôle de saisie de texte sur plusieurs lignes qui permet à un utilisateur de saisir plusieurs lignes de texte. Les contrôles de saisie de texte multiligne sont créés à l'aide d'un élément <textarea>. 

<form>

    <label for="biographie">Biographie:</label>
    <textarea rows="5" cols="40" name="biographie" id="biographie"></textarea>

</form>

La sortie de l'exemple ci-dessus ressemblera à ceci :

Champ de sélection

Une zone de sélection est une liste déroulante d'options qui permet à l'utilisateur de sélectionner une ou plusieurs options dans une liste déroulante d'options. La boîte de sélection est créée à l'aide de l'élément <select> et de l'élément <option>.

Les éléments <option> au sein de l'élément <select> définissent chaque élément de la liste.

<form>

    <label for="ville">Ville :</label>

    <select name="ville" id="ville">
        <option value="kinshasa">Kinshasa</option>
        <option value="lubumbashi">Lubumbashi</option>
        <option value="goma">Goma</option>
    </select>

</form>

La sortie de l'exemple ci-dessus ressemblera à ceci :

Boutons Soumettre et Réinitialiser

Un bouton d'envoi est utilisé pour envoyer les données du formulaire à un serveur Web. Lorsque le bouton Soumettre est cliqué, les données du formulaire sont envoyées au fichier spécifié dans l'attribut action du formulaire pour traiter les données soumises.

Un bouton de réinitialisation réinitialise tous les contrôles du formulaire aux valeurs par défaut. Essayez l'exemple suivant en tapant votre nom dans le champ de texte, puis cliquez sur le bouton Soumettre pour le voir en action.

<form method="post" action="action.php" >

    <label for="prenom">Prénom:</label>
    <input type="text" name="prenom" id="prenom">

    <input type="submit" value="Envoyer">
    <input type="reset" value="Reset">

</form>

Tapez votre nom dans le champ de texte ci-dessus et cliquez sur le bouton Soumettre pour le voir en action.

Remarque : Vous pouvez également créer des boutons à l'aide de la balise <button>. Les boutons créés avec l'élément <button> fonctionnent comme les boutons créés avec l'élément input, mais ils offrent des possibilités de rendu plus riches en permettant l'intégration d'autres éléments HTML.

Regroupement des contrôles de formulaire

Vous regroupez également des contrôles et des étiquettes logiquement liés dans un formulaire Web à l'aide de l'élément <legend>. Le regroupement des contrôles de formulaire en catégories permet aux utilisateurs de localiser plus facilement un contrôle, ce qui rend le formulaire plus convivial. Essayons l'exemple suivant pour voir comment cela fonctionne :

<form>
    <fieldset>

        <legend>Contacts</legend>

        <label>Email: <input type="email" name="email"></label>
        <label>Téléphone: <input type="text" name="phone"></label>

    </fieldset>
</form>

Attributs de formulaire fréquemment utilisés

Le tableau suivant répertorie les attributs d'élément de formulaire les plus fréquemment utilisés :

Remarque : L'attribut name représente le nom du formulaire dans la collection de formulaires. Sa valeur doit être unique parmi les formulaires d'un document et ne doit pas être une chaîne vide.

Astuce : Toutes les données envoyées via la méthode get sont visibles dans la barre d'adresse du navigateur. Mais, les données envoyées via post ne sont pas visibles pour l'utilisateur.