Les formulaires

Dès que l'on est sur la "toile" on passe son temps à remplir des formulaires.
Pour vous inscrire sur un réseau social vous devez remplir un formulaire.
Ensuite pour vous connecter régulièrement vous devez aussi remplir un formulaire.
S'exprimer dans le cadre d'un forum c'est aussi 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 (mise à jour d'une base de données).

Attention le traitement PHP des données envoyées via un formulaire n'est pas évoqué dans ce chapitre.
Mais il y a dans ce même tuto quelques pages d'initiation au PHP & SQL.

Les balises de formulaire

Le conteneur form

Le code d'un formulaire se place à l'intérieur du conteneur 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 du 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 dans la fenêtre !
Attribut method : indique la méthode d'envoi des données.

Il y a aussi l'attribut enctype qui est facultatif pour l'envoi au format texte car la valeur par défaut de cet attribut est "text/plain" !

L'outil formulaire est aussi utilisé pour saisir des données en vue d'un traitement Javascript. Dans ce cas les attributs de la balise form sont inutiles !

Les zones de saisie

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

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 boîtes sans saut de ligne.

Exemple 1 : la page "connexion.htm"

Nous sommes inscrit à un site et nous voulons nous connecter en saisissant notre identifiant et notre mot de passe. Il faut mieux que le mot de passe saisi n'apparaisse pas à l'écran.

Le code de la page (extraits)

... <style> * {font-size : 12pt ; font-family : arial ; } form {width : 80% ; border : 1px solid black; margin : 10px auto 10px auto ; } label, input, button {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% } label {text-align : right ; } </style></head> <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>

Commentaire du code CSS

form {width : 80% ; border : 1px solid black; margin : 10px auto 10px auto ; } : La largeur du formulaire est exprimée en % de celle de la page. Quant à la largeur de la page elle est définie dans la feuille de style externe : 900px pour les grands écrans et 96% de la largeur de l'écran pour les petits écrans.

Dans un autre chapitre je vous expliquerai comment introduire des tests dans une feuille de style.

label, input, button {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% } : Largeur exprimée en % du container (FORM). les balises citées deviennent des "boîtes inline" c'est à dire qu'elles se mettent côté à côte tant qu'il y a de la place (et non pas les unes en dessous des autres).
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.

Commentaire du 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' >

<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.

Remarquez que pour chaque zone de saisie il y a l'attribut name. La valeur de l'attribut name est utilisé dans le cadre du traitement PHP des données. Donc ne l'oubliez pas. Il ne doit pas y avoir deux champs de saisie avec le même nom !

<label> </label>
Il s'agit d'une astuce. Grâce à ce conteneur LABEL vide le bouton de commande sera aligné à droite donc sous les champs de saisie.

<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 !

Essais

Testez la page "connexion.htm"
Saisissez l'identifiant : "Hollande"
puis le mot de passe : "Valerie"
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=hollande&motdepasse=valerie
Donc Le mot de passe apparaît en clair dans la barre d'url ! C'est embêtant … Faites le test

Chaque exemple est affiché dans un nouvel onglet. Pensez à fermer ces onglets ensuite sauf celui avec pour titre : "HTML & CSS - les formulaires".

Maintenant vous revenez sur la page "connexion.htm" ; vous laissez les deux champs vides et vous cliquez sur le bouton "connexion".
Vous arrivez quand même sur la page trait1.htm … C'est fâcheux ! Faites ce deuxième test

Il faudrait que l'envoi soit bloqué tant que les deux champs ne sont pas remplis.

Il faudrait que le mot de passe n'apparaisse pas.

Solution : connexion_bis.htm

Seul le code à l'intérieur du conteneur form change !

... <form action = 'trait1.htm' method ='post'> <label>identifiant : </label> <input type = "text" name = 'identifiant' required ='true' > <label>mot de passe : </label> <input type = "password" name = 'motdepasse' required= 'true'> <label></label><button type = 'submit' name ='envoi'> connexion </button> </form> ...

La valeur de l'attribut method est désormais post
Pour chaque champ on a ajouté l'attribut required avec la valeur true.
Puisque la valeur de cet attribut est une booléen vous pouvez écrire plus simplement : required
required veut dire obligatoire. Un champ obligatoire laissé vide empêche la soumission.

Tests à faire

Test 1 :laissez les deux champs vides et cliquez sur "connexion"

Test 2  : ne saisissez que le mot de passe et cliquez sur "connexion"

Test 3  : ne saisissez que l'identifiant et cliquez sur "connexion"

test 4 : saisissez un espace dans identifant et un espace dans mot de passe et cliquez sur "connexion"

test 5 : saisissez "Hollande" dans identifant et "valerie" dans mot de passe et cliquez sur "connexion"

C'est seulement dans le cadre des tests 4 et 5 que vous arrivez sur la page "trait1.htm".
Vous observerez alors attentivement la barre d'url de "trait1.htm" dans le cadre du test 5 Les valeurs saisies n'apparaissent plus ! Faites les tests

Il n'est pas acceptable que la saisie du caractère espace dans chaque champ puisse autoriser l'envoi des données.

solution définitive

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 CSS3 :
:valid et :invalid

Tant que la saisie est invalide le texte est en rouge mais passe au vert dès que la saisie correspond au "modèle".

Analyse du code HTML

Pour chacun des deux champs on a ajouté les nouveaux attributs suivants : maxlength, pattern, placeholder

La valeur de l'attribut pattern est une expression régulière. Voir ci-dessous.

Attribut placeholder="texte" : la valeur de cet attribut devient le contenu du champ tant qu'il n'est pas renseigné.

Expressions régulières