Eléments de formulaire

Les formulaires HTML sont destinés à transmettre des données du client au serveur. C'est le mécanisme de base qui permet la communication du client vers le serveur. Un formulaire contient, entre autres, des éléments spécifiques à la communication appelés éléments de formulaire. Ces éléments peuvent être utilisés en dehors de tout formulaire pour assurer une interaction avec l'utilisateur. Vous connaissez déjà un élément de formulaire que vous avez utilisé dans la leçon précédente, l'élément INPUT. Nous allons passer en revue les autres.

L'élément SELECT

Choisissez un continent :
  <select id="continent">
    <option>Afrique</option>
    <option>Amérique</option>
    <option>Asie</option>
    <option>Europe</option>
    <option>Océanie</option>
  </select>
  <p>
    Cliquez <span onclick="liste()">ici</span> pour voir la liste des continents et
    <span onclick="choix()">ici</span> pour voir celui que vous avez choisi !
  </p>           

function liste() {
	var continentElt = document.querySelector( "#continent" );
	var continent = "Les continents sont :";
	for ( var i = 0; i < continentElt.length; i++ )
		continent += "\n" + continentElt[i].innerHTML;
	alert( continent );
}	

function choix() {
	var continentElt = document.querySelector( "#continent" );
	alert( continentElt[ continentElt.selectedIndex ].innerHTML );
}	

Choisissez une ville :
  <select id="ville">
    <option value="Afrique">Pretoria</option>
    <option value="Amérique">Washington</option>
    <option value="Asie">Hanoï</option>
    <option value="Europe">Berlin</option>
    <option value="Océanie">Canberra</option>
  </select>
  <p>
    Cliquez <span onclick="continent()">ici</span> pour connaitre son continent !
  </p>

function continent() {
	var villeElt = document.querySelector( "#ville" );
	var optionElt = villeElt[ villeElt.selectedIndex ];
	alert( optionElt.innerHTML + " est en " + optionElt.value );	
}

Il est possible de contrôler totalement un élément SELECT depuis JavaScript, par exemple en positionnant ou non l'attribut multiple qui autorise la sélection multiple.

Les boutons radio

Les éléments HTML INPUT de type radio permettent de constituer des groupes de boutons dont un seul peut être activé à la fois. Les boutons radios d'un même groupe sont repérés par la valeur de l'attribut name qui doit avoir la même valeur pour tous les boutons du groupe. L'accès à un groupe de boutons radios s'effectue à l'aide de la méthode querySelectorAll. Cette méthode ressemble à la méthode querySelector mais contrairement à cette dernière, elle retourne plusieurs éléments (par exemple tous les boutons d'un même groupe). Cette méthode retourne donc les éléments sélectionnés dans une liste. Les éléments apparaissent dans la liste dans l'ordre dans lequel il apparaissent dans le document HTML. Sur un élément HTML INPUT de type radio on dispose de l'attribut booléen checked qui indique si cet élément est cliqué. Dans le code HTML suivant :

Choisissez un pays :
  <ul style="list-style-type: none">
    <li>1<input type="radio" name="pays" value="Pretoria" /> Afrique du sud</li>
    <li>2<input type="radio" name="pays" value="Washington" /> Etats-Unis</li>
    <li>3<input type="radio" name="pays" value="Hanoï" /> Vietnam</li>
    <li>4<input type="radio" name="pays" value="Berlin" /> Allemagne</li>
    <li>5<input type="radio" name="pays" value="Canberra" /> Australie</li>
  </ul>
  <p>
    Cliquez <span onclick="choix2()">ici</span> pour voir
    le numéro de celui que vous avez choisi !                    
  </p>

function choix2() {
	var paysTab = document.querySelectorAll( 'input[name="pays"]' );
	var indice = 0;
	for ( var i = 0; i < paysTab.length; i++ )
		if ( paysTab[ i ].checked )
			indice = i;
	alert( "Vous avez choisi le pays n. " + ( indice + 1 ) +
	       "\ndont la capitale est " + paysTab[ indice ].value );
}	

Les cases à cocher

Les éléments HTML INPUT de type checkbox permettent de constituer des groupes de boutons à la manière des boutons radio mais dans ce cas il est possible de cocher plusieurs boutons dans le même groupe. Les attributs disponibles sur les cases à cocher sont les mêmes que sur les boutons radio. Quand on veut pouvoir communiquer au serveur l'ensemble des valeurs cochées dans un groupe de case à cocher, on utilise pour valeur de l'attribut name des chaînes de caractères terminant par [], comme par exemple entree[] dans l'exercice 5 (voir plus bas). Dans ce cas, il faut bien utiliser ce nom (avec la paire de crochets à la fin) pour récupérer l'ensemble des boutons en JavaScript (par exemple, document.querySelectorAll( 'intput[name="entree[]"' )).

Autres éléments de formulaire

Il existe un autre élément de formulaire, l'élément TEXTAREA, qui permet à l'utilisateur de saisir un texte éventuellement sur plusieurs lignes. Du point de vue de JavaScript, cet élément est semblable à un élément INPUT de type texte et possède les mêmes attributs.

Il existe également d'autres éléments INPUT, les éléments de type hidden et les éléments de type password. Du point de vue de JavaScript, ces éléments sont identiques à des éléments INPUT de type texte.

Les exemples précédents sont disponibles dans les fichiers exemple-1.html et exemple-1.js

Vérification de formulaire

Une utilisation très classique de JavaScript est la vérification de formulaire côté client. L'idée est la suivante : après que l'utilisateur ait renseigné les différents éléments du formulaire et avant l'envoi des données au serveur, il est possible et souvent utile d'effectuer des vérifications. Par exemple, on peut vérifier la validité lexicale de certains éléments INPUT de type texte, ou bien vérifier qu'au moins un bouton radio d'un ensemble donné est coché. Parfois, cette vérification peut consister à valider la cohérence des différents choix effectués dans le formulaire (du type, si tel bouton est coché, alors tel élément INPUT doit être renseigné). Etudions le formulaire suivant :

<form action="exemple-2.php" method="post" onsubmit="return verifier()">
  <p>
    <label>Nom</label><input id="nom" name="nom" type="text" />
  </p>
  <p>
    <label>Prénom</label><input id="prenom" name="prenom" type="text" />
  </p>
  <p>
    <label>email</label><input id="email" name="email" type="text" />
  </p>
  <p>
    <input type="reset" value="Annuler" />
    <input type="submit" value="Envoyer" />
  </p>
</form>

function verifier() {
	var nomElt = document.querySelector( "#nom" );
	var nom = nomElt.value.trim();
	if ( nom.length == 0 ) {
		nomElt.value = "";
		nomElt.focus();
		alert( "Nom invalide" );
		return false;
	}
	var prenomElt = document.querySelector( "#prenom" );
	var prenom = prenomElt.value.trim();
	if ( prenom.length == 0 ) {
		prenomElt.value = "";
		prenomElt.focus();
		alert( "Prénom invalide" );
		return false;
	}	
	var emailElt = document.querySelector( "#email" );
	var email = emailElt.value.trim();
	if ( email.length == 0 || emailInvalide( email ) ) {
		emailElt.value = email;
		emailElt.focus();
		alert( "Email invalide" );
		return false;
	}
	return true;
}

function emailInvalide( email ) {
	var i = email.indexOf( "@" );
	if ( i < 1 )
		return true;
	if ( i != email.lastIndexOf( "@" ) )
		return true;
	var droite = email.split( "@" )[1];
	i = droite.lastIndexOf( "." );
	if ( i == -1 )
		return true;
	droite = droite.substring(i);
	if ( droite.length < 3 )
		return true;
	return false;
}

Les exemples précédents sont disponibles dans les fichiers exemple-2.html et exemple-2.js