Les principaux contrôles sont :
input : les zones de saisie, les boutons radios et les cases à cocher sont définis par ce contrôle ; la syntaxe (simplifiée) en est :
<input type="type" name="nom" value="valeur" />où :
type peut être :
textpour une zone de saisie au sens habituel du terme (une zone rectangulaire où l'utilisateur écrit des données, sur une seule ligne) ; c'est ce qui sera dans cette zone qui sera envoyé au programme de traitement ;
passwordpour une zone de saisie de mot de passe (identique à
text, mais le texte saisi n'apparaît à l'écran que sous la forme d'astérisques, pour éviter d'être lisible par une tierce personne) ;checkboxpour une case à cocher ;
radiopour un bouton radio (des boutons radios de même nom sont mutuellement exclusifs) ;
submitpour un bouton d'envoi ; c'est le clic sur ce bouton qui envoie le contenu du formulaire au programme de traitement ;
hiddenpour une variable cachée ; permet de cacher des valeurs nécessaires au traitement mais qu'on ne veut pas voir affichées à l'écran ; attention, caché ne veut pas dire secret : ces valeurs sont visibles dans le code source de la page ;
resetpour remettre les zones de saisie à leurs valeurs par défaut (les valeurs qu'elles ont lors du chargement de la page) ;
nom est le nom de la variable qui sera envoyé au programme ; cela n'a a priori pas de sens pour un bouton submit ou reset, mais c'est absolument nécessaire pour les autres ; les zones doivent en principe avoir des noms différents, sauf pour le boutons radios : les boutons radios de même nom sont mutuellement exclusifs ;
value est la valeur du contrôle :
pour text et password il s'agit d'une valeur qui permet de pré-remplir la zone ;
pour checkbox et radio c'est la valeur qui sera donnée à la variable si la case est sélectionnée ;
pour submit et reset c'est le texte qui sera écrit dans le bouton ;
pour hidden c'est la valeur qui sera donnée à la variable.
select : pour créer des listes déroulantes ;
exemple d'utilisation :
<select name="menu">
<option>premier choix</option>
<option>deuxième choix</option>
<option>troisième choix</option>
</select>
Cette zone permettra d'envoyer une variable de nom menu qui aura pour valeur le choix sélectionné. Pour pré-sélectionner un choix dans la liste il suffit d'ajouter l'attribut selected="selected" dans la balise <option> correspondante.
On peut avoir besoin d'envoyer une valeur différente de ce qui est affichée (par exemple demander à l'utilisateur de choisir une personne par ses nom et prénom, et envoyer l'identifiant de cette personne dans une table d'une base de données). On utilisera alors l'attribut value dans la balise <option> comme par exemple :
<select name="responsable">
<option value="1"> marcel durand</option>
<option value="2"> georges dupont</option>
<option value="3"> pierre martin</option>
</select>
Dans cet exemple si on choisit georges dupont la variable responsable aura la valeur 2.
textarea : pour des zones de saisies plus grandes
qu'avec input ;
exemple d'utilisation :
<textarea name="nom" rows="4" cols="40">Texte par défaut...</textarea>