Les éléments de formulaire

Pourquoi les formulaires

Les formulaires sont la base des échanges entre le site et le visiteur.
Pour permettre au visiteur de transmettre des informations, les formulaires sont indispensables. Et grâce au JavaScript, il est possible de les rendre très pratiques.

Le javascript associé aux formulaire permet :

d'assister et de guider le visiteur,
de contrôler la saisie en temps réel,
de faire des traitements (calcul, manipulation de chaînes de caractères),
d'envoyer les résultats au serveur.

Vue d'ensemble HTML

Les éléments de formulaire HTML sont semblables à la plupart des contrôles rencontrés dans les logiciels.

Toutefois, il faut garder à l'esprit qu'il n'est pas possible d'avoir des éléments personnalisés. Il faut se contenter des éléments prédéfinis (qui ont été conçus pour répondre à presque tous les besoins).
Pour intégrer des éléments de formulaire, il faut encadrer les balises par <form> et </form>

Dans la suite de ce document, sont présentés tous les éléments de formulaire avec les propriétés, les méthodes et les événements associés.
Un exemple détaillé pour chacun donne le code source HTML exact.
La balise form, création de formulaire
La balise input, la plus courante et tous ses types
type = text, button, radio, checkbox, hidden, password, submit et reset et file.
La balise select, la balise de liste
La balise textarea, la balise de zone de texte multi-lignes.

La balise form

La balise form a besoin de sa balise de fin. Elles encadrent la déclaration des éléments de formulaire.

Liste des propriétés

name	Nom du formulaire
action	Adresse du script de serveur à exécuter
method	Méthode d'envoi des données de formulaire (get ou post)
enctype	Type d'encodage du formulaire
target	Destination du retour du formulaire

Liste des méthodes

submit	Déclenche l'action du formulaire
reset	Réinitialise les données du formulaire avec les valeurs par défaut

Liste des événements

onsubmit	Détecte la soumission du formulaire
onreset	Détecte la réinitialisation

L'élément input

L'objet input est le plus utilisé de tous. Il permet d'afficher :

des champs texte
des boutons
des radio-boutons Choix 1 - Choix 2
des cases à cocher Choix 1 - Case 2
le champ caché
le champ password
les boutons spéciaux reset et submit
le champ de saisie d'un fichier à uploader

Liste des propriétés

name	Nom du champ
type	type du champ text, button, radio, checkbox, submit, reset
value	Libellé texte
defaultvalue	Valeur par défaut du champ (utile avec reset)
size	Taille du champ
maxlength	Taille maximale du champ de type texte
checked	Case à cocher ou radio bouton coché ou non
disabled	Grisé (modification impossible par le visiteur)
readOnly	Lecture seule
class	Nom de la classe de style
style	Chaîne de caractères pour le style

Cette liste est générique, des particularités surviennent avec le type.

Liste des méthodes

focus	Donne le focus (ou le curseur ou la main)
blur	Enlève le focus
click	Simule un clic (sur un bouton)

Liste des événements

onfocus	Détecte la prise de focus
onblur	Détecte la perte de focus
onclick	Détecte le clic souris (sur un bouton)
onChange	Détecte les changements

Les zones de texte input type="text"

Une zone de texte est définie par la balise input avec un type "text".

<input type="text">

Les boutons input type="button"

Un bouton est défini par la balise input avec un type "button".

<input type="button" value="Ceci est un bouton">

Les radio-boutons input type="radio"

Un groupe de radio-boutons est défini par la balise input avec un type "radio".
Pour définir un groupe, il faut donner le même nom à tous les champs. Ainsi, la sélection sera unique pour l'ensemble du groupe.
Ici, le groupe s'appelle "sexe". A l'origine, Homme est coché. Homme et Femme sont des états opposés. Les radios-boutons sont adaptés.

Homme - Femme

<input type="radio" name="sexe" value="homme" checked>Homme -
<input type="radio" name="sexe" value="femme">Femme

Les radio-boutons input type="checkbox"

Une case à cocher est définie par la balise input avec un type "checkbox".
Contrairement aux cases à cocher, il n'y a pas d'exclusion entre les propositions.
Ici, Majeur et Etudiant sont coché à l'origine. Mais il est possible de n'être ni l'un, ni l'autre, ou l'un des deux.

Majeur
Etudiant

<input type="checkbox" name="majeur" checked>Majeur
<input type="checkbox" name="etudiant">Etudiant

L'élément password

Password se présente comme un champ texte, mais affiche des * pour cacher le contenu du champ. Il est aussi impossible de copier le contenu (CTRL+C). Il est donc adapté à la saisie de mot de passe.
Les navigateurs reconnaissent les champs de mot de passe et proposent de retenir le mot de passe dans le trousseau sécurisé.

<input type="password" name="passe" value="azerty" size=10>

A part cette différence d'affichage, il possède les mêmes propriétés que le champ texte.

L'élément caché

Un champ caché est destiné à transmettre des informations dans le formulaire, sans que le visiteur ne s'en aperçoive.
Cela peut être une adresse mail, un résultat de traitement, l'heure, un identifiant de session ou toute autre information.
Comme son nom l'indique, le champ n'apparaît pas à l'écran : voici sa syntaxe.

<input type="hidden" value="contenu caché" name="cache">

Propriétés acceptées :
name | value | defaultvalue

Naturellement, toutes les propriétés et les événements concernant son affichage et son apparence sont sans effet.
REMARQUE : Même s'il n'apparaît pas à l'écran, son contenu reste manipulable en javascript.

Les boutons spéciaux reset et submit

Ces boutons existent et il faut les décrire (Je préconise de les éviter).
Dans le formulaire suivant, changer les valeurs saisies et cliquez sur "reset" :
Cochez moi !

<form name="formspe" action="javascript:alert('formulaire soumis')">
  <input type="text" name="texte" value="Contenu">
  <input type="checkbox" checked>Cochez moi !
  <input type="reset" value="reset">
  <input type="submit" value="submit">
</form>

L'élément fichier

Ce type de champ permet à l'utilisateur de sélectionner un fichier à envoyer sur le serveur lors de la soumission du formulaire. On pense évidemment en premier lieu à l'envoi de photos. Pour des raisons de sécurité, ce champ n'est pas accessible en écriture au JavaScript afin d'éviter des fuites de données involontaire.

<input type="file">

Les listes

L'élément select

Les listes sont définies par la balise <select>. Cette balise définie la zone de la liste. Les lignes de contenu de la liste sont alimentées par la balises <option>.
Voici la syntaxe générale pour créer une liste contenant des lignes :

<select name="mono" size=1>
  <option value="1">ligne 1</option>
  <option value="2">ligne 2</option>
  <option value="3">ligne 3</option>
  <option value="4">ligne 4</option>
</select>

Les listes peuvent se présenter de plusieurs manières, selon leur propriété.

Sur une ligne size=1	Sur plusieurs lignes mono-sélection size=4	Sur plusieurs lignes multi-sélection size=4 multiple

L'élément option

L'objet option est assez simple. Il peut avoir comme attributs : name, value, selected.
selected force la sélection de cette occurence dans la liste.
Liste des propriétés de l'élément select :

name	Nom de la liste
size	Nombre de lignes à afficher
multiple	Sélection multiple autorisée
disabled	Grisage de la liste
class	Classe de feuille de style
style	Style de la liste

Liste des méthodes :

add	Ajoute un ligne (objet option)
remove	Supprime une ligne
focus	Donne le focus à la liste
blur	Reprend le focus

Liste des événements :

onChange	Détecte la sélection d'une nouvelle ligne
onfocus	Détecte la prise de focus
onblur	Détecte la perte de focus

L'élément select est assez complexe, en particulier dans sa manipulation en javascript (voir détails page suivante).

Les zones de textes multi-lignes textarea

L'objet textarea est essentiellement utilisé pour permettre au visiteur de saisir un texte assez long (message, descriptif...).
Voici la syntaxe classique pour définir une zone de texte :

<textarea name="texte" rows="5" cols="20">Ligne 1
Ligne 2
...
</textarea>

On remarque les 2 propriétés rows et cols qui indiquent le nombre de lignes et de colonnes de la zone.
Le texte contenu dans l'élément textarea apparaît tel que dans le code source : un retour à la ligne dans le code source crée une nouvelle ligne dans la zone.

Liste des propriétés de l'élément textarea :

name	Nom de la zone
rows	Nombre de lignes
cols	Nombre de colonnes
disabled	Grisage de la zone
readOnly	Lecture seule
class	Classe de feuille de style
style	Style de la liste

Liste des méthodes :

focus	Donne le focus à la zone
blur	Reprend le focus

Liste des événements :

onChange	Détecte le changement de contenu
onScroll	Détecte le défilement de la zone
onfocus	Détecte la prise de focus
onfocus	Détecte la perte de focus

Nous avons vu les éléments de formulaire, comment les déclarer, les attributs et les comportements possibles.
La page suivante montre comment les manipuler en javascript.

Tutoriel écrit par webmaster mis à jour le 18/09/2017

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Les éléments de formulaire

Pourquoi les formulaires

Vue d'ensemble HTML

La balise form

Liste des propriétés

Liste des méthodes

Liste des événements

L'élément input

Liste des propriétés

Liste des méthodes

Liste des événements

Les zones de texte input type="text"

Les boutons input type="button"

Les radio-boutons input type="radio"

Les radio-boutons input type="checkbox"

L'élément password

L'élément caché

Les boutons spéciaux reset et submit

L'élément fichier

Les listes

L'élément select

L'élément option

Les zones de textes multi-lignes textarea

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...