FORMULAIRESBalises de formulaireBalise       Type    Description                     Délimite un formulaire.              ...
Balise           Type   Description                        colonnes) ou bien le faire en CSS grâce aux propriétés width et...
Formulaires de rechercheLes champs de recherche sont assez différents des champs de texte classique, dun point de vue d el...
Les attributs min max et step peuvent être utilisés pour définir les limites à ne pas dépasser. A noter quil nya pas de mo...
Chaque navigateur est libre de décider de lapparence que prendront ses indicateurs. Ils seront donc parconséquent différen...
Placeholder attributCet attribut permet d’insérer dans votre champ un exemple de texte à saisir qui a la propriété de disp...
Prochain SlideShare
Chargement dans…5
×

Formulaires

1 082 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 082
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formulaires

  1. 1. FORMULAIRESBalises de formulaireBalise Type Description Délimite un formulaire. Vous devrez généralement donner 2 attributs à la balise <form> • method : indique la méthode denvoi du formulaire (get ou post). Si vous ne<form> Block savez pas quoi utiliser, mettez post. • action : la page vers laquelle le visiteur doit être redirigé lorsquil a validé votre formulaire. Permet de regrouper plusieurs éléments dun formulaire. On lutilise généralement dans de grands formulaires.<fieldset> Block Pour donner un titre à votre groupe, utilisez la balise <legend> Titre dun groupe dans un formulaire.<legend> Inline A utiliser à lintérieur dun <fieldset> Titre dun élément de formulaire.<label> Inline Généralement, vous devrez mettre lattribut for sur cette balise pour indiquer lID de lélément auquel correspond le label. Champ de formulaire. Il existe de nombreux types de champs différents. Vous choisissez le type de champ que vous désirez grâce à lattribut type : Code : HTML 1 <!-- Zone de texte dune ligne --> 2 <input type="text" /> 3 <!-- Mot de passe (le texte est caché) --> 4 <input type="password" /> 5 <!-- Envoi de fichier --> 6 <input type="file" /> 7 <!-- Case à cocher --><input /> Inline 8 <input type="checkbox" /> 9 <!-- Bouton doption --> 10 <input type="radio" /> 11 <!-- Bouton --> 12 <input type="button" /> 13 <!-- Bouton denvoi --> 14 <input type="submit" /> 15 <!-- Bouton de remise à zéro --> 16 <input type="reset" /> 17 <!-- Champ caché --> 18 <input type="hidden" /><textarea> Inline Zone de saisie multiligne. Vous pouvez définir sa taille grâce aux attributs rows et cols (nombre de lignes et
  2. 2. Balise Type Description colonnes) ou bien le faire en CSS grâce aux propriétés width et height. Liste déroulante. Utilisez la balise <option> pour créer chaque élément de la liste : Code : HTML 1 <select name="pays"><select> Inline 2 <option value="france">France</option> 3 <option value="espagne">Espagne</option> 4 <option value="italie">Italie</option> 5 </select><option> Block Element dune liste déroulante Groupe déléments dune liste déroulante.<optgroup> Block A utiliser dans le cas dune grande liste déroulante. Vous devez utiliser lattribut label pour donner un nom au groupe. • GET pour des transferts de données assez faibles (256 caractères maxi) et POST pour la normale et de plus obligatoire pour le type "Mailto") • ENCTYPE est lattribut de codification en méthode POST, mais peu utilisé, sauf pour le "Mailto" avec enctype="text/plain" qui permet une présentation lisible du mail reçu.method="post" Indique que les données saisies doivent être passés "silencieusement" : pas dans la barredadresse Permet de faire passer facilement des données complexes (long textes ou texte avec descaractères spéciaux par exemple) dune page à une autre method="get" Indique que les donnêes saisiesdoivent être passés dans la barre dadresse Attention à la longueur des variables passée ainsi qu caractèresspéciaux Balises HTML5HTML5 vient enreichir ces formulaires pour les rendre plus complets, intuitifs et sécurisés. La principalenouveauté des formulaires dits « 2.0 » consiste à un ensemble de nouveuax types pour nos champs input.La plupart du temps, nous utilisons dans lattribut type les valeurs text et password.Nous pouvons désormais utiliser entre autres : • search • tel • email • url • date • number • range • color
  3. 3. Formulaires de rechercheLes champs de recherche sont assez différents des champs de texte classique, dun point de vue d eleurcomportement et de leur apparence. Les systèmes dexploitation et certains logiciels comme les navigateursutilisent des champs de recherche personnalisés. Par exemple, effacer le champ du contenu en cliquant surune petite croix. Ces champs ont la plupart du temps une icône particulière comme une loupe ou le logodun moteur de recherche. Ces styles et comportements sont familiers pour les utilisatisateurs et sont trèsintuitifs. Il est donc tout à fait pertinent de les utiliser dans le cadre dun site web. En utilisant le type searchsur un champ, vous améliorerez en plus laccessibilité de votre site, car les logiciels dassistance bontproposer des raccourcis vers ce champ.Pour réellement maîtriser le style de ce champ sur Safari et Chrome sur MacOs, il vous faut écrire cetterègle CSS :input[type= »search »]{-webkit-appareance:textfield ;}Les adresses mailLa valeur email permet dexiger que lutilisateur entre une adresse email. Plus besoin dappliquerdexpression rationnelle Javascript pour vérifier la validité dune adresse.De plus, vos utilisateurs équipés de smartphones vous seront très reconnaissants puisque le fait dutiliser untype email affiche un clavier virtuel adapté aux adresses email.Les numéros de téléphoneLa valeur tel permet de spécifier que lutilisateur doit entrer un numéro de téléphone. Encore une fois, leclavier virtuel des smartphones sadaptera en conséquence.Les URLIci encore le clavier des smartphones s’adaptera en conséquence pour saisir rapidement une URL simple.Le type dateSI vous avez besoin de demander une date à un utilisateur, certaines questions se posent. La date est-ellevalide syntaciquement ? La date existe-t-elle ? Dans quel format est-elle écrite ? LE type date vise àsimplifier la saisie de dates en proposant un sélecteur natif, disponible en plusieurs déclinaisons. Lenavigateur Opera est le plus en avance sur les formulaires HTML5 et propose déjà un ensemble très completde sélecteurs de dates.Il existe plusieurs déclinaisons du sélecteur de date, qui varie le type spécifié : • datetime pour le jour et lheure avec le décalage horaire • datetime-local pour le jour et lheure sans le décalage horaire • date pour sélectionner uniquement la date • time pour sélectionner uniquement lheure • week pour la semaine • month pour le mois
  4. 4. Les attributs min max et step peuvent être utilisés pour définir les limites à ne pas dépasser. A noter quil nya pas de moyen prévu pour styliser le sélecteur de date.Les types number et rangeJusqu’à présent, lorsquun utilisateur avait à saisir un nombre dans une page web, il devait obligatoirementle faire en utilisant le clavier. Pourtant les systèmes dexploitation intègrent nativement depuis longtempsdeux alternatives à la saisie au clavier : les sliders et les « champs avec des petits boutons à droite pouraugmenter ou réduire.Il est à présent possible dutiliser ces types dentrées dans une page HTML avec les types number et range.Vous pouvez spécifier quelles sont les valeurs minimales et maximales avec les attributs min et max, ainsique le pas avec lattribut step qui prennent tous les trois des valeurs numériques.Exemple pour un champ numérique allant de 0 à 100 par pas de 5 en partant de 50 :<input type= »numer » min= »0 » max= »100 » step= »5 » value= »50 »>Les nuanciers de couleursIl peut arriver que vous ayez à demander à un utilisateur de sélectionner une couleur de son choix. Dans cecas, le plus pratique est de lui fournir un nuancier afin quil visualise graphiquement lensemble descouleurs quil peut choisir. Il existe bien sûr des sélecteurs de couleur en Javascript, mais comme dhabitude,nous préférerons opter pour la solution native qui évite de charger beaucoup de Javascript et qui proposeun interface déjà connue de lutilisateur.Les suggestionsLa datalist est un nouvel élément qui est en quelque sorte un mélange entre une liste déroulante et unchamp texte libre. Lorsque lutilisateur sélectionne le champ, une liste de suggestions apparaît afin de luiproposer des entrées pertinentes.Les différents suggestions se déclarent avec des éléments option, comme pour les listes déroulanteshabituelles.Exemple :<input type= »text » list= »serie »><datalist id= »serie »> <option value= »Les Simpsons »> <option value = »South Park » <option value= »Futurama »></datalist>La validation des donnéesUn point essentiel des formulaires 2.0 est lapport de restrictions sur les valeurs entrées dans le champs. Sila validation finale des données doit toujours se faire côté serveur pour des raisons de sécurité, côté clientvous pouvez maintenant aider lutilisateur avec un minimum de code et une interface native. Ceci remplaceles kilomètres de Javascript que vous deviez taper pour chaque formulaire.Si lutilisateur entre des lettres dans un champ number ou tel par exemple, le navigateur va réagir pour leprévenir que les informations quil a entrées sont invalides. Il va également vérifier la validité de lensembledu formulaire juste avant lenvoi, afin de demander des corrections si elles sont nécessaires.
  5. 5. Chaque navigateur est libre de décider de lapparence que prendront ses indicateurs. Ils seront donc parconséquent différents sur chaque navigateur.Personnaliser les champs erronés et requisDe nouvelles pseudo-classes CSS permettent de personnaliser les champs. Par exemple:invalid et:requiredpermettent de les styliser lorsquils sont détectés invalides ou pour indiquer quils sont requis.Exemple :<form> <label for= »url »>URL</label> <input id= »url » type = »url » required /> <label for= »email »>Email</label> <input id= »email » type= »email » required /> <label for= »tel » type= »tel »>Téléphone</label> <input id= »tel » type= »tel » /> <input type= »submit »></form>CSS ::required {border:1px solid blue;}:invalid{background-color:#FDD}Désactiver la validation automatiqueSi vous souhaitez désactiver la vérification native du navigateur, utilisez lattribut novalidate de la baliseform.Rendre un champ obligatoireUtilisez lattribut required.Utiliser les expressions rationnelles pour la validationSi vous souhaitez effectuer des vérifications spécifiques (exemple présence dun tiret, ou limitation àcertains caractères) vous pouvez effectuer la validation de la structure de la chaîne de caractères avec uneexpression rationnelle (ou regex) et lutiliser dans lattribut patern.Pour en savoir plus sur les expressions rationnelles :http://fr.wikipedia.org/wiki/Expression_rationnellehttp://www.toutjavascript.com/savoir/savoir22_1.php3Exemple :<input type= »text » pattern= »[A-Z][a-z]+-[A-Z][a-z]+ »>
  6. 6. Placeholder attributCet attribut permet d’insérer dans votre champ un exemple de texte à saisir qui a la propriété de disparaîtreau focus. Ceci remplace l’utilisation de javascript pour réaliser cette opération…<form><input type="text" name="first-name" placeholder="John"/><br/><input type="text" name="last-name" placeholder="Doe"/><br/><input type="submit" name="submit" value="Save"/></form>Autofocuscet attribut permet de sélectionner un champ en particulier au chargement de la page<form><input type="text" name="first-name" placeholder="John"/><br/><input type="text" name="last-name" autofocus/><br/></form>

×