Syntaxe pour les formulaires

Nous avons déjà utilisé quelques formulaires dans les pages précédentes. On fait rapidement le point ici sur la syntaxe des ces éléments et les différents types de champ permettant d'entrer des données (elles peuvent être numériques, textes, adresses email...)

Définition

On délimite les éléments d'un formulaire avec la balise HTML <form>

1
<form method="post" action="fichier.php">
2
3
ICI LES ELEMENTS DU FORMULAIRE
4
5
</form>
6

Nous n'avons pas utilisé pour le moment les attributs method et action et nous ne les utiliserons pas dans ces quelques pages.

Nous reviendrons sur leur rôle lorsque nous parlerons de PHP.

SimulationZone de texte

Les éléments <input> dont l'attribut type vaut text permettent de créer des champs de saisie avec du texte sur une seule ligne.

Champ de saisie avec du texte sur une seule ligne

Approfondissez cet élément avec la lecture de la page suivante :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/text

SimulationZone de saisie d'un nombre

Les éléments <input> dont l'attribut type vaut number permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques.

Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.

Champ de saisie d'un nombreInformations[1]

Approfondissez cet élément avec la lecture de la page suivante :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/number

SimulationZone de texte étendue

L'élément HTML <textarea> représente un contrôle qui permet d'éditer du texte sur plusieurs lignes.

Champ de saisie avec du texte sur plusieurs lignesInformations[2]

Approfondissez cet élément avec la lecture de la page suivante :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea

SimulationCases à cocher

L'élément HTML <checkbox> vous permet d'afficher des cases à cocher et donc envoyer 1 ou plusieurs valeurs dans votre formulaire.

Affichage de cases à cocherInformations[3]

Approfondissez cet élément avec la lecture de la page suivante :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/checkbox

SimulationListe déroulante

L'élément HTML <select> représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir.

Affichage d'une liste déroulanteInformations[4]

Approfondissez cet élément avec la lecture de la page suivante :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Select

SimulationLes boutons d'option - Boutons radio

Les éléments HTML <input> dont l'attribut type vaut radio sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur.

Groupes de boutons radioInformations[5]

Approfondissez cet élément avec la lecture de la page suivante :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio