Les formulaires HTML

Dès que l'on est sur la "toile" on passe son temps à remplir des formulaires.
Pour créer votre espace personnel sur un site, vous devez remplir un formulaire.
Commander en ligne : une succession de formulaires à renseigner.

Attention l'envoi des données dans le cadre d'un formulaire c'est le "boulot" du HTML mais le traitement des données envoyées ça dépasse les possibilités du HTML. On fait donc appel au langage PHP et au SQL (SQL : langage de gestion d'une base de données).

Attention le traitement avec PHP des données soumissionnées est évoqué dans un autre chapitre du même tuto. Voir la partie "Initiation au PHP & SQL".

Les balises de formulaire

Le conteneur FORM

Le code d'un formulaire se place à l'intérieur de la balise double FORM.

La balise FORM comprend deux attributs obligatoires s'il s'agit d'un formulaire de soumission (envoi de données) : action et method.
Attribut action : précise l'adresse de la page vers laquelle les données sont envoyées (en vue d'un traitement PHP en général). En cas de succès de la soumission la page précisée par l'attribut action va s'afficher à la place de celle contenant le formulaire.

L'outil formulaire peut aussi être utilisé pour saisir des données en vue d'un traitement JavaScript. Dans ce cas les attributs de la balise FORM sont inutiles !

méthode GET : les informations apparaissent dans la barre d'adresse du navigateur
méthode POST : les informations n'apparaissent pas dans la barre d'adresse du navigateur

des zones de saisie
des légendes (pour indiquer à l'internaute ce qu'il doit saisir)
des boutons de commande

Les zones de saisie

les champs de saisie ordinaires (balise INPUT avec la valeur text pour l'attribut type)
les champs de saisie pour les mots de passe (balise INPUT avec la valeur password pour l'attribut type)
les zones de saisie extensibles (conteneur TEXTAREA)
les listes déroulantes (conteneur SELECT)
les cases à cocher (input type = 'checkbox')
les boutons radio (input type ='radio')

Les légendes

On associe en général à chaque zone de saisie une légende grâce au conteneur LABEL

Les boutons de commande

type = 'submit' : bouton de soumission ; pour envoyer les données (vers une autre page ou la même page)
type ='reset' : bouton pour effacer le contenu du formulaire
type = 'button' : type générique associé en général à une fonction JAVASCRIPT qui précise l'action à effectuer

Remarque

La balise FORM est de type block. les autres balises utilisées au sein d'un formulaire (input, button, label,etc.) sont par défaut de type inline.
Remarque : il est souvent utile de transformer ces éléments "inline" en éléments "inline-block" c'est à dire en boites sans saut de ligne.

Exemple 1

Nous avons créé notre espace personnel sur un site et nous voulons nous connecter à celui-ci.
Il faut donc saisir notre identifiant et notre mot de passe. Il faut mieux que le mot de passe saisi n'apparaisse pas à l'écran.

La feuille de style

...
	label, input, button {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% ; }
	label {text-align : right ; }

label, input, button {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1%; } : largeur exprimée en % du conteneur (FORM). les balises citées deviennent des "boîtes inline" c'est à dire qu'elles se mettent côté à côte mais avec des marges entre elles.
Comme la largeur totale de chaque élément inline-block est de 46% (44% + 2% de marges externes gauche et droite) il y aura toujours (et seulement) deux éléments côte à côte : la légende et la zone de saisie correspondante.

Le code de la partie BODY

	<h2>Connectez vous (si vous êtes déjà inscrit)</h2>
	<form action = 'trait1.htm'  method ='get'>
		<label>identifiant  : </label>	
		<input type = "text" name = 'identifiant'  >
		<label>mot de passe : </label>	
		<input type = "password" name = 'motdepasse' >
		<label></label>
		<button type = 'submit' > connexion </button>
	</form>
	</body></html>

<form action = 'trait1.htm' method ='get'>
Après soumission des données vous êtes redirigé vers la page "trait1.htm" ; les données saisies dans le formulaire apparaîtront dans la barre d'url de la page "trait1.htm" car method a la valeur get.

<label>identifiant : </label> < input type = "text" name = 'identifiant' >

La première instruction (conteneur LABEL) affiche une légende
La deuxième (balise INPUT) crée un champ monoligne ordinaire pour la saisie de l'identifiant

<input type = "password" name = 'motdepasse' >
création d'un champ dans lequel la saisie effectuée n'apparaît pas ; chaque caractère saisi affichée sous forme d'un point.

La valeur de l'attribut name sera utilisé dans le cadre du traitement des données (via PHP ou un autre langage). Donc ne l'oubliez pas.
Dans le cadre d'un traitement en JavaScript on utilisera de préférence la valeur de l'attribut ID.
Rien n'interdit d'attribuer à un INPUT les attributs name & id.
Il ne doit pas y avoir deux champs de saisie ayant le même nom ou le même ID.

<button type = 'submit' > connexion </button>
Création d'un bouton de soumission. Si clic sur ce bouton les données saisies sont envoyées dans la page précisée par la valeur de l'attribut action de la balise form et cette page s'affiche !

Tests

Nous allons procéder à une série de tests.

Premier test

Saisissez l'identifiant : "Macron"
puis le mot de passe : "Brigitte"
enfin cliquez sur le bouton légendé "connexion"
Vous arrivez alors sur une nouvelle page : "trait1.htm"
Dans cette page observez bien la barre d'url
Vous lisez à la fin de la chaîne : ...connexion.htm&identifiant=Macron&motdepasse=Brigitte

Faites le premier test !
Donc Le mot de passe apparaît en clair dans la barre d'url ! C'est fâcheux ...

Deuxième test

Vous laissez les deux champs vides et vous cliquez sur le bouton "connexion".
Faites ce deuxième test !
Vous arrivez quand même sur la page "trait1.htm" ... C'est très embêtant ...
Il faudrait que l'envoi soit bloqué si un des deux champs n'est pas rempli. Il faudrait aussi que le mot de passe n'apparaisse pas en clair dans la barre d'URL.

Solution

identifiant : entre 6 et 8 lettres minuscules non accentuées
motdepasse : 6 lettres MAJUSCULES non accentuées

Le code CSS & HTML doit être modifié.
Ajouts dans la feuille de style : input:valid{color : green ; } input:invalid{color : red ; }

Le code du conteneur FORM: <form action = 'trait1.htm' method ='post'> <p>Le texte saisi devient vert dès qu'il correspond à une saisie valide</p> <label>identifiant : </label> <input type = "text" name = 'identifiant' required pattern ='[a-z]{6,8}' maxlength = '8' placeholder ='entre 6 et 8 lettres minuscules' > <label>mot de passe : </label> <input type = "password" name = 'motdepasse' required pattern ='[A-Z]{6}' maxlength ='6' placeholder = '6 lettres majuscules'> <label></label><button type = 'submit' name ='envoi' > connexion</button> </form>

Nous utilisons deux nouvelles pseudo-classes introduites par CSS 3 :
:valid et :invalid

input:valid{color :green;} : mise en forme qui s'applique à un INPUT correctement rempli (saisie correspond au "modèle")
input:invalid{color : red ;} : règle de style qui s'applique à un INPUT mal rempli (saisie ne correspond pas au "modèle")

Donc tant que la saisie est invalide le texte saisi sera en rouge mais passera au vert dès que la saisie correspondra au "pattern" (modèle).

Analyse du code HTML

Pour chacun des deux champs on a ajouté les nouveaux attributs suivants : maxlength, pattern, placeholder
Attribut pattern = "expression régulière" :

La valeur de l'attribut pattern est une expression régulière. Voir ci-dessous.
Attribut maxlength = "entier" qui précise le nombre de caractères maximum autorisés.

Attribut placeholder = "texte" : la valeur de cet attribut est le contenu du champ tant qu'il n'est pas renseigné. Cet attribut est utilisé pour guider l'internaute dans sa saisie.

Expressions régulières

première partie ou classe (entre crochets) : les caractères autorisés
deuxième partie ou quantificateur (entre accolades) : le nombre de caractères autorisés

[A-Z]{6}: 6 lettres majuscules
[A-z]{6} : 6 lettres majuscules ou minuscules
[a-z0-9]{5,} : au moins 5 lettres minuscules ou chiffres
[a-zéèâà@]{5,7}: entre 5 et 7 lettres minuscules y compris des lettres accentuées et le caractère arobase

Une expression régulière peut être constituée de plusieurs paires de classes-quantificateurs.
Ainsi l'expression régulière correspondant à un modèle d'adresse mail :
[A-z0-9._-]+[@]{1}[A-z0-9._-]+[.]{1}[A-z]{2,10}

Tests

Tant que la saisie dans un champ ne correspond pas au "modèle" défini par l'attribut pattern le texte saisi apparait en rouge. Dès que la saisie correspond au "patron" le texte passe en vert !

Mais surtout tant qu'un champ obligatoire n'est pas rempli ou est mal rempli (saisie non conforme au "pattern") alors l'envoi des données est impossible. On dit que la soumission est bloquée.

Vous venez donc de réaliser un contrôle de saisie très efficace "côté client".

Testez ce formulaire très amélioré

Fiche de renseignements

La saisie ne se fait pas forcément via un champ de saisie (input type ='text' ou input type ='password')

les cases à cocher
les boutons radio
les listes déroulantes
les zones de texte extensibles (ou multi-lignes)

Illustrons ces différents champs grâce à un exemple : une fiche de renseignements

Le code CSS de la page (extrait)

...
	input[type = checkbox], input[type = radio], span {width : 7% ; height : 20px ;  }
	select {width : 30% ; margin : 10px; }
	label {text-align : right;}
	input:valid {color : green}				
	input:invalid {color : red}
	input:required {background : pink ; }
...

Observons quelques règles de style :
input[type = checkbox], input[type = radio], span {width : 7% ; height : 20px ; } : notez les sélecteurs qui précisent le type de INPUT concerné
input:required {background : pink ; } : les champs de saisie obligatoires ont un fond rosé

Le code du formulaire

...
<form action  = "trait_renseignements.php"  method="post"> 
<h4>Fiche de renseignements en ligne</h4>
	<label>Nom : </label><input type ="text"  name = "nom" required placeholder ='saisir en majuscules' pattern ="[A-Z']{3,30}">
	<label>Prénom : </label><input type ="text" name ="prenom"  required placeholder ='saisir en minuscules' pattern ='[a-zéèâ]{3,30}'>
	<p>Civilité :</p>
		<span>Monsieur</span><input type ='radio' value = 'M'  name = 'civilite'>
		<span>Madame</span><input type ='radio' value = 'Mme'  name = 'civilite'>
	
	<p>Votre tranche d'âge :</p>
	<select name = 'age'>
		<option value = 't1'>Moins de 20 ans </option>
		<option value = 't2'>Entre 20 et 40 ans </option>
		<option value = 't3'>Entre 40 et 60 ans   </option>
		<option value = 't4'>Plus de 60 ans </option>
	</select>
	
	<p>Jeu de société pratiqués ?  </p>
	<select name = 'jeux[]' multiple style ="height : 70px;"> 
		<option value = 'bridg'>Bridge</option>
		<option value = 'taro'>Tarot</option>
		<option value = 'belot'>Belote</option>
		<option value = 'echec'>Echec</option>
		<option value = 'autre'>Autre</option>
		<option value = 'aucun'>Aucun </option>
	</select>
	
	<p>sports pratiqués ? </p>
		<span>aucun</span><input type ='checkbox' value = 'A'  name = 'sports[]'  >
		<span>vélo</span><input type ='checkbox' value = 'V'  name = 'sports[]'>
		<span>football</span><input type ='checkbox' value = 'F'  name = 'sports[]'>
		<span>natation</span><input type ='checkbox' value = 'N'  name = 'sports[]'>
		<span>autres</span><input type ='checkbox' value = 'D'  name = 'sports[]'>
	
		<label>Adresse mail : </label><input type ="email"  maxlength ="30" name ="email" required  placeholder = '_____@_____'>
		<input type ="reset" value ="videz le formulaire" >
		<input type ="submit" value ="Validez">
</form>	
...

Analysons maintenant le code HTML :
...action = "trait_renseignements.php" : dès que vous parvenez à soumissionner les données, celles-ci sont adressées au fichier "trait_renseignements.php" en vue d'un traitmeent par un script PHP.

À propos du formulaire

Pour créer un groupe de boutons radio il faut donner le même nom à tous les input type = 'radio'.
Dans un groupe de boutons radio on ne peut cocher qu'un bouton !

Pour créer une liste déroulante il faut utiliser le conteneur SELECT contenant plusieurs fois le conteneur OPTION.
Ne confondez pas la "value" d'une option et la légende de l'option.
<option value = 't1'>Moins de 20 ans </option> : la légende de l'option est "moins de 20 ans" ; la value de l'option est 't1'. Donc si sous sélectionnez cet item vous envoyez la valeur "t1" !

Il y a deux types de listes déroulantes : liste à choix unique et liste à choix multiple.
Dans l'exemple la liste pour sélectionner une tranche d'âge est à choix unique alors que celle pour sélectionner un ou plusieurs jeux de société est à choix multiple ( attribut "multiple") ; comme on peut saisir plusieurs valeurs son nom est celui d'un tableau : jeux[] (les crochets sont obligatoires).

Pour créer un groupe de case à cocher il faut donner le même nom à tous les input type ='checkbox' . Dans un groupe de cases à cocher on peut cocher plusieurs cases. Donc le nom doit désigner un tableau d'où les crochets.

La saisie de l'adresse mail se réalise dans un input type ="email. Le contenu dans tel champ doit comprendre le caractère arobase !

Le rendu dans un Iframe

La soumission est bloquée si des champs obligatoires ne sont pas renseignés ou si les "pattern" ne sont pas respectés.

Le code de la page "trait_renseignements.php"

...
<?php
if(isset($_POST['sexe']))
{
	echo "Votre civilité :  " . $_POST['civilite'] . "<br>";
	echo "Votre tranche d'âge : " . $_POST['age'] . "<br>";
	echo "Vos jeux de société pratiqués : " . "<br>"; 
		foreach($_POST['jeux'] as $jeu) 		{echo $jeu . "<br>";}
	echo "Les sports que vous pratiquez : " . "<br>"; 
		foreach($_POST['sports'] as $sport) 		{echo $sport . "<br>";}
}
?> 
</h3>

Le traitement PHP ne sera pas commenté ici.
Pour comprendre le code PHP ci-dessus

Le livre d'or

Cette thématique permet d'introduire un nouveau type de zone de saisie : le champ multiligne : balise double textarea

Le code CSS et HTML de la page

...
	input:invalid, textarea:invalid {color : red; }
	input:valid, textarea:valid {color : green ; }
		
	textarea {display : inline-block ; width : 44% ; min-height : 30px ; margin :10px 1% 10px 1%    }
	input:required, textarea:required {background : pink ; }

...
<form  action = "livredor_trait.php" method = "get"> 
	<input type ="hidden"  value = "message pour livre d'or" name ='provenance'>
	<label>Votre pseudonyme:</label>
	<input type ="text" maxlength ="8"  required pattern = '[A-z]{6,8}' 
		placeholder= 'entre 6 et 8 lettres' name ='pseudo'>
	<label>Votre message : </label>	
	<textarea   required placeholder = 'Tapez votre message ici' name ="message" > </textarea > 
	<label>Votre adresse mail </label>	
	<input type = "email" placeholder= "n'oubliez pas l'@" name ='mail'>
	<label></label><button type ="submit" >Validez</button>
</form>
...

< form ... method ='get' > :
Vous souvenez vous de la différence entre la méthode GET et POST ?

<input type ="hidden" value = "message pour livre d'or" name ='provenance'> : il s'agit d'un champ masqué. Un champ masqué permet d'envoyer une donnée à l'insu de l'internaute. La donnée envoyée est bien sûr la "value" de cet input (pour un INPUT de type hidden l'attribut VALUE est obligatoire).

<textarea required placeholder = 'Tapez votre message ici' name ="message" ... : avec le conteneur TEXTAREA on crée une zone de saisie extensible ; il suffit d'appuyer sur ENTER pour passer à la ligne. C'est pour cette raison que l'on parle aussi de zone de saisie multilignes. Donc grâce au conteneur TEXTAREA l'internaute peut saisir un text long (à la différence d'un INPUT.

Remplissez le formulaire sauf le dernier champ et tentez de soumissionner.
C'est possible puisque le dernier champ est facultatif (pas d'attribut required)

Le rendu

Adresser une pièce jointe

Vous pouvez souhaiter envoyer un fichier présent sur votre disque dur, par exemple une image. Il faut alors utiliser la balise input avec le type file

Avec l'attribut accept vous pouvez préciser le type de fichier susceptible d'être envoyé.

Avec input type = "file" vous créez un champ qui est suivi d'un bouton légendé "choisissez un fichier".
Ce bouton permet d'ouvrir une boite de dialogue "Open" pour choisir le fichier.

Code

Je vous propose le code HTML d'un formulaire qui permet d'envoyer une image. ... <p>Envoi d'une image <form action = "envoi_image_trait.php" method = "post" enctype ="multipart/form-data" name ="envoi_image"> <input type="hidden" name ="max_file_size" value="100000"> <label>Choix de l'image</label> <input type = "file" accept ="image/gif, image/jpeg, image/jpg" size ="30" name ="choix_image"/> <label></label><button type ="submit" >Validez</button> </form> ...

Pour l'envoi d'un fichier il faut donner la valeur "multipart/form-data" à l'attribut enctype de la balise FORM.
Donc l'emploi de cet attribut (valeur par défaut : "text/plain") devient obligatoire.
Si vous oubliez cet attribut dans le cadre d'un envoi de fichier le destinataire ne recevra qu'une chaîne de caractères contenant le nom et le chemin de ce fichier dans le disque dur de l'expéditeur.

Il est également possible de limiter la taille du fichier à envoyer. Il suffit d'ajouter un champ masqué nommé MAX_FILE_SIZE et de préciser la valeur de la taille maximale acceptée (en octets).

Grâce à la valeur de l'attribut accept il y aura filtrage !
Ainsi si vous sélectionnez un dossier contenant des images vectorielles (*.svg) celles-ci ne vont pas apparaître puisque vous n'autorisez que les fichiers gif, jpg et jpeg.

Le rendu

Dans la page cible on se contente d'indiquer la bonne réception ; pas de traitement des données.

Traduction

Débuter en programmation web - sommaire

Initiation au HTML & CSS

Découverte de PHP & SQL

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville

Les formulaires HTML

Les balises de formulaire

Le conteneur FORM

Les zones de saisie

Les légendes

Les boutons de commande

Remarque

Exemple 1

La feuille de style

Le code de la partie BODY

Tests

Premier test

Deuxième test

Solution

Analyse du code HTML

Expressions régulières

Tests

Fiche de renseignements

Illustrons ces différents champs grâce à un exemple : une fiche de renseignements

Le code CSS de la page (extrait)

Le code du formulaire

À propos du formulaire

Le rendu dans un Iframe

Le code de la page "trait_renseignements.php"

Le livre d'or

Le code CSS et HTML de la page

Le rendu

Adresser une pièce jointe

Code

Le rendu