Les formulaires

Les formulaires HTML Permettent de saisir des informations des usagers de la page web. Ces informations peuvent être traitées par un programme dont on aura spécifié l'URL sur un serveur ou en utilisant un script JavaScript. Un formulaire contient des champs de saisie, des éléments sélection, des choix, des boutons, des listes déroulantes, etc. L'élément <form> permet de créer un formulaire.

<form> Permet de créer un formulaire. Attributs: name = "nom" du formulaire, utiliés pour références. Method= "Get|Post": méthode HTTP utilisée pour transporter le contenu du formulaire. action="URL" : URL désignant le programme pour traiter le contenu du formulaire. enctype="type MIME" : spécifie l'encodage utilisé pour le contenu du formulaire. Les éléments composant le formulaire sont spécifiés entre <form> et </form>

Exemple de formulaire form.html <form name="job" method="get" action="http://www.site.com/traitement enctype="text/plain"> Nom: <input type="text" name="champNom" > <br> Prénom: <input type="text" name="champPrenom"> <br> Téléphone: <input type="text" name="champTel"> <br> Courriel: <input type="text" name="champCourriel"> <br> <hr> Valider: <input type="submit" value="Go"> </form> form.html

<input> Permet de spécifier des champ de saisie et d'interaction. Plusieurs types de champs de saisie sont possibles: text, button, file, hidden, image, password, reset, submit, radio, check box D'autres types ont été introduits dans HTML5 (voir plus loin !) Attributs: type ="type": indique le type du champ name = "nom": Nom du champs. A ne pas confondre avec l'étiquète externe associée au champ. Id="id": indique l'identificateur du champ. value = "un texte" : contenu du champ ou étiquète de bouton. src ="URL": URL de l'image pour un champ submit, button ou image.

Types de champs text : Permet de saisir un texte en entrée de données. file: Permet de saisir un nom de fichier pour les opérations de chargement (upload) hidden: un champ qui n'est pas affiché. password : Permet de saisir un mot de passe. Le contenu tapé est remplacé par " *******" submit: Permet d'envoyer le contenu du formulaire à un serveur. Ce contenu doit être traité par un programme. reset : Permet d'effacer le contenu courant du formulaire. image: Permet de définir une image comme un bouton submit. radio: Permet d'exprimer une liste de choix. L'usager en choisit un. Les choix sont mutuellement exclusifs. checkbox: Permet d'exprimer une liste de boutons de choix. L'usager peut en choisir un ou plusieurs.

Exemple- Formulaire formulaire1.html <form name="job"> Nom: <input type="text" name="champNom" ><br> Prénom: <input type="text" name="champPrenom" ><br> Téléphone: <input type="text" name="champTel" value= "(514)123-456"> <br> Courriel: <input type="text" name="champCourriel"> <br> <hr> Langue maternelle: <br> <input type="radio" name="champLangue" value="Fr" > Francais<br> <input type="radio" name="champLangue" value="Eng" > Anglais<br> <input type="radio" name="champLangue" value="Autre" > Autre. Specifiez: <input type="text" name="champsLangue" ><br> Langages de programmation apprix: <br> <input type="checkbox" name="champLangage" value="Cplus" > C++<br> <input type="checkbox" name="champLangage" value="Java" > Java <br> <input type="checkbox" name="champLangage" value="Cshap" > C#<br> <input type="checkbox" name="champLangage" value="Autre1" > Autre 1. Specifiez: <input type="text" name="champsLangage1" ><br> <input type="checkbox" name="champLangage" value="Autrew" > Autre 2. Specifiez: <input type="text" name="champsLangage2" ><br> Soumettre votre CV (format PDF): <input type="file" name="champCV" accept="image/pdf" /> Valider: <input type="submit" value="Go"> ou <input type="image" src="go.jpg" width="50"> </form> formulaire1.html

Champs text Un champ de saisie qui permet l'entrée de données L'attribut size donne la taille visible en caractères, de ce champ L'attribut maxlength : donne la limite du nombre de caractères qu'on peut entrer. <input type="text" name="champTel" size=12 maxlength=15 > <br>

Champs boutons Définit un élément sur lequel on peut cliquer. Il y a quatre types : submit, reset, image et button. submit et image: envoient les données au serveur. reset: vide le formulaire. boutton : ne fait rien . Utilisé avec les scripts JavaScript. L'attribut value représente le label du boiton. ; L'attribut width définit sa largeur en pixels L'attribut src permet de spécifier l'URL de l'image pour un bouton de type image. <input type="submit" name="validation" value="Go" size="30"> <input type="image" name="validation" src="go.jpg" width="50"> <input type="button" name=" validation " value= "Go" onClick="alert('Que voulez-vous ?')">

Champs checkbox et radio Ils permettent de spécifier une liste d'options: radio: choix multiples checkbox: choix multiples mutuellement exclusifs L'attribut name donne un nom à la liste de choix Important pour l'exclusion mutuelle dans le cas de checkbox L'attribut value définit les valeurs pour chacun des choix Seule la valeur sélectionnée est soumise au serveur. L'attribut checked permet de spécifier une valeur présélectionnée lors du chargement de la page <input type="checkbox" name="champLangage" value="Cplus" > C++<br> <input type="checkbox" name="champLangage" value="Java" checked> Java <br> <input type="checkbox" name="champLangage" value="Csharp" > C#<br>

Champs password Définit un champ de saisie d'un mot de passe. Le contenu saisi sera remplacé par "***..***" Attention: Ce contenu n'est pas encrypté lors de l'envoi des données du formulaire. L'attribut maxlength donne la taille maximale du mot de passe. <input type="password" name="motDePasse" maxlength=8" >

Champs hidden Définit un champs caché. L'usager ne le voit pas mais il existe dans le code HTML. On l'utilise pour stocker des valeurs que le serveur envoie au navigateur Son usage ressemble à celui des cookies. Sa valeur peur être changée par un programme script. <input type="hidden" name="Identifiant" value="AOB12345" />

L'attribut enctype Cet attribut spécifie le type d'encodage du contenu du formulaire. Les codes admis sont: application/x-www-form-urlencoded multipart/form-data : aucun encodage text/plain Par défaut c'est application/x-www-form-urlencoded: Les caractères sont codés avant d'être envoyés au serveur: Les espaces sont codés + Les caractères spéciaux sont replacés par leurs codes hexadécimal (ISO-9991-1 par exemple) Exemple: "Étienne Fabergé Lancôme" est codé "%C9tienne+Faberg%E9+Lanc%F4me"

Les zones de saisie de texte L'élément <textarea> permet de définir une zone de saisie de texte qui s'étend sur plusieurs lignes. On peut y mettre un contenu initial. Attributs rows="nombre" : nombre de lignes de la zone cols="nombre": nombre de colonnes de la zone. name="nom" : nom de la zone. readonly: indique que la zone est en lecture seulement (si elle a un contenu initial !). <textarea r ows="3" cols="30"> Vous avez une zone de texte. Vous pouvez effacer ce contenu ou y ajouter du texte ! </textarea>

Les listes déroulantes <select> spécifie une liste déroulante d'options. Chaque option est définie par le sous-élément <option>. Les options figurent dans une fenêtre dont on peut spécifier le nombre d'éléments visibles avec l'attribut size. L'attribut name donne un nom à la liste. On sélectionne une ligne à la fois. Si one veut faire une sélection multiple, on utilise l'attribut multiple. L'élément <option> possède quelques attributs: selected: spécifie qu'une adoption est pre-sélectionnée. Value="texte" : spécifie la valeur envoyée au serveur pour un item, suite à la section.

Les listes déroulantes <form name="job2" enctype="text/plain"> Faite votre selection:<br> <select size=3> <option value="Programmeur">Programmeur</option> <option value="Programmeur web">Programmeur web</option> <option value="Architecte systeme">Architecte systeme</option> <option value="Analyste">Analyste</option> <option value="Concepteur web">Concepteur web</option> <option value="AdminDB"> Administrateur de BD</option> </select><p> Motivations: <br> <textarea rows="5" cols="30"> Vous pouvez nous faire part de raisons qui vous poussent à appliquer chez-nous. Merci. </textarea> <hr> Valider: <input type="submit" value="Go"> </form> formulaire2.html

Présentation des formulaires Il faut prendre les précautions nécessaires pour aligner les éléments du formulaire de manier à en faciliter l'utilisation. L'utilisation de <table> et <div> sont une bonne façon de le faire. <form> <table cellspacing=5 fra> <td> <b> Informations personnelles :</b></td><tr> <td> Nom:</td> <td><input type="text" name="champNom"></td><tr> <td> Prénom: </td> <td><input type="text" name="champPrenom"></td><tr> <td rowspan=2> <b> Langue de choix :</b> </td> <td><input type="radio" name="champLangue" value="Fr" > Francais</td><tr> <td><input type="radio" name="champLangue" value="Eng" > Anglais</td><tr> <td rowspan=2> <b> Langage de programmation :<b> </td> <td> <input type="checkbox" name="champLangage" value="Cplus" > C++ </td><tr> <td> <input type="checkbox" name="champLangage" value="Java" > Java </td> <tr> <td cospan=2> <input type="submit" value="Go"> </td> </table> </form> formulaireTabule.html

<label> Permet d'associer une étiquette à un élément. L'élément doit être nommé avec l'attribut id. L'attribut for spécifie le nome de l'élément auquel est associée l'étiquette. Si on clique sur l'étiquette, ca active le choix de l'élément. <form name="job3" enctype="text/plain"> <label for="francais">Francais</label> <input type="radio" name="langue" id="francais" > <br> <label for="anglais">Anglais</label> <input type="radio" name="langue" id="anglais"> <hr> Valider: <input type="submit" value="Go"> </form>

<fieldset> et <legend> <fieldset> permet de grouper des élément d'un formulaire et dessine une boite autour d'eux. On peut associer une légende à ce groupement grâce à l'élément <legend>. Il possède un attribut d'alignement: align <form name="job4"> <fieldset> <legend align=center> Informations personnelle </legend> Nom: <input type="text" name="champNom" ><br> Prénom: <input type="text" name="champPrenom" ><br> … </fieldset> Valider: <input type="submit" value="Go"> </form> formulaire4.html

Le focus par tabulation On peut naviguer entre champs en utilisant la touche de tabulation L'ordre de navigation est déterminé par l'attribut tablindex des l'élément tablindex="nombre" indique que l'élément est visité dans l'ordre indiqué par ce nombre. Tous les éléments ne comportant pas cet attribut sont traités à la fin <input type="text" name="champPrenom" tabindex="3">

Le focus par tabulation <form name="job4"> Nom: <input type="text" name="champNom" tabindex="1" ><br> Prénom: <input type="text" name="champPrenom" tabindex="3"><br> Téléphone: <input type="text" name="champTel" value= "(514)123-456" tabindex="2"> <br> Courriel: <input type="text" name="champCourriel"> <br> <hr> <input type="radio" name="champLangue" value="Fr" tabindex="4"> Francais<br> <input type="radio" name="champLangue" value="Eng" tabindex="6"> Anglais<br> <input type="radio" name="champLangue" value="Autre" tabindex="5"> Autre. Specifiez: <input type="text" name="champsLangue" ><br> Valider: <input type="submit" value="Go" tabindex=`7> </form> formulaire5.html

Le focus par touches d'accès On peut naviguer entre champs en utilisant des touches d'accès rapide. On utilise l'attribut accesskey pour abréger l'accès à cet élément. accesskey="caracatere" Un appui sur ALT + le caractère (sur Windows) lui donne le focus. On peut utiliser cet attribut pour les éléments: <a>, <area>, <button>, <input>, <label>, et <textarea>.

Le focus par touches d'accès <form name="job6"> <label for="nom" accesskey="N"> Nom </label> <input type="text" name="champNom" id="nom"><br> <label for="prenom" accesskey="P"> Prénom </label> <input type="text" name="champPrenom" id="prenom"><br> <label for="tel" accesskey="T"> Téléphone </label> <input type="text" name="champTel" value= "(514)123-456" id="tel"> <br> <label for="courriel" accesskey="C"> Courriel</label> <input type="text" name="champCourriel" id="courriel"> <br> <hr> Valider: <input type="submit" value="Go" > </form>

Soumission des formulaires Dans l'élément <FORM> on spécifie les attributs: method="GET | POST": la méthode utilisée pour envoyer le contenu du formulaire. action="URL": l'adresse de la ressource qui va traiter les données du formulaire. Avec la methode GET, les données sont rajoutées à l'URL spécifiée par l'attribut action lors de l'envoi de la requête au serveur. Avec la méthode POST, les données du formulaire sont incluses dans le corps de la requête lors de l'envoie vers l'URL de l'attribut action.

Transport des données du formulaire POST URL HTTP/1.1 … …En-têtes Ligne vide …Corps de la requête GET URL HTTP/1.1 … …En-têtes Ligne vide …Corps de la requête Message: Quand viendrez-vous nous voir ? De: A. Obaid CP 8888, Suc. Centre ville H3C 3P8, Montréal, QC, Canada A: Bob Lajoie 17, Rue de la paix Parix, Cedex, 2000, France De: A. Obaid CP 8888, Suc. Centre ville H3C 3P8, Montréal, QC, Canada A: Bob Lajoie 17, Rue de la paix Parix, Cedex, 2000, France Message: Quand viendrez-vous nous voir ?

Transport des données du formulaire Les noms des éléments du formulaire et leurs valeurs sélectionnées sont présentés au serveur selon la forme: nom=valeur et séparés par &. Sans oublier les champs cachés ! Exemple: Dans le cas de GET, l'URL soumis sera: http://www.google.com/Search?champNom=Obaid&champPrenom=Abdel&champLangue=Fr&champLangage=Cplus&champLangage=Java <form name="job" method="get" action="http://www.google.com/Search"> Nom: <input type="text" name="champNom" ><br> Prénom: <input type="text" name="champPrenom" ><br> <input type="radio" name="champLangue" value="Fr" > Francais<br> <input type="radio" name="champLangue" value="Eng" > Anglais<br> <input type="checkbox" name="champLangage" value="Cplus" > C++<br> <input type="checkbox" name="champLangage" value="Java" > Java <br> Valider: <input type="submit" value="Go"> </form> formulaireTest.html

Transport des données du formulaire Dans le cas de POST, le corps de la requête soumise contiendra : champNom=Obaid&champPrenom=Abdel&champLangue=Fr&champLangage=Cplus&champLangage=Java POST http://www.google.com/Search HTTP/1.0 User-Agent: Mozilla/3.5 Content-Type: application/x-www-form-urlencoded Content-Length: 32 champNom=Obaid&champPrenom=Abdel& champLangue=Fr&champLangage=Cplus&champLangage=Java

Les nouveaux éléments de forumlaires De nouveaux éléments de saisie ony été introduits dans HTML5 Éléments de saisie <input> introduits dans HTML5 color, date, datetime-local, email, month, number, range, search, tel, week, url, etc. Attributs introduits autocomplete, autofocus, validate, novalidate, list, min , max, multiple, pattern , placeholder, required, step, readonly , disabled, etc.

Les nouveaux types de champs de saisie Champs de type email et url: Certains téléphones intelligents adaptent leurs claviers en fonction de ces types. Pour le moment, aucune vérification n’est effcetuée <input type="email" /> <input type="url"  />

Les nouveaux types de champs de saisie Champ de type number Le navigateur affiche un menu pour défiler les nombres Attributs (optionnels): max : valeur maximale permise. min : valeur minimale permise step : pas des nombres Value: valeur par défaut Donnez votre age (entre 10 et 90):  <input type="number" name=“age" min="10“ max=“90“ step=“1” value=“18”>

Les nouveaux types de champs de saisie Le champ de type range Le navigateur affiche un menu de défilement Attributs (optionnels): max: valeur max min : valeur min step : pas de variation des valeurs value : valeur par défaut <input type="range" min="0" max="10" step="2" value="6 »  />

Les nouveaux types de champs de saisie Le champ de type date, datetime-local, month, time permettent de saisir la date et le temps sous différents formats. Certains navigateurs offrent des interfaces pour faciliter la saisie. <input type="date"  / > <input type="time"  /> <input type="datetime-local"  /> <input type="month"  />: <input type="week"  />:

Les nouveaux types de champs de saisie Le type search est utilisé pour soumettre une requête à un engin de recherche. Semblable à un champ text Certain navigateurs adaptent la forme de ce champ! <input name="question " type="search"> <input type="submit" value="Go">

Les nouveaux types de champs de saisie Le type color permet de saisir une couleur à partir d’une palette présentée par le navigateur <input type=“color”>

Les nouveaux attributs placeholder: contient un texte qui parait dans un champ lorsqu’il est vide. autofocus : permet de focusser sur le champ dans la page. autocomplete (on /off): permet de compléter le champ à partir de valeurs stockées. required : déclare un champ comme obligatoire. Oblige à saisir des données sinon on ne peut pas soumettre le formulaire. <input type="text" name= "leNom"   placeholder= " Donnez votre nom ici"  autofocus autocomplete="on" /> <input type="email" id= "courriel"   required> <input type="submit">

Les nouveaux attributs Plusieurs navigateurs valident les données saisies si nécessaire. novalidate : enlève la validation du (champ du) formulaire disabled : le champ est desactivé. Le champ parait mais on ne peut pas y saisir des données. <form novalidate> <input type="email" id= "courriel"> <input type="submit"> </form> <form action="traitement"> Nom : <input type="text" name="Session" value="Jean" disabled><br/> Age : <input type="number" name="Age" min="10" max="90"> <input type="submit"> </form>

Les nouveaux attributs datalist: réfère à une liste (avec l'élément <datalist>) qui présente une liste de choix. <form action="traitement.php" > Choisissez un des OS: <input list="systeme"> <datalist id="systeme"> <option value="Windows 8"> <option value="Windows 7"> <option value="IOS 10-"> <option value="IOS 10+"> <option value="Linux"> </datalist> </form>

Les nouveaux attributs Plusieurs navigateurs (par défaut) valident les données saisies si nécessaire. novalidate : enlève la validation du (champ du) formulaire <form novalidate> <input type="email" id= "courriel"> <input type="submit"> </form>

Les nouveaux attributs  readonly : le champs est en lecture uniquement (ne peut pas être modifié). Son contenu est specié dans l'attribut value. disabled : le champ est desactivé. Le champ parait mais on ne peut pas y saisir des donnée. <form action="traitement"> Nom : <input type="text" name="Session" value="Jean" disabled><br/> Age : <input type="number" name="Age" min="10" max="90"> <input type="submit"> </form> <form action="traitement"> Nom : <input type="text" name="Session" value="Jean" readonly> <br/> Age : <input type="number" name="Age" min="10" max="90"> <input type="submit"> </form>

Les nouveaux attributs multiple : permet de saisir plusieurs données dans un champ (pour les champs de types file et email). On peut sélectionner plusieurs fichiers Ou peut donner une liste d’adresses de courriel Courriels : <input type="mail" name="courriel" multiple>

Les nouveaux attributs pattern : permet de donner une expression régulière afin de vérifier le contenu saisi. Exemple: l'expression {0-9]{3}-{0-9]{4} correspond à un téléphone sans le code régional (ex. 987-3000) Certains navigateurs réagissent ne cas de non respect du pattern Telephone : <input type="tel" name="leTelephone" pattern="\([0-9]{3}\){0-9]{3}-{0-9]{5}" Title="Format: (nnn)-nnn-nnnn>