Formulaires en (X)HTML

1.1. La balise form

Les formulaires débutent par la balise <form>...</form>, cette balise contient trois attributs :

name qui définit le nom du formulaire, mais qui est optionnel
method qui définit la manière dont seront envoyées les données : post ou get
action qui est l'URL ou envoyer les données

Si les données sont envoyées au format get, elles seront ajoutées à l'URL fournie dans l'attribut action.

CODE
form_sans_style.html

<!DOCTYPE html>
 
<!-- langue utilisée -->
<html lang="fr">
 
<!-- entete -->
<head>
 
    <!-- titre de la page affiché dans un des onglets du navigateur -->
    <title>Un formulaire simple</title>
    
    <!-- encodage des caractères -->
    <meta charset="utf-8">
    
    <!-- description de la page -->
    <meta name="description" content="Mon premier formulaire">
 
        
</head>
 
<!-- contenu de la page -->
<body>
 
    <!-- balise d'entête -->
    <h1>Informations personnelles</h1>
 
    <form action="" method="post" name="mon_formulaire">
    
    <label>Nom :</label>
    <input type="text" name="nom" /><br />
    <label>Prénom :</label>
    <input type="text" name="prenom" /><br />
    <label>Année de naissance :</label>
    <input type="text" name="annee" /><br />
    <br />
    <label>&nbsp; </label>
    <input type="submit" value="Soumettre" onclick="return false;"/><br />
    </form>
    
</body>
 
</html>
 
 

Ce formulaire ressemble sans style CSS à cela.

Voici le même formulaire avec un style (CSS) : formulaire avec style.

1.2. Les éléments de base

Les différents éléments de base qui composent les formulaires sont les suivants :

les champs de saisie de texte comme les input (sur une ligne) ou les textarea sur plusieurs lignes
les boutons (button) ou les champs input de type submit
les boites ou listes déroulantes (combo box) appelées select
les cases à cocher (input) uniques (de type radio button) ou multiples (de type checkbox)

Nous allons passer en revue ces différents éléments afin de voir comment les utiliser.

1.3. Les labels

Le label permet de définir du texte associé à un élément de saisie d'information.

Il dispose d'un attribut for qui spécifie à quel élément le label est associé au travers d'un id ce qui autorise le focus sur l'élément de saisie en cliquant sur le label : "nom (label avec for)".

<form name="label1" method="post" action="">
 
	<label for="nom">nom (label avec for)</label>
	<input type="text" name="nom" value="" id="nom"/>
	<br />
 
	<label>prénom (label sans for)</label>
	<input type="text" name="prenom" value="" id="prenom"/>
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _label1();" />
 
</form>

1.4. Les champs input

Les champs input permettent de saisir de l'information textuelle en précisant éventuellement un format de saisie.

On doit définir les attibuts suivants pour ce genre de champs :

name qui correspond au nom du champ qui sera réutilisé par le serveur pour extraire l'information soumise
value la valeur initiale du champ, ce champ est bien entendu optionnel
type qui correspond au type de champ

L'attribut type peut prendre plusieurs valeurs :

text : qui signifie qu'on saisit du texte
password : qui cache le texte saisi et donc lié à la saisie des mots de passe
reset : pour une remise à zéro des champs
submit : qui est équivalent à un bouton sur lequel on clique afin d'envoyer les informations du formulaire à un serveur
file et image pour télécharger (upload) des fichiers
checkbox ou radio : pour créer des case à cocher (voir ci-après)
avec HTML5 ont été rajoutés : date, email, url, tel, number, ...

<form name="input1" method="post" action="">
 
	<label for="login">login</label>
	<input type="text" name="login" value=""  id="login"/>
	<br />
 
	<label>password</label>
	<input type="password" name="password" value="" id="password"/>
	<br />
 
	<label>email</label>
	<input type="email" name="email" value="" id="email"/>
	<br />
 
	<label>immatriculation</label>
	<input type="text" name="immatriculation" value="" id="immatriculation"
		pattern="^[A-Z]{2}-[0-9]{3}-[A-Z]{2}$"  placehodler="XY-012-ZT"/>
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _input1();" />
 
</form>

<form name="input2" method="post" action="">
 
	<label>number</label>
	<input type="number" name="number_2" value="3" id="number_2"/>
	<br />
 
	<br />
	<label for="range_2">range</label>
	 <input type="range" name="range_2" value="19" id="range_2" 
	 	min="10" max="31" step="3"
	 	oninput="this.nextElementSibling.value = this.value" />
	 	<output>19</output>
	<br />
	<br />
 
	<label>date</label>
	<input type="date" name="date_2" value="1970-09-30" id="date_2" />
	<br />
 
	<label>time</label>
	<input type="time" name="time_2" value="23:30" /id="time_2" /> 
	<br />
 
	<label>telephone</label>
	<input type="tel" name="tel_2" value="" 
		id="tel_2" pattern="[09]{2}-[09]{2}-[09]{2}-[09]{2}-[09]{2}" 
		placeholder="XX-XX-XX-XX-XX" />
	<br />
 
	<label>file</label>
	<input type="file" value="" name="file_2" id="file_2" />
	<br />
 
	<label>color</label>
	<input type="color" value="#80A0F0" name="color_2" id="color_2" />
	<br />
 
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _input2();" />
 
</form>

1.5. Les textarea

Le textarea permet de définir une zone de saisie de texte sur plusieurs lignes en spécifiant le nombre de lignes (attribut rows) et le nombre de colonnes (attribut cols).

<form name="textarea1" method="post" action="">
 
	<label>information</label>
	<textarea name="info" 
		rows="5" 
		cols="30" 
		placeholder="Veuillez saisir votre texte" 
		id="info">texte initial </textarea>
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _textarea1();" />
 
</form>

Par défaut le textarea est redimensionnable, on peut empêcher son redimensionnement en utilisant CSS.

On peut également empêcher la saisie en utilisant l'attribut readonly.

<form name="textarea2" method="post" action="">
 
	<label>information</label>
	<textarea name="info" readonly
		rows="5" 
		cols="30"
		id="info2">texte initial non modifiable</textarea>
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _textarea2();" />
 
</form>

1.6. Cases à cocher

On peut créer des cases à cocher de deux types :

soit on peut cocher plusieurs cases, dans ce cas on utilise un champ input de type checkbox

<form name="checkbox1" method="post" action="">
 
	<label>addictions :</label>
	<input type="checkbox" name="jeux" id="jeux" checked="checked" /> jeux vidéos
	<input type="checkbox" name="alcool" id="alcool" /> alcool
	<input type="checkbox" name="drogue" id="drogue"/> drogue
	<input type="checkbox" name="cigarette" id="cigarette" /> cigarette 
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _checkbox1();" />
 
</form>

soit on ne peut cocher qu'une seule case et on utilise un champ input de type radio mais il faut également donner le même nom à chaque champ, seules leurs valeurs permettront de les distinguer

<form name="radio1" method="post" action="">
 
	<label>statut marital :</label>
	<input type="radio" name="statut" value="casé" /> marié
	<input type="radio" name="statut" value="libre" checked="checked" /> célibataire
	<input type="radio" name="statut" value="triste" /> veuf
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _radio1();" />
 
</form>

L'attribut checked permet de sélectionner une option par défaut.

1.7. Les listes déroulantes

Les listes déroulantes ou combobox sont introduites par l'élément select.

<form name="select1" method="post" action="">
 
	<label>statut marital :</label>
	<select name="statut" id="statut_select"> 
		<option value="0">&lt;faire un choix&gt;</option>
		<option value="casé">marié</option>
		<option value="libre">célibataire</option>
		<option value="triste">veuf</option>
	<select>
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _select1();" />
 
</form>

1.8. Les boutons

Les boutons permettent de créer des actions. Par défaut on utilise les input de type submit ou reset. Mais il est possible d'utiliser la balise <button></button> afin de créer un bouton.

On peut associer une action (code Javascript) à un bouton grâce aux attributs :

onclick : clique sur un bouton
onsubmit pour les formulaires, avant de soumettre le formulaire on vérifie que les champs sont remplis correctement

<head>
<script>
	function _button1() {
		alert("coucou");
		return false;
	}
</script>	
</head>
<body>
	<p class="center">
	<button onclick="return _button1();"> dire coucou </button>
	</p>
</body>

1.9. la balise fieldset

La balise <fieldset> permet de regrouper plusieurs champs dans le but de mieux structurer et embellir les formulaires :

<form name="fieldset1" method="post" action="">
 
	<fieldset>
		<legend>Etat civil</legend>
 
		<label>Nom :</label>
		<input type="text" name="nom" value="" />
		<br />
		<br />	
		<label>Prénom :</label>
		<input type="text" name="prenom" value="" />
		<br />
 
	</fieldset>
 
	<fieldset>
		<legend>Adresse</legend>
 
		<label>Voie :</label>
		<input type="text" name="voie" value="" />
		<br />
		<br />	
		<label>Ville :</label>
		<input type="text" name="ville" value="" />
		<br />
 
 
	</fieldset>	
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _select1();" />
 
</form>

1.10. Attribut hidden

L'attribut hidden (sans valeur) permet de cacher un champ

<form name="hidden1" method="post" action="">
 
	<label for="poids">poids (kg)</label>
	<input type="number" name="poids" value="" id="poids" size="4" min="1" max="400"/>
	<br />
 
	<label for="taille">taille (cm)</label>
	<input type="number" name="taille" value="" id="taille" size="4" min="1" max="240" />
	<br />
 
	<label>IMC</label>
	<input type="text" name="imc" value="" id="imc" hidden readonly size="6"/>
	<input type="text" name="imc_msg" id="imc_msg" hidden readonly size="30" />
	<br />
 
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Calculer" onclick="return _hidden1();" />
 
</form>

1.11. Attributs size maxlength

L'attribut size permet de fixer la taille d'affichage d'un champ alors que l'attribut maxlength définit le nombre maximum de caractères que l'on pourra saisir :

<form name="fieldset2" method="post" action="">
 
	<fieldset>
		<legend>Etat civil</legend>
 
		<label>Nom :</label>
		<input type="text" name="nom" value="" maxlength="25"/>
		<br />
		<br />	
		<label>Prénom :</label>
		<input type="text" name="prenom" value="" />
		<br />
 
	</fieldset>
 
	<fieldset>
		<legend>Adresse</legend>
 
		<label>Voie :</label>
		<input type="text" name="voie" value="" />
		<br />
		<br />	
		<label>Code postal :</label>
		<input type="text" name="cp" value="" size="5" maxlength="5"/>
		<br />
		<br />	
 
		<label>Ville :</label>
		<input type="text" name="ville" value="" maxlength="25"/>
		<br />
 
 
	</fieldset>	
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _select1();" />
 
</form>

Page de Jean-Michel Richer