formulaires

FORMULAIRES

Balises de formulaire

Balise Type Description

<form> Block

Délimite un formulaire.Vous devrez généralement donner 2 attributs à la balise <form>

• method : indique la méthode d'envoi du formulaire (get ou post). Si vous ne savez pas quoi utiliser, mettez post.

• action : la page vers laquelle le visiteur doit être redirigé lorsqu'il a validé votre formulaire.

<fieldset> Block

Permet de regrouper plusieurs éléments d'un formulaire.On l'utilise généralement dans de grands formulaires.

Pour donner un titre à votre groupe, utilisez la balise <legend>

<legend> Inline Titre d'un groupe dans un formulaire.A utiliser à l'intérieur d'un <fieldset>

<label> InlineTitre d'un élément de formulaire.Généralement, vous devrez mettre l'attribut for sur cette balise pour indiquer l'ID de l'élément auquel correspond le label.

<input /> Inline

Champ de formulaire.Il existe de nombreux types de champs différents. Vous choisissez le type de champ que vous désirez grâce à l'attribut type :

Code : HTML 1 2 3 4 5 6 7 8 9101112131415161718

<input type="text" /><input type="password" /><input type="file" /><input type="checkbox" /><input type="radio" /><input type="button" /><input type="submit" /><input type="reset" /><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

Balise Type Descriptioncolonnes) ou bien le faire en CSS grâce aux propriétés width et height.

<select> Inline

Liste déroulante.Utilisez la balise <option> pour créer chaque élément de la liste :

Code : HTML 12345

<select name="pays"> <option value="france">France</option> <option value="espagne">Espagne</option> <option value="italie">Italie</option></select>

<option> Block Element d'une liste déroulante

<optgroup> BlockGroupe d'éléments d'une liste déroulante.A utiliser dans le cas d'une grande liste déroulante.Vous devez utiliser l'attribut 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 l'attribut 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 barre d'adresse Permet de faire passer facilement des données complexes (long textes ou texte avec des caractères spéciaux par exemple) d'une page à une autre method="get" Indique que les donnêes saisies doivent être passés dans la barre d'adresse Attention à la longueur des variables passée ainsi qu' caractères spéciaux

Balises HTML5

HTML5 vient enreichir ces formulaires pour les rendre plus complets, intuitifs et sécurisés. La principale nouveauté des formulaires dits « 2.0 » consiste à un ensemble de nouveuax types pour nos champs input. La plupart du temps, nous utilisons dans l'attribut type les valeurs text et password.

Nous pouvons désormais utiliser entre autres :

• search

• tel

• email

• url

• date

• number

• range

• color

Formulaires de recherche

Les champs de recherche sont assez différents des champs de texte classique, d'un point de vue d eleur comportement et de leur apparence. Les systèmes d'exploitation et certains logiciels comme les navigateurs utilisent des champs de recherche personnalisés. Par exemple, effacer le champ du contenu en cliquant sur une petite croix. Ces champs ont la plupart du temps une icône particulière comme une loupe ou le logo d'un moteur de recherche. Ces styles et comportements sont familiers pour les utilisatisateurs et sont très intuitifs. Il est donc tout à fait pertinent de les utiliser dans le cadre d'un site web. En utilisant le type search sur un champ, vous améliorerez en plus l'accessibilité de votre site, car les logiciels d'assistance bont proposer 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 cette règle CSS :

input[type= »search »]{

-webkit-appareance:textfield ;

}

Les adresses mail

La valeur email permet d'exiger que l'utilisateur entre une adresse email. Plus besoin d'appliquer d'expression rationnelle Javascript pour vérifier la validité d'une adresse.

De plus, vos utilisateurs équipés de smartphones vous seront très reconnaissants puisque le fait d'utiliser un type email affiche un clavier virtuel adapté aux adresses email.

Les numéros de téléphone

La valeur tel permet de spécifier que l'utilisateur doit entrer un numéro de téléphone. Encore une fois, le clavier virtuel des smartphones s'adaptera en conséquence.

Les URL

Ici encore le clavier des smartphones s’adaptera en conséquence pour saisir rapidement une URL simple.

Le type date

SI vous avez besoin de demander une date à un utilisateur, certaines questions se posent. La date est-elle valide 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. Le navigateur Opera est le plus en avance sur les formulaires HTML5 et propose déjà un ensemble très complet de 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 l'heure avec le décalage horaire

• datetime-local pour le jour et l'heure sans le décalage horaire

• date pour sélectionner uniquement la date

• time pour sélectionner uniquement l'heure

• week pour la semaine

• month pour le mois

Les attributs min max et step peuvent être utilisés pour définir les limites à ne pas dépasser. A noter qu'il n'y a pas de moyen prévu pour styliser le sélecteur de date.

Les types number et range

Jusqu’à présent, lorsqu'un utilisateur avait à saisir un nombre dans une page web, il devait obligatoirement le faire en utilisant le clavier. Pourtant les systèmes d'exploitation intègrent nativement depuis longtemps deux alternatives à la saisie au clavier : les sliders et les « champs avec des petits boutons à droite pour augmenter ou réduire.

Il est à présent possible d'utiliser ces types d'entré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, ainsi que le pas avec l'attribut 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 couleurs

Il peut arriver que vous ayez à demander à un utilisateur de sélectionner une couleur de son choix. Dans ce cas, le plus pratique est de lui fournir un nuancier afin qu'il visualise graphiquement l'ensemble des couleurs qu'il peut choisir. Il existe bien sûr des sélecteurs de couleur en Javascript, mais comme d'habitude, nous préférerons opter pour la solution native qui évite de charger beaucoup de Javascript et qui propose un interface déjà connue de l'utilisateur.

Les suggestions

La datalist est un nouvel élément qui est en quelque sorte un mélange entre une liste déroulante et un champ texte libre. Lorsque l'utilisateur sélectionne le champ, une liste de suggestions apparaît afin de lui proposer des entrées pertinentes.

Les différents suggestions se déclarent avec des éléments option, comme pour les listes déroulantes habituelles.

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

Un point essentiel des formulaires 2.0 est l'apport de restrictions sur les valeurs entrées dans le champs. Si la validation finale des données doit toujours se faire côté serveur pour des raisons de sécurité, côté client vous pouvez maintenant aider l'utilisateur avec un minimum de code et une interface native. Ceci remplace les kilomètres de Javascript que vous deviez taper pour chaque formulaire.

Si l'utilisateur entre des lettres dans un champ number ou tel par exemple, le navigateur va réagir pour le prévenir que les informations qu'il a entrées sont invalides. Il va également vérifier la validité de l'ensemble du formulaire juste avant l'envoi, afin de demander des corrections si elles sont nécessaires.

Chaque navigateur est libre de décider de l'apparence que prendront ses indicateurs. Ils seront donc par conséquent différents sur chaque navigateur.

Personnaliser les champs erronés et requis

De nouvelles pseudo-classes CSS permettent de personnaliser les champs. Par exemple:invalid et:required permettent de les styliser lorsqu'ils sont détectés invalides ou pour indiquer qu'ils 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 automatique

Si vous souhaitez désactiver la vérification native du navigateur, utilisez l'attribut novalidate de la balise form.

Rendre un champ obligatoire

Utilisez l'attribut required.

Utiliser les expressions rationnelles pour la validation

Si vous souhaitez effectuer des vérifications spécifiques (exemple présence d'un tiret, ou limitation à certains caractères) vous pouvez effectuer la validation de la structure de la chaîne de caractères avec une expression rationnelle (ou regex) et l'utiliser dans l'attribut patern.

Pour en savoir plus sur les expressions rationnelles :

http://fr.wikipedia.org/wiki/Expression_rationnelle

http://www.toutjavascript.com/savoir/savoir22_1.php3

Exemple :

<input type= »text » pattern= »[A-Z][a-z]+-[A-Z][a-z]+ »>

http://fr.wikipedia.org/wiki/Expression_rationnelle

http://www.toutjavascript.com/savoir/savoir22_1.php3

Placeholder attribut

Cet attribut permet d’insérer dans votre champ un exemple de texte à saisir qui a la propriété de disparaître au 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>

formulaires

Documents