Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Les formulaires ISGB 1 Intérêt d'un formulaire • Les formulaires occupent une p

Les formulaires ISGB 1 Intérêt d'un formulaire • Les formulaires occupent une place prépondérante dans la conception et l'exploitation d'une application ou un site Web. C'est en effet la seule façon de recevoir en retour des informations provenant directement de l'utilisateur final. ISGB 2 Construction des formulaires • La balise <form> ... </form> a comme unique fonction de déclarer au navigateur qu'il doit mettre en place un formulaire. Elle englobera les éléments ou champs de formulaires comme une ligne de texte, des cases à cocher, des listes déroulantes, etc. • Exemple • <body> • <form> • < ! - - Éléments de formulaire - - > • </form> • </body> ISGB 3 ISGB 4 Construction des formulaires ISGB 5 Construction des formulaires ISGB 6 Construction des formulaires La balise<fieldset> • La balise <fieldset> permet un regroupement de champs de saisie en catégories logiques (thématiques). Ce regroupement rend les contrôles plus compréhensibles. La balise<legend> • La balise <legend> représente un titre ou une légende explicative pour le reste du contenu de son élément <fieldset> parent. ISGB 7 Construction des formulaires Formulaire • Un <label> associe une légende texte à un élément de formulaire. Son contenu est une aide à la compréhension du formulaire, ce qui est fortement recommandé en termes d'accessibilité. Une activation – un clic – de cet élément donne immédiatement le focus sur l'élément de formulaire auquel on le lie. Cette liaison est effectuée avec l'identifiant (attribut id) de ce dernier, auquel on fait référence grâce à (l'attribut for) de <label>. ISGB 8 <body> <form method="post" action=""> <fieldset> <legend>Informationspersonnelles</legend> <label for="nom">Entrervotre nom </label> <input id="nom" name="nom" type="text“/> <label for="prenom">Entrervotreprénom</label> <input id="prenom" name="prenom" type="text“/> </fieldset> </body> ISGB 9 La balise <input> des formulaires et ses variantes La balise <input> des formulaires et ses variantes • L'élément <input> est particulier, car il revêt de multiples apparences et fonctionnalités, uniquement caractérisées par l'attribut type. Son but est de recueillir les informations d'une entrée effectuée par l'utilisateur, éventuellement en lui fournissant toutes les indications nécessaires pour structurer son entrée ou son choix. ISGB 10 Le type text C'est le type le plus classique, il permet la saisie d'un texte. <input type="text" name="prenom"> ISGB 11 Le type password Confrère du type text, un champ d'entrée de mot de passe password est un équivalent dont les caractères sont remplacés visuellement par des astérisques ou des points. Mot de passe : <input type="password" name="psw"> ISGB 12 Les types de input Le type tel Est un champ de texte destiné à recevoir un numéro de téléphone. Téléphone : <input type="tel" name="telephone"> Le type url Est un champ de texte destiné à recevoir unURL. URL : <input type="url“ name="adresseweb"> Le type email Est un champ de texte destiné à recevoir une adresse mail. E-mail : <input type="email" name="adressemail"> Le type range Range: <input type="range" /> ISGB 13 Le type radio • Un bouton radio est un contrôle de formulaire, faisant partie d'un groupe d'autres boutons radio. Ils possèdent tous le même attribut name en tant que lien : un seul bouton radio peut être coché parmi leur ensemble, à un moment donné. <p> <input type="radio" name="genre" value=" masculine" id="m"> <label for="m"> je suis un homme </label> <input type="radio" name="genre" value=" feminin" id="f"> <label for="f"> je suis une femme </label> </P> ISGB 14 ISGB 15 Le type radio Le type checkbox Ce sont des boutons assez similaires aux boutons radio (bouton à choix unique) mais, dans le cas présent, plusieurs choix simultanés peuvent être réalisés. <p> <h5> Choisir votre matière préférée </h5> <input type="checkbox" name="m1" value=" algo" id="al"> <label for="al">Algorithmique</label> <input type="checkbox" name="m2" value=" HTML" id="ht"> <label for="ht"> HTML 5 </label> </p> ISGB 16 ISGB 17 Le type checkbox Le type button • Un bouton classique peut être créé avec un élément <input> de type button. Ce type de bouton ne valide pas un formulaire. • <input type="button"value="Annuler"> ISGB 18 Le type reset • Un contrôle de type reset est un simple bouton réinitialisant tous les champs du formulaire à leur état initial. <p> <label for="prenom">Prénom : </label> <input type="text" name="prenom" id="prenom"> <input type="reset" value=" Remettre à Zero" > </p> ISGB 19 Le type submit • La variante de bouton de type submit est la plus utile, car elle permet de valider le formulaire. Il déclenche la validation complète du formulaire qui le contient, et son envoi à l'adresse spécifiée dans l'attribut action de ce formulaire. <form method="post" action="authentification.php"> <label for="login">Identifiant : </label> <input type="email" id="login"> <input type="submit" value=" valider" > </form> ISGB 20 Le type image C'est un bouton graphique pour soumettre le formulaire. <input type="image" src="b.png" name="bouton"> ISGB 21 Le type file Le type file prend en charge le transfère des fichiers (file) du poste de l'utilisateur vers un ordinateur de type serveur. Il est la plupart du temps représenté par un champ texte listant ces fichiers, associé à un bouton Parcourir... ou Choisissez un fichier. <input type="file" name="monfichier"> ISGB 22 Le type date Le type date permet de saisir une date (jour, mois, année). <input type="date" name="datedenaissance> ISGB 23 Le type time Le type time de saisir une heure . <input type="time" name="heurecontact"> ISGB 24 Le type datetime Le type datetime permet saisir une date et une heure, basée sur l'heure UTC (heure, minute, seconde et fraction de seconde. <input type="datetime" name="evenement"> ISGB 25 Le type month Le type month permet de saisir un mois et une année <input type="month" name="mois"> ISGB 26 Le type number Un champ de type number consacre son existence aux valeurs numériques, éventuellement situées dans un intervalle spécifié par les attributs min et max. <input type="number" name="age"> ISGB 27 Le type color Le type color permet de spécifier une couleur. Il offre une interface de sélection de cour ne nécessitant pas des fonctionnalités autre qu'accepter des couleurs en tant que texte. <input type="color" name="palettedecouleurs" value=”#FF0000"> ISGB 28 La balise<Select> • Il s'agit d'une liste de choix, le plus souvent déroulante, parmi plusieurs éléments<option> dont la valeur est définie individuellement par l'attribut value. Exemple1: <form action=""> <label for="pays">Choisir un fruit: </label><br /> <select name=“fruit" id="p"> <option value=“orange">Orange</option> <option value=“pomme">Pomme</option> <option value=“banane">Banane</option> </select> </form> ISGB 29 Exemple2: <form action=""> <p>votre navigateur préféré : <select> <option value="1">Internet Explorer</option> <option value="2">Firefox</option> <option value="3">Safari</option> <option value="4">Opera</option> <option value="5">Google Chrome</option> </select> </p> </form> ISGB 30 La balise<Select> <form action=""> <select size="4" multiple> <option>Moins de 20 ans</option> <option>De 20 à 40ans</option> <option>De 40 à 60ans</option> <option>Plus de 60ans</option> </select> </form> ISGB 31 La balise<Select> La balise<option> • La balise <option> représente une option individuelle d'une liste de choix <select>. ISGB 32 La balise<textarea> La balise <textarea> représente un champ de saisie à plusieurs lignes, permettant l'édition d'un texte simple. La balise <textarea> possède la liste des attributs suivants : ISGB 33 Exemple <body> <form action=""> <p>Commentaires : </p> <textarea rows="4“ cols="30"></textarea> </form> </body> ISGB 34 La balise<textarea> La balise<optgroup> • La balise <optgroup> permet de regrouper des options d'un formulaire web au sein d'un élément <select>. ISGB 35 <form action=""> <select> <optgroup label="Groupe1"> <option>Option1.1</option> </optgroup> <optgroup label="Groupe2"> <option>Option2.1</option> <option>Option2.2</option> </optgroup> <optgroup label="Groupe3"> <option>Option3.1</option> <option>Option3.2</option> <option>Option3.3</option> </optgroup> </select> </form ISGB 36 La balise<optgroup> Exemple: La balise<button> • La balise <button> est utilisée pour créer un contrôle interactif ayant la forme d'un bouton. ISGB 37 La balise<progress> • La balise <progress> est utilisée pour visualiser l'avancement d'une tâche. Les spécificités de l'affichage sont gérées par le navigateur. Dans la majeure partie des cas, le navigateur affiche une barre de progression. • Exemple <p> Barre de progression : <progress value="70" max="100"> 70% </progress></p> La figure suivante montre le résultat obtenu. ISGB 38 Quelques nouveaux attributs ajoutés avec HTML5 • L'attribut placeholder permet l'affichage d'un texte indicatif dans un champ, qui s'efface lorsque l'utilisateur obtient le focus (en cliquant ou naviguant au clavier). Le texte a pour vocation de présenter des exemples de ce que l'utilisateur peut entrer dans lechamp. • Exemple <form action=""> <label for="recherche">Recherche :</label> <input type="text" name= " recherche" id=« rech" placeholder = " adresse, code postale, ville… " size="30" /> </p> </form> ISGB 39 L'attribut autofocus • L'attribut autofocus donne le focus directement au champ au chargement de la page. La page ne doit évidemment comporter qu'un seul élément portant cet attribut. • Exemple <input type="search" name="recherche" autofocus> La figure suivante montre le résultat obtenu. ISGB 40 L'attribut required • L'attribut required rend la complétion d'un champ obligatoire, signifiant que le navigateur ne doit pas permettre la validation du formulaire si ce dernier reste vide. Exemple <form action=""> <input type="tel" name="telephone" required> <input type="submit" value="Valider"> </form> ISGB 41 L'attribut multiple • L'attribut multiple est un booléen signifiant que la saisie de plusieurs valeurs est possible. Dans le cas d'un champ de type file, le navigateur autorise la sélection de plusieurs fichiers simultanément pour le même élément HTML. • Exemple <input type="email" name="adresses" multiple/> ISGB 42 L'attribut pattern L'attribut pattern est associé aux champs de texte pour tester leur valeur grâce à une expression régulière. Les valeurs incorrectes bloquent la validation du formulaire. Exemple <form action="" >  <input type="text" name="login" uploads/Ingenierie_Lourd/ cours-2-formulaire.pdf