Retourner à la page d'accueil de TJS

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

nameNom du formulaire
actionAdresse du script de serveur à exécuter
methodMéthode d'envoi des données de formulaire (get ou post)
enctypeType d'encodage du formulaire
targetDestination du retour du formulaire

Liste des méthodes

submitDéclenche l'action du formulaire
resetRéinitialise les données du formulaire avec les valeurs par défaut

Liste des événements

onsubmitDétecte la soumission du formulaire
onresetDé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

nameNom du champ
typetype du champ text, button, radio, checkbox, submit, reset
valueLibellé texte
defaultvalueValeur par défaut du champ (utile avec reset)
sizeTaille du champ
maxlengthTaille maximale du champ de type texte
checkedCase à cocher ou radio bouton coché ou non
disabledGrisé (modification impossible par le visiteur)
readOnlyLecture seule
classNom de la classe de style
styleChaîne de caractères pour le style

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

Liste des méthodes

focusDonne le focus (ou le curseur ou la main)
blurEnlève le focus
clickSimule un clic (sur un bouton)

Liste des événements

onfocusDétecte la prise de focus
onblurDétecte la perte de focus
onclickDétecte le clic souris (sur un bouton)
onChangeDé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">

Propriétés acceptées :
name | value | defaultvalue | size | maxlength | disabled, readOnly, class, style
Méthodes acceptées :
focus, blur
Evénements acceptés :
onfocus, onblur, onChange

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">

Propriétés acceptées :
name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style
Méthodes acceptées:
focus | blur | click
Evénements acceptés:
onfocus | onblur | onclick
L'événement le plus utilisé est onclick car il détecte le clic utilisateur.

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

Propriétés acceptées :
name | value | checked | disabled | readOnly | class | style
Méthodes acceptées:
focus | blur | click
Evénements acceptés:
onfocus | onblur | onclick

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

Propriétés acceptées :
name | checked | disabled | readOnly | class | style
Méthodes acceptées:
focus | blur | click
Evénements acceptés:
onfocus | onblur | onclick

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 :
nameNom de la liste
sizeNombre de lignes à afficher
multipleSélection multiple autorisée
disabledGrisage de la liste
classClasse de feuille de style
styleStyle de la liste

Liste des méthodes :
addAjoute un ligne (objet option)
removeSupprime une ligne
focusDonne le focus à la liste
blurReprend le focus

Liste des événements :
onChangeDétecte la sélection d'une nouvelle ligne
onfocusDétecte la prise de focus
onblurDé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 :
nameNom de la zone
rowsNombre de lignes
colsNombre de colonnes
disabledGrisage de la zone
readOnlyLecture seule
classClasse de feuille de style
styleStyle de la liste

Liste des méthodes :
focusDonne le focus à la zone
blurReprend le focus

Liste des événements :
onChangeDétecte le changement de contenu
onScrollDétecte le défilement de la zone
onfocusDétecte la prise de focus
onfocusDé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

Chercher une fonction, un objet, ...

Le 20/11/2017 03:02:56 sur php7 en 74.45 ms