Les formulaires

Cet exemple insère un élément de formulaire vraiment basique. Il s'agit d'une zone de saisie (parce que RIEN n'est spécifié) : Constatez qu'il ne s'agit PAS d'un script JavaScript, mais de simples balises HTML :

Voici le résultat :

Globalement

D'une manière générale, la syntaxe pour ajouter un élément de formulaire est la suivante (mis a part les listes déroulantes et les TextArea qui ont une syntaxe différente):

<INPUT TYPE="GenreDeControle" NAME=NomDuControle VALUE="ValeurDuControle" style="Longueur:XX; Hauteur:XX; Couleur:XX; XX:YY..." DISABLED accesskey=UneLettreDAcces>

Tous les paramètres sont optionnels, mais les 3 premiers paramètres TYPE, NAME et VALUE, sont à peu près indispensables pour une bonne gestion du contrôle. A partir du 4ème (mais ils peuvent être dans un autre ordre), il s'agit de paramètres nettement moins importants. Il existe énormément de paramètres, qui sont autant de propriétés de ces boutons, certains d'entre eux doivent sans doute être plus ou moins compatibles/incompatibles entre les différents navigateurs, et leurs versions successives. Prudence donc !

Paramètre	Explication	Exemple	Visualisation
GenreDeControle	C'est un mot réservé qui détermine s'il s'agit d'une case à cocher, d'un bouton ou autre. BUTTON : Simple bouton TEXT : Zone de saisie simple PASSWORD : Zone de mot de passe (***) FILE : Zone de récupération de fichier CHECKBOX : Case à cocher RADIO : Bouton Radio SUBMIT : Envoi de formulaire RESET** : Remise à 0 de tous les contrôles d'un formulaire	<INPUT TYPE="BUTTON">
NomDuControle	Un nom parlant que l'on pourra réutiliser en JavaScript. J'ai normalisé les noms des contrôles de la manière suivante : BUTTON : BDCNomDuBoutonDeCommande TEXT : EDINomDeLaZoneDEdition PASSWORD : PSWNomDeLaZoneMotDePasse (Password) FILE : FICNomDeLaZoneDeFichier CHECKBOX : CACNomDeLaCaseACocher RADIO : BTRNOmDuBoutonRadio SUBMIT : SUBNomDuBoutonSubmit RESET : RESNomDuBoutonReset	<INPUT TYPE="BUTTON" NAME=BDCValider>
ValeurDuControle	Le contenu du contrôle. En cas de case a cocher ou de bouton radio, ce nom ne sera pas visible, par contre, pour les boutons ou les zones d'édition, ValeurDuControle apparait sur le contrôle	<INPUT TYPE = "BUTTON" NAME=BDCValider VALUE="Cliquez sur moi">
style	Permet de déterminer la largeur et la hauteur du contrôle, mais aussi d'autres choses, comme par rexemple la couleur de fond ou des caractères. Les différents paramètres de style sont installés entre guillemets, chaque fois séparés par un point-virgule.	Exemple avec un bouton de 74 pixels de large sur 33 de haut : <INPUT TYPE = "BUTTON" style="WIDTH : 74px; HEIGHT : 33px"> Autre exemple avec un bouton dont le fond est jaune : <INPUT type=button STYLE="BACKGROUND-COLOR: yellow"> Et avec une police de caractères extra-large : <INPUT type=button STYLE="FONT-SIZE: x-large" value=test>	74 X 33 pixels : Fond jaune : Caractères larges :
DISABLED	Une autre propriété à titre d'exemple : DISABLED désactive le contrôle. Dans l'exemple, j'ai placé le VALUE à droite de DISABLED pour montrer que l'ordre des paramètres n'a pas d'importance	<INPUT type=button DISABLED VALUE="Test">
accesskey	Une autre propriété qui permet cette fois d'accéder au contrôle avec ALT+ la lettre convenue	Alt-T mettra le focus sur ce bouton : <INPUT type=button accesskey=t>

Manière d'écrire élégamment

Il est très possible d'écrire le code de manière indentée et ordonnée, comme ceci (On ne peut pas séparer le < de INPUT):

Nombreuses propriétés

Il existe encore tout plein de propriétés que nous n'allons pas illustrer ici, puisqu'il s'agissait juste de donner une syntaxe générale. Il existe notamment des propriétés d'événements, telles que onClick qui permettent d'appeler une fonction JavaScript lorsqu'on clique sur le contrôle. Cette propriété est illustrée plus bas dans cette page.

D'ailleurs, si nous écrivons une propriété totalement fantaisiste, comme par exemple le poids, aucune erreur HTML n'est générée, ça n'a pas d'incidence sur l'apparence du contrôle, c'est tout :

Voici un exemple

Button : <INPUT TYPE="button"
NAME="BDCButton"
VALUE="Le bouton"
STYLE="background-color:#FF0;
width:600px;
font-size:24px;
color:#36F;">
<br/>

Button (2) : <INPUT TYPE="button"
NAME="BDCButton"
VALUE="Le bouton désactivé"
DISABLED>
<br/>

Text : <INPUT TYPE="text"
NAME="EDIText"
VALUE="La zone de texte"
STYLE="background-color:#FF0;
width:600px;
font-size:24px;
color:#36F;">
<br/>

Password : <INPUT TYPE="password"
NAME="PSWpassword"
VALUE="Le mot de passe"
STYLE="background-color:#FF0;
width:600px;
font-size:24px;
color:#36F;">
<br/>

File : <INPUT TYPE="file"
NAME="FICFile"
VALUE="Le fichier"
STYLE="background-color:#FF0;
width:600px;
font-size:24px;
color:#36F;">
<br/>

Checkbox : <INPUT TYPE="checkbox"
NAME="CACCheckBox"
VALUE="La case à cocher"
STYLE="background-color:#FF0;
width:600px;
font-size:24px;
color:#36F;">
<br/>

Radio : <INPUT TYPE="radio"
NAME="BTRRadio"
VALUE="Le bouton radio"
STYLE="background-color:#FF0;
width:600px;
font-size:24px;
color:#36F;">
<br/>

Submit : <INPUT TYPE="submit"
NAME="SUBSubmit"
VALUE="Le bouton submit"
STYLE="background-color:#FF0;
width:600px;
font-size:24px;
color:#36F;">
<br/>

Reset : <INPUT TYPE="reset"
NAME="RESReset"
VALUE="Le bouton reset"
STYLE="background-color:#FF0;
width:600px;
font-size:24px;
color:#36F;">
<br/>

Qui donne :

Button :
Button (2) :
Text :
Password :
File :
Checkbox :
Radio :
Submit :
Reset :

Les formulaires Bases de la syntaxe

Cet exemple insère un élément de formulaire vraiment basique. Il s'agit d'une zone de saisie (parce que RIEN n'est spécifié) : Constatez qu'il ne s'agit PAS d'un script JavaScript, mais de simples balises HTML :

Globalement

Manière d'écrire élégamment

Nombreuses propriétés

Voici un exemple