HTML4 -les formulaires

HTML 5 apporte de nombreuses nouveautés en ce qui concerne les formulaires.
Mais ne remet en pas en cause tout ce qui existait déjà et que je vais rappeler dans cette page.

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 d'un traitement PHP en général). En cas de succès de la soumission la page cible 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 !

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, 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 : 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)

... label, input{display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% } label {text-align : right ; } ... <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><input type = 'reset' value ="effacer les saisies"> <label></label><input type = 'submit' value ="connexion" > </form> ...

Commentaire du code CSS

label, input {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 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 apparaitront 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.
Les attributs name peuvent aussi être utilisés dans le cadre d'un contrôle de saisie côté client en JS.
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.

<input type = 'reset' value ="effacer les saisies" > : bouton d'effacement. Si clic sur ce bouton les zones de saisie sont vidées.

<input type = 'submit' value ="connexion" >> : bouton de soumission. Si clic sur ce bouton les données saisies sont envoyées dans la page précisée par l'attribut action et cette dernière page s'affiche !

Tests à faire

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 chaine : ...connexion.htm&identifiant=Macron&motdepasse=Brigitte
Donc Le mot de passe apparait en clair dans la barre d'url ! C'est embêtant … Faites le test

Deuxième test

Maintenant vous revenez sur la page "connexion.htm" ; vous videz les deux champs (bouton "reset") 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 dans la barre d'URL

Solution : connexion_bis.htm

Avec HTML4 il fallait utiliser JavaScript pour effectuer un contrôle de saisie côté client. En effet les multiples attributs tels required, placeholder, pattern qui autorisent un contrôle de saisie côté navigateur et sans programmation n'existaient pas !!!

Le code HTML du formulaire

<form name ="form1" action = "trait1.htm" method ='post' onsubmit="return fenvoi()" > <label>identifiant : </label> <input type = "text" name = 'identifiant' maxlength ="8"> <label>mot de passe : </label> <input type = "password" name = 'motdepasse' maxlength ="8"> <input type = 'reset' value ="effacer les saisies"> <input type = 'submit' value ="connexion" > </form>

La valeur de l'attribut method est désormais post
Les deux boutons de commande (reset & submit) sont côte à côte.

Dans la balise FORM j'ai rajouté : onSubmit="return fenvoi()"
Expliquons cette formule étrange !
Si clic sur le bouton de soumission la fonction "fenvoi()" est exécutée. Si cette fonction retourne VRAI il y a envoi des données sinon il n'y a pas soumission.
En d'autres termes cette instruction signifie : "soumission uniquement si la fonction JS retourne true"

Notez que j'ai aussi donné un nom au formulaire via l'attribut name.
Et comme chaque zone de saisie est aussi nommée je peux utiliser la syntaxe suivante pour référencer une zone de saisie dans mon script :
nomFormulaire.nomChamp.

Le script

function fenvoi() { // variables var compteur =0 ; var identifiant = form1.identifiant.value; // référence contenu du premier champ de saisie var motdepasse = form1.motdepasse.value; // test if(identifiant.length >=6) compteur++; if(motdepasse.length >=6) compteur++; if (compteur==2) return true; else return false; } // fin fonction

Notez comment les contenus des zones de saisie sont récupérées dans des variables : nomFormulaire.nomChamp.value.

La variable compteur passe de 0 à 1 si le premier champ de saisie comprend une chaine d'au moins 6 caractères.
La variable compteur passe de 1 à 2 si le deuxième champ de saisie comprend une chaine d'au moins 6 caractères.
Si compteur est égal à 2 alors la fonction retourne VRAI sinon FAUX.

Tests

C'est seulement à l'occasion de la troisième tentative que vous accédez la la page "trait1.htm".
Observerez alors attentivement la barre d'url de "trait1.htm" dans le cadre du test 3 Les valeurs saisies n'apparaissent plus !
Faites les tests

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

Autres zones de saisie

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

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

Le code CSS (extrait)

... label, input,span {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% ; } input[type = checkbox], input[type = radio], span {width : 7% ; height : 20px ; } ...

Après avoir défini pour l'ensemble des INPUT une largeur interne de 44% et une hauteur de 30px, on réduit la largeur pour les cases à cocher, les boutons radio et les span.
Notez bien comment en CSS on cible certaines balises en fonction d'une valeur d'attribut.

Le code HTML

<form name="form1" action = "trait2.htm" method="post" onsubmit= "return fenvoi()"> <h2>Fiche de renseignements en ligne</h2> <label>Nom : </label><input type ="text" name = "nom" > <label>Prénom : </label><input type ="text" name ="prenom" > <label>Civilité : </label> <span>Monsieur</span><input type ='radio' value = 'M' name = 'civilite'> <span>Madame</span><input type ='radio' value = 'Mme' name = 'civilite'> <label>Votre tranche d'âge :</label><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> <label>sports pratiqués :</label> <br> <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>Vos coordonnées :</label> <br> <label>Adresse : </label><input type ='text' name ="adresse1" > <label>Adresse : </label><input type ='text' name ="adresse2" > <label>Adresse : </label><input type ='text' name ="adresse3" > <label>Téléphone : </label> <input type ="tel" name ="tel" maxlength ='10'> <label>Adresse mail : </label><input type ="text" maxlength ="30" name ="email"> <input type ="reset" value ="videz le formulaire" > <input type ="submit" value ="envoyez" > </form>

Les données seront adressées vers la page "trait2.htm" uniquement si la fonction JS retourne true.

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 la balise double 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" à la page cible !

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.
Pour chaque case à cocher ou bouton radio il faut utiliser l'attribut value. Ainsi si vous cochez la première et la dernière case à cocher vous envoyez les valeurs A et D. Donc la variable SPORTS est en fait un tableau de valeurs.
Pour légender les boutons radio et les cases à cocher on a utilisé le conteneur SPAN ; le conteneur LABEL étant réservé aux légendes pour les autres zones de saisie.

Le script

function fenvoi() { var compteur = 0 ; var nom = form1.nom.value; var prenom = form1.prenom.value; var email =form1.email.value; if(nom.length >=2) compteur++; if(prenom.length >=3) compteur++; if(email.indexOf("@") >0) compteur++; if (compteur==3) return true; else return false; }

Il ne s'agit pas d'un tuto JS mais d'un tuto HTML donc la fonction est délibérément simplifiée.
On suppose qu'il n'y a que trois champs de saisie obligatoires.

L'instruction email.indexOf("@") retourne le rang du caractère "@" dans la chaine "email" . Si le caractère "@" n'est pas trouvé elle retourne -1.

Tests

Remplissez le formulaire !

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.

Attention dans le cas d'envoi de fichiers l'attribut enctype devient obligatoire !

Exemple

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.htm" 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.
Si vous oubliez cet attribut dans le cadre d'un envoi de fichier le destinataire ne recevra qu'une chaine 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 apparaitre puisque vous n'autorisez que les fichiers gif, jpg et jpeg.

Le traitement en PHP de l'envoi de fichier n'est pas évoqué ici ! Dans la page cible je contente d'indiquer la bonne réception.
Extrait du code de la page cible :

... <h2>Bravo ! <br>L'image a bien été soumissionnée !</h2> ...
Testez le code !

Zone de texte multiligne

Exemple : livre d'or

Je vais aussi présenter très succinctement un script PHP.
Dans le tuto "Débutez en programmation Web" il y a quelques pages sur le PHP.

Le code CSS

... label, input{display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% ; } textarea {display : inline-block ; width : 44% ; min-height : 30px ; margin :10px 1% 10px 1% ;} ...

Un nouveau sélecteur apparait : textarea !

Le code du formulaire

<form name ="form1" action = "livredor_trait.php" method = "get" onsubmit="return fenvoi()"> <h2>Donnez votre avis sur le site !</h2> <h3>* : champs obligatoires</h3> <input type ="hidden" value = "message pour livre d'or" name ='provenance' /> <label>* Votre pseudonyme (4 lettres mini):</label> <input type ="text" maxlength ="8" name ='pseudo' /> <label>* votre message : </label> <textarea name ='message'></textarea> <label>* Votre adresse mail :</label> <input type = "text" name ='email' /> <label></label><input type ="submit" value ="validez" /> </form>

Les données sont adressées à "livredor_trait.php" .
La cible a ici une extension .php car elle contient un script PHP !

Le script

function fenvoi() { // variables var compteur =0 ; var pseudo = form1.pseudo.value; var message = form1.message.value; var email = form1.email.value; // test if(pseudo.length >=4) compteur++; if(message.length >=10) compteur++; if(email.indexOf("@") >0) compteur++; if (compteur==3) return true; else return false; } // fin fonction

Toujours contrôle de saisie sommaire côté client.

Le code de la page cible : livredor_trait.php"

... <h1>Bravo, vous êtes connecté</h2> <p class ="remarque">Regardez bien la barre d'url !</p> <?php echo "votre avis est pris en compte !" . "<br>"; echo "votre pseudonyme est : " .$_GET['pseudo']. "<br>"; echo "votre email est : " .$_GET['email']. "<br>"; echo "votre message est : " .$_GET['message']. "<br>"; ?> </body> ...

Je n'en dis pas plus.
Si vous voulez comprendre ce script PHP : Notions de PHP

Tests

Vous devez renseignez les trois champs pour accéder à la page cible, celle contenant le PHP. Testez le livre d'or !

Les données saisies apparaissent dans la barre d'url et c'est normal puisque la méthode est GET !
Retour menu