# Le langage HTML/Formulaires

* Introduction
* Structure de base
* Bien commencer le HTML
* L'en-tête
* Caractères spéciaux et entités
* Titre et paragraphes
* Style de texte
* Placement des objets
* Liens
* Images
* Listes
* Tableaux
* Formulaires
* Cadres
* Multimédia
* Internationalisation
* Autres balises
* Zones de mise en forme
* XML et XHTML
* HTML5
* Conclusion
* Mots réservés
* Introduction
* Structure de base
* Bien commencer le HTML
* L'en-tête
* Caractères spéciaux et entités
* Titre et paragraphes
* Style de texte
* Placement des objets
* Liens
* Images
* Listes
* Tableaux
* Formulaires
* Cadres
* Multimédia
* Internationalisation
* Autres balises
* Zones de mise en forme
* XML et XHTML
* HTML5
* Conclusion
* Mots réservés
[ Modifier le sommaire ]
Un formulaire fournit un espace sur la page HTML où l'utilisateur peut entrer des données ; données qui pourront être envoyées au serveur pour être éventuellement traitées. Un formulaire est composé d'un ou plusieurs éléments d'entrée englobés par la balise <form>. Par exemple :
Attention : la manière dont les données envoyées au serveur seront traitées ne dépendent pas du code HTML, qui peut juste indiquer le type de communication HTTP souhaité : get ou post. Pour traiter les données du formulaire, il faut élaborer une interface capable de les traiter sur le serveur, la plus commune étant un script PHP. Le rôle de l'HTML est d'indiquer la forme que doit avoir la requête HTTP qui sera envoyée par l'agent utilisateur au serveur et comment l'interface doit se comporter du côté client.

## La balise <form>

<form> permet de regrouper plusieurs entrées sous un seul nom, ce qui permettra de les traiter ensemble. Exemple :
Ici, si vous cliquez sur « Envoyer 2 », les données saisies dans « nom » ne seront pas récupérées car le bouton « Envoyer 2 » ne porte que sur le formulaire dans lequel il se trouve (en l'occurrence « formulaire_2 »).
La balise <form> sert également à spécifier via l'attribut action l'URI du programme destiné à traiter les données validées, le protocole utilisé lors de la transaction HTTP, soit get, soit post via l'attribut method et enfin via l'attribut accept-charset l'encodage de caractères qui doit être accepté par le serveur pour manipuler ce formulaire.
L'attribut enctype permet de spécifier l'encodage pour un envoi de type POST. En particulier la valeur enctype="multipart/form-data" permet l'envoi de fichiers au serveur, en utilisant un champ de type fichier (<input type="file">). Sans l'utilisation de cet encodage, un champ fichier n'envoie que le nom du fichier au serveur, sans son contenu.

## La balise <input>

<input> est la balise la plus utilisée dans les formulaires. Elle permet par exemple de demander à l'utilisateur de la page des informations textuelles (par exemple son nom), un choix entre plusieurs options ou même de sélectionner un fichier à envoyer.

### L'attribut name

Cet attribut sert à retrouver un objet (ici la balise <input>) afin de l'exploiter en JavaScript . Il est également utilisé lors de l'envoi du formulaire vers un serveur afin d'extraire les données saisies par l'utilisateur.

### L'attribut id

Comme l'attribut name, id sert à nommer un objet dans une page web. Cependant, contrairement à l'attribut name, tous les id doivent être uniques dans toute la page. Ils servent également à la balise <label> que nous présenterons plus loin.

### L'attribut type

Le rôle de la balise est déterminée par l'attribut type. Voici une liste des possibilités qui s'offrent à vous :

#### text

    C'est un champ de saisie de texte classique.

#### password

    Ce type permet d'entrer un mot de passe. Le texte saisi est remplacé par des étoiles (le caractère « * »). Attention, avoir un champ caché à l'utilisateur ne signifie pas que personne pourra le lire car le mot de passe est transmis « en clair » sur le réseau.

#### checkbox

    C'est une simple case à cocher permettant à l'utilisateur de valider ou non une option. Elle est cochée si son attribut "checked" existe.

#### radio

    C'est une case d'option. Elle n'est jamais utilisée seule car, en groupe, elle permet à l'utilisateur de choisir une option parmi plusieurs. Le groupe est identifié par l'attribut name.

#### file

    Ce type permet à l'utilisateur de choisir un fichier afin qu'il soit envoyé vers un serveur. Afin que le contenu du fichier soit envoyé au lieu du chemin seulement, le formulaire doit spécifier un encodage différent de celui par défaut, en utilisant l'attribut enctype et utiliser la méthode POST :
    <form enctype="multipart/form-data" method="POST">

#### submit

    C'est un simple bouton permettant d'envoyer le formulaire.

#### reset

    C'est un bouton permettant de remettre le formulaire dans son état initial.

#### image

    C'est un bouton contenant une image permettant d'envoyer le formulaire. L'URL de l'image est spécifiée par l'attribut src.

#### hidden

    C'est un champ caché qui permet à l'auteur du formulaire de faire passer des informations au serveur qui n'ont pas à être modifiées par l'utilisateur. Attention, même si l'utilisateur ne peux pas voir directement ces champs, leur valeur est aisément modifiable. Il ne faut donc JAMAIS faire confiance aux données venant de ces champs lors du traitement du formulaire.

#### name

    cet attribut permet d'insérer une variable dans le texte.
Si l'attribut type est omis, le type text est utilisé par défaut.

### L'attribut value

Cet attribut permet de spécifier la valeur par défaut d'un champ.
Exemple :

### L'attribut checked

Les champs à sélectionner ayant cet attribut (qui s'utilise sans valeur) le sont par défaut.

### L'attribut disabled

Les champs ayant cet attribut (qui s'utilise sans valeur) ne sont jamais envoyé lors de la soummission.

## La balise <label>

L'habitude courante lors du développement d'un formulaire web consiste à placer le texte associé au champs d'entrée à côté de ces champs sans préciser explicitement qu'ils sont associés. Ce n'est pas un gros problème pour l'utilisateur moyen car en visualisant la page, il associe directement ces deux informations et remplit aisément le formulaire. Par contre, pour un utilisateur ayant un handicap, cette association peut ne pas être aussi facile.
Il est donc recommandé d'utiliser un label c'est à dire la balise <label> permettant d'associer une légende à un champ d'entrée. De plus, un clic sur un label donne le focus au champ correspondant. Ainsi, tous les utilisateurs pourront utiliser votre formulaire sans problème.

### L'attribut for

Cet attribut sert à spécifier l'identifiant du champ d'entrée (attribut id) dont le label est la légende.

#### Exemple
## La balise <fieldset>

Cette balise sert à regrouper plusieurs champs qui ont un rapport entre eux comme par exemple un groupe de cases d'options. Le but de cette balise est le même que celui de <label> car elle permet d'indiquer explicitement la fonction d'un groupe de champs.

### La balise <legend>

On doit placer cette balise dans un bloc de fieldset. Elle permet de donner une légende au groupe de champs.
Exemple :

## La balise <textarea>

Génère des zones de texte multilignes.
Par exemple, pour créer une zone de saisie de six lignes :
Pour faire en sorte que le texte affiché s'efface lorsque l'utilisateur remplit la zone :

## La balise <select>

Cette balise affiche un menu déroulant cliquable. Exemple pour choisir une des trois propositions :
Pour passer ce menu en lecture seule, ajoute l'attribut : disabled="true" (on ne peut alors plus voir les options non sélectionnées).

### multiple

L'attribut "multiple" d'une balise "select" indique que l'utilisateur peut effectuer un choix multiple :

## En savoir plus

Consultez également ces pages dans d’autres projets Wikimedia :
* traduction en français de la spécification sur les formulaires
* (anglais) version originale
* ↑ https://www.w3schools.com/tags/att_input_disabled.asp