Débuter en programmation web - sommaire

HTML & CSS : les formulaires

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 !

Mais revenons au formulaire de soumission, il y a deux méthodes d'envoi :
• 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

Un formulaire comprend des éléments de différentes natures :
• des zones de saisie
• des légendes (pour indiquer à l'internaute ce qu'il doit saisir)
• des boutons de commande

Les zones de saisie

On peut distinguer :
• 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

On utilise le conteneur BUTTON avec l'attribut type :
• 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.

Le code de la page (extraits)

Commentaire du code CSS

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

Deux instructions HTML:
• 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.

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.
Les attributs name peuvent aussi être utilisés dans le cadre d'un contrôle de saisie côté client en JavaScript.
Il ne doit pas y avoir deux champs de saisie avec le même nom dans un formulaire.

<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

Procédons à 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

Lors de l'inscription sur le site les règles de saisie sont strictes :
• 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

Ici nous les appliquons à la balise INPUT :
• 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

Une expression régulière comprend deux parties :
• 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
  Exemples d'expressions régulières simples :
  • [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é

  Remarque

  Dans la réalité la page cible (ici la page "trait1.htm") contiendrait du code PHP et de ce fait aurait pour extension .php (et non pas .htm). Le code PHP serait chargé de vérifier si le mot de passe saisi est correct.
  Donc PHP rechercherait dans la base de données du site l'identifiant saisi. Si cet identifiant est trouvé le code PHP devrait ensuite comparer le mot de passe saisi au mot de passe stocké dans la base. S'il y a concordance le visiteur a accès à son compte sinon l'accès lui est refusé et un message ad hoc est affiché.

  Fiche de renseignements

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

  Il y aussi d'autres zones de saisie :
  • 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 n'est pas l'objet de ce chapitre.
  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 class ="remarque">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.