Les formulaires javascript, form, input, text, button, radio, checkbox, hidden, password, submit, reset, select, textarea

Vous êtes ici : Tutoriels

Tutoriels

Javascript / Les formulaires...

Vue d'ensemble : les éléments du formulaire

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>
Sans ces balises, Netscape n'affichera pas les éléments.

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.
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 la balise de fin. Elles sont nécessaires pour afficher 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'appel du script (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

Voyons maintenant en détail les différents éléments de formulaire.

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

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 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 caché INPUT type="hidden"
Un champ caché est destiné à transmettre des informations dans le formulaire, sans que le visiteur ne s'en aperçoivent.
Cela peut être une adresse mail, un résultat de traitement, l'heure, un cookie ou toute autre information.
Naturellement, le champ n'apparaît pas : 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')">

</FORM>

Les listes
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.

Page suivante :Comment les manipuler en javascript.

Merci au site ToutJavaScript.com, pour le contenu de cette rubrique...