Apprendre HTML : Balises de Formulaire

Les formulaires permettent aux utilisateurs d’interagir avec la page via des champs de texte, des cases à cocher, des menus de sélection, des boutons, etc.

Ils sont extrêmement utiles lorsqu’il s’agit d’envoyer des données à un serveur web.

Quelques exemples d’utilisations des formulaires sur le web :

• Filtrer des produits sur un site e-commerce
• S’inscrire / se connecter à un site
• Uploader des fichiers
• Mettre en place un moteur de recherche
• Formulaire de contact
• …

Conteneur <form>

Un formulaire se déclare au sein de la balise <form> qui joue le rôle de conteneur. Cette balise fonctionne avec 2 attributs :

• L’attribut action renseigne une URL à laquelle doivent être envoyées les données collectées par le formulaire. Valeur par défaut : /
• L’attribut method défini la méthode HTTP utilisée pour envoyer les données. Valeur par défaut : GET

<form action="ma-page.php" method="GET"></form>

Etiquettes <label>

Chaque champ de formulaire peut être accompagnée d’une étiquette descriptive. Cette étiquette est déclarée avec la balise <label>.

On prendra systématiquement l’habitude de placer un attribut for, désignant l’information qui sera saisie dans le champ de formulaire.

<form action="ma-page.php" method="GET">
	<label for="firstname">Prénom</label>
	<label for="lastname">Nom</label>
</form>

Balise polyvalente <input>

La balise orpheline <input> est la plus utilisée pour définir des champs de formulaires. Un input peut se transformer en divers types de champs en fonction de son attribut type.

Nous allons nous pencher sur ses valeurs principales, mais il en existe des dizaines consultables sur la documentation officielle.

Champs textuels

Les champs textuels permettent aux utilisateurs de saisir librement du texte. Ce texte peut néanmoins être caractérisé par des formats différents via l’attribut type. En fonction de la valeur précisée, le visuel n’est pas toujours identique.

• type="text" : Format textuel standard. Exemple : nom, prénom, titre d’article…
• type="email" : Format spécifique aux emails, à la forme → *******@****.** Exemple : [email protected], [email protected]…
• type="password" : Format utilisé pour la saisie de mot de passe. Les saisies au clavier sont masquées à l’écran par des « points noirs ».
• type="number" : Format utilisé pour la saisie de nombre. Des petites flèches apparaissent dans le champ pour en modifier la valeur. Exemple : âge, prix…
• type="url" : pour des URLs - indique que la valeur du champ doit commencer par http:// ou https://.
• …

<form>
	<label for="firstname">Prénom :</label>
	<input type="text" id="firstname" name="firstname" maxlength="20" value="Jean" required>
	<label for="lastname">Nom :</label>
	<input type="text" id="lastname" name="lastname" maxlength="20" value="Dupont" required>
	<label for="email">Adresse email :</label>
	<input type="email" id="email" name="email" required>
	<label for="old">Age :</label>
	<input type="number" id="old" name="old" placeholder="Vous devez être majeur">
</form>

• id : Identifie le champ. Si attribut id de <input> = attribut for de <label> → lie l’étiquette au champ. C’est aussi cela qui permet de mettre le focus dans le champ lorsque vous cliquez sur le texte de l’étiquette.
  • placeholder : Spécifie un texte indicatif grisé dans le champ textuel. À l’écriture du premier caractère, ce texte disparaît pour laisser place à la saisie.
  • value : Spécifie une valeur par défaut pour le champ.
  • maxlength : Spécifie le nombre de caractères maximal autorisé pour ce champ.
  • required : Spécifie que ce champ de formulaire est obligatoire.
  • name : Spécifie un nom à tous nos champs de formulaire. Cette identification est essentielle pour récupérer les données côté PHP.
  • …

Sélecteurs

Les sélecteurs permettent de choisir des options dans une liste. Cette liste peut être à choix unique ou multiple.

Choix unique (bouton radio)

Aussi appelés « boutons radios », on les créé avec l’attribut type="radio".

<form>
	<p>Vous êtes :</p>
	<input type="radio" value="women" id="women" name="gender" required>
	<label for="women">Femme</label>
	<input type="radio" value="men" id="men" name="gender" checked>
	<label for="other">Homme</label>
	<input type="radio" value="other" id="other" name="gender">
	<label for="other">Autre</label>
</form>

• id : Identifie le champ. Si attribut id de <input> = attribut for de <label> → lie l’étiquette au champ. C’est aussi cela qui permet de mettre le focus dans le champ lorsque vous cliquez sur le texte de l’étiquette.
• value : Spécifie la valeur qui sera envoyée via le formulaire si l’option est cliquée.
• checked : Permet de pré-cocher le bouton radio.
• required : Spécifie que ce champ de formulaire est obligatoire.
• name : Spécifie un nom à tous nos champs de formulaire. Cette identification est essentielle pour en récupérer les données côté serveur (avec PHP par exemple).

Choix multiple (checkbox)

Aussi appelés « cases à cocher », on les créé avec l’attribut type="checkbox".

<form>
	<p>Langages web maîtrisés :</p>
	<input type="checkbox" value="html" id="html" name="languages[]" required checked>
	<label for="html">HTML</label>
	<input type="checkbox" value="css" id="css" name="languages[]" checked>
	<label for="css">CSS</label>
	<input type="checkbox" value="js" id="js" name="languages[]">
	<label for="js">JS</label>
	<input type="checkbox" value="php" id="php" name="languages[]">
	<label for="php">PHP</label>
</form>

• id : Identifie le champ. Si attribut id de <input> = attribut for de <label> → lie l’étiquette au champ. C’est aussi cela qui permet de mettre le focus dans le champ lorsque vous cliquez sur le texte de l’étiquette.
• value : Spécifie la valeur qui sera envoyée via le formulaire si l’option est cliquée.
• checked : Permet de pré-cocher la case.
• required : Spécifie que ce champ de formulaire est obligatoire.
• name : Spécifie un nom à tous nos champs de formulaire. Cette identification est essentielle pour en récupérer les données côté serveur (avec PHP par exemple).

Bouton de soumission

Il est possible de transformer la balise <input> en bouton de soumission de formulaire via l’attribut type="submit".

<form>
	<input type="submit" value="Valider">
</form>

Zone de texte <textarea>

Pour écrire des textes longs (articles de blog, fiches produits, formulaire de contact, etc.), la balise <input> n’est plus adaptée, on utilisera alors la balise <textarea>.

<form>
	<label for="message">Votre message :</label>
	<textarea placeholder="Décrivez la raison de votre réclamation..." maxlength="1000" id="message" name="message" rows="5" cols="50" required></textarea>
</form>

• id : Identifie le champ. Si attribut id de <input> = attribut for de <label> → lie l’étiquette au champ. C’est aussi cela qui permet de mettre le focus dans le champ lorsque vous cliquez sur le texte de l’étiquette.
• placeholder : Spécifie un texte indicatif grisé dans le champ textuel. À l’écriture du premier caractère, ce texte disparaît pour laisser place à la saisie.
• required : Spécifie que ce champ de formulaire est obligatoire.
• maxlength : Spécifie le nombre de caractères maximal autorisé pour ce champ.
• rows : Définit un nombre de lignes pour le champ.
• cols : Définit un nombre de colonnes pour le champ.
• name : Spécifie un nom à tous nos champs de formulaire. Cette identification est essentielle pour récupérer les données côté PHP.

Liste déroulante <select> et <option>

Une liste déroulante est un sélecteur à choix unique ou multiple. Sa finalité est la même que celle des balises <input type="checkbox"> et <input type="radio">. Une question légitime se pose alors… Pourquoi existe-t-elle ??

Cette balise est très utile lorsque de nombreuses options sont sélectionnables (départements, code postaux, pays…) car elle a l’avantage de ne pas occuper d’espace dans le flux du document.

• La balise <select> permet de déclarer une liste déroulante.
• Les balises <option> permettent de définir des éléments de liste.
• La balise <optgroup> permet quant à elle de regrouper des éléments dans un même groupe. Son attribut label permet de définir le nom de ce groupement d’éléments.

<form>
	<!-- Liste déroulante simple -->
	<label for="category">Vous êtes un développeur :</label>
	<select id="category" name="category" required>
		<option value="back">Back</option>
		<option value="front">Front</option>
		<option value="full-stack" selected>Full-stack</option>
	</select>

	<!-- Liste déroulante stucturée -->
	<label for="languages">Votre langage préféré parmi :</label>
	<select id="languages" name="languages">
		<optgroup label="Front">
			<option value="html">HTML</option>
			<option value="css">CSS</option>
			<option value="js">Javascript</option>
		</optgroup>
		<optgroup label="Back">
			<option value="php">PHP</option>
			<option value="ruby">Ruby</option>
		</optgroup>
	</select>
</form>

• id : Identifie le champ. Si attribut id de <input> = attribut for de <label> → lie l’étiquette au champ. C’est aussi cela qui permet de mettre le focus dans le champ lorsque vous cliquez sur le texte de l’étiquette.
• required : Spécifie que ce champ de formulaire est obligatoire.
• multiple : Spécifie que plusieurs options sont sélectionnables.
• selected : S’applique sur une <option> pour spécifier que celle-ci sera sélectionnée par défaut.
• label : S’applique sur un <optgroup> pour définir le nom du groupe d’options.
• name : Spécifie un nom à tous nos champs de formulaire. Cette identification est essentielle pour récupérer les données côté PHP.