Il existe différents types d'entrée comme les champs de type texte pour la saisie de chaines de caractères, des boutons radio, des coches, des boutons d'envoi, ...

Il constitue un moyen privilégié d’interaction car il permet à l’utilisateur d’entrer ses demandes par l’intermédiaire de champs de saisie et de transmettre ses demandes au serveur qui traitera le contenu du formulaire.

Le traitement peut être un envoi de mail, un ajout ou une mise à jour d'informations dans une base de données, un stockage de fichiers sur le serveur, ...

CGI (Common GateWay Interface)

Pour traiter les données du formulaire, le serveur web a besoin de composants exécutables (fichiers .exe ou .dll), appelés CGI qui produisent sur le serveur des contenus html à envoyer aux clients.

Le formulaire

<html>

<body>

<form action="action_page.php">
	<p>Nom : <input type="text" name="nom" value=""></p>
	<p>Prénom : <input type="text" name="prenom" ></p>
	<input type="submit" value="Valider">
</form>

</body>

</html>

Voir

La balise <input>

C'est la balise la plus utilisée dans un formulaire. Cette balise possède différentes variantes en fonction de son attribut type (text, password, hidden, checkbox, radio, submit, reset, file).

La balise <input> possède également un attribut name qui référence la valeur saisie au programme CGI du serveur, un attribut value facultatif qui définit une valeur par défaut.

Saisie de texte : <input type="text" />

<form>
	
	Nom : <input type="text" name="nom" />
	<br/><br/>
	Prénom : <input type="text" name="prenom" />

</form>

Le champ de saisie peut être complété par un conseil qui disparait lors de la saisie de texte.
On utilise pour cela l'attribut placeholder.
Il n'est plus nécessaire alors de mettre un intitulé devant le nom du champ à saisir:

<form>
	
	<input type="text" name="nom" placeholder="Votre nom..." />
	<br/><br/>
	<input type="text" name="prenom" placeholder="Votre prénom..." />

</form>

Champ de type number : <input type="number" />

Le champ de formulaire de type number (à partir de HTML 5) permet l'incrémentation et la décrémentation d'une valeur numérique initiale (0 par défaut).

<form>
	
	Nombre 1 : <input type="number" name="nb1" /><br />
	Nombre 2 : <input type="number" name="nb2" step="5" /><br />
	Nombre 3 : <input type="number" name="nb3" min="0" max="10" />

</form>

Saisie de mot de passe : <input type="password" />

<form>
	
	Identifiant : <input type="text" name="login" />
	<br/><br/>
	Mot de passe :<input type="password" name="mdp" />

</form>

champ masqué : <input type="hidden" />

Elle définit un champ, contenant généralement une valeur, qui est masqué (non visible sur la page WEB)

<form>
	
	email : <input type="text" name="email" />
	<br/><br/>
	<input type="hidden" name="IDUser" value="395" />

</form>

Bouton radio : <input type="radio" />

Les boutons radio permettent à l'utilisateur de sélectionner un choix unique parmi plusieurs

<form>
	
	<input type="radio" name="sexe" value="M">Masculin<br>
	<input type="radio" name="sexe" value="F">Féminin<br/>
	<input type="radio" name="sexe" value="?" checked="checked">Inconnu<br/>

</form>

Bouton checkbox : <input type="checkbox" />

Les boutons checkbox permettent à l'utilisateur de sélectionner plusieurs choix

<form>
	
	<input type="checkbox" name="genre1" value="c" /> Comédie<br/>
	<input type="checkbox" name="genre2" value="d" /> Drame<br/>
	<input type="checkbox" name="genre3" value="h" /> Histoire<br/>
	<input type="checkbox" name="genre4" value="s" checked="checked" /> Suspense

</form>

Bouton reset : <input type="reset" />

<form>
	
	Nom : <input type="text" name="nom" /><br/>
	Prénom : <input type="text" name="prenom" /><br/>
	<input type="reset" value="Effacer le formulaire">

</form>

Bouton fichier : <input type="file" />

Ce bouton permet de sélectionner un fichier pour l'envoyer (avec un bouton submit décrit plus bas) sur le serveur.

<form>
	Affiche du film : <input type="file" name="affiche" />
	<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
</form>

Bouton submit : <input type="submit" />

Ce bouton permet de soumettre le formulaire et déclenche généralement un programme CGI sur le serveur pour le traitement des données d'entrée. Le programme est spécifié dans l'attribut action du formulaire. Si l'attribut action est manquant, l'action est définie sur la page courante.

<form action="enregistre.php">
	
	Nom : <input type="text" name="nom" /><br/>
	Prénom : <input type="text" name="prenom" /><br/>
	<input type="submit" value="Valider">

</form>

La balise <select>

La balise <select> définit une liste déroulante. Les éléments <option> définissent les éléments à choisir. Le premier élément est sélectionné par défaut. Il est possible de changer cette sélection avec l'attribut selected

<form>

	<select name="moto">
		<option value="Y">Yamaha</option>
		<option value="Kawa">Kawasaki</option>
		<option value="HD" selected="selected">Harley Davidson</option>
		<option value="Honda">Honda</option>
		<option value="autre">autre...</option>
	</select>

</form>

La balise <optgroup> permet de regrouper des options au sein de l'élément <select>. Cette balise possède deux attributs : label (pour spécifier une étiquette de regroupement) et disable (pour désactiver des choix)

<form>
Choisissez votre véhicule : 
	<select name="vehicule">
		<optgroup label="Moto">
			<option value="Y">Yamaha</option>
			<option value="Kawa">Kawasaki</option>
			<option value="HD">Harley Davidson</option>
			<option value="Honda">Honda</option>
			<option value="autre">autre...</option>
		</optgroup>
		<optgroup label="Auto">
			<option value="maserati" >Maserati</option>
			<option value="aston martin">Aston Martin</option>
			<option value="Bentley">Bentley</option>
		</optgroup>
		<optgroup label="Avion">
			<option value="cessna" selected="selected">Cessna</option>
			<option value="Diamond">Diamond</option>
			<option value="beechcraft">Beechcraft</option>
		</optgroup>
		<optgroup label="Train" disabled="disabled">
			<option value="Shinkansen">Shinkansen</option>
			<option value="Ice">Ice</option>
		</optgroup>
</select>
</form>

La balise <textarea>

La balise <textarea> définit un champ de saisie multi-ligne (zone de texte)

<form>

		<textarea name="message" cols="40" rows="10" id="message">Tapez votre texte ici...</textarea>

</form>

Soumettre le formulaire

L'attribut de méthode spécifie la méthode HTTP (GET ou POST) qui doit être utilisée pour la soumission du formulaire.

La méthode GET (méthode par défaut) permet de soumettre le formulaire sans informations sensibles telles que les mots de passe. Les données du formulaire seront visibles dans l'adresse de la page

La méthode POST permet de soumettre le formulaire contenant des informations sensibles (comme le mot de passe). POST assure donc une meilleure sécurité car les données du formulaire ne seront pas visibles dans l'adresse de la page.

Formulaire en méthode GET	Formulaire en méthode POST
login : mdp :	login : mdp :

<form action="enregistre.php" method="GET">  <!-- methode GET -->
	
	Login : <input type="text" name="login" /><br/>
	Mdp : <input type="text" name="mdp" /><br/>
	<input type="submit" value="Valider">

</form>

<form action="enregistre.php" method="POST" >  <!-- methode POST -->
	
	Login : <input type="text" name="login" /><br/>
	Mdp : <input type="text" name="mdp" /><br/>
	<input type="submit" value="Valider">

</form>

La méthode GET permet également de créer des liens URL
qui passent des paramètres à un fichier cible :

HTML formulaire