Le HTML5 et les CSS3 pour les formulaires

1. L’affichage des nouveaux champs

Comme très souvent, la spécification du HTML5 ne précise pas comment doivent être affichés les éléments des formulaires. Chaque navigateur utilisera ses propres éléments d’interface. Il y aura donc de fortes différences entre un navigateur d’ordinateur, ceux des smartphones et ceux des tablettes.

Souvenez-vous que par défaut les champs de saisie sont de type <input type="text">, ce qui veut dire que si un navigateur ne reconnaît pas un nouveau type de champ, il l’affichera comme un champ de texte « classique ».

2. Le champ pour les e-mails

Le nouveau champ de saisie de type email permet de spécifier que le contenu doit être une adresse e-mail, c’est-à-dire qu’il doit y avoir le caractère @. C’est aux navigateurs de tester nativement la présence ou non de l’arobase et d’afficher éventuellement un message d’erreur.

La syntaxe : <input type="email">

Un autre intérêt indéniable est l’utilisation avec un smartphone qui reconnaît ce type de champ : le clavier va automatiquement s’adapter à la saisie d’une adresse e-mail.

Voilà le message d’erreur avec Google Chrome :

3. Le champ pour les numéros de téléphone

Le type de champ de saisie tel est fait pour saisir des numéros de téléphone.

La syntaxe : <input type="tel">

Il n’y a aucune contrainte de saisie, les numéros de téléphone étant trop variés dans...

1. La validation côté client

Avec le HTML5, nous pouvons effectuer des validations de saisie dans le navigateur, côté client. Cela ne vous empêche en rien de valider les formulaires côté serveur, pour des raisons de sécurité et d’efficacité. La validation native côté client va permettre aux designers web de ne pas avoir à saisir du JavaScript.

Notez bien que chaque navigateur est totalement libre de l’affichage utilisé quand une erreur de saisie est repérée.

2. Rendre un champ obligatoire

Pour rendre un champ de saisie obligatoire, il faut utiliser l’attribut booléen required. Le navigateur n’enverra pas le formulaire si ce champ obligatoire n’est pas saisi.

<input type="text" id="nom" required="required"> 

Ou en syntaxe courte :

<input type="text" id="nom" required> 

Voilà un exemple d’un champ de saisie obligatoire :

<form id="inscription" method="#" action="#"> 
    <p><label for="nom">Votre nom : </label> 
    <input type="text" id="nom" required /></p> 
    <p><input type="submit" /></p> 
</form> 

Voilà le message d’alerte affiché avec...

1. Des lettres autorisées

Voilà la syntaxe pour indiquer que l’utilisateur ne devra saisir qu’une seule lettre : a ou g ou r et en minuscule : [agr]. Toute autre saisie ne sera pas valide.

La syntaxe :

<input type="text" id="test" pattern="[arg]" /> 

Exemples de saisies non valides :

A est en majuscule :

Il y a deux caractères :

2. Un intervalle de lettres autorisées

Voilà la syntaxe pour indiquer un intervalle de lettres autorisées : [G-M]. L’utilisateur pourra saisir une lettre en majuscule comprise entre G et M inclus.

Exemples de saisies non valides :

k est en minuscule :

B n’est pas dans l’intervalle :

3. Des lettres autres que

Voilà la syntaxe pour indiquer toutes les lettres autorisées, sauf celles spécifiées : [^abc]. L’utilisateur pourra saisir tous les caractères...

1. L’aide à la saisie

L’attribut placeholder permet d’afficher une saisie en exemple dans un champ de texte pour aider les utilisateurs. Ainsi, ces derniers voient un exemple de la saisie à effectuer. Dès que l’utilisateur clique dans le champ, la saisie d’exemple n’est plus affichée.

Voilà la syntaxe à utiliser, en repartant de l’exemple précédent :

<input type="text" pattern="[0-9]{3}-[A-Z]{3}" 
placeholder="111-AAA" id="pw"> 

Voilà l’affichage quand l’utilisateur n’est pas dans le champ :

Voilà l’affichage quand l’utilisateur clique dans le champ :

2. Activer un champ

Vous pouvez faire clignoter le point d’insertion dans un champ donné : utilisez l’attribut booléen autofocus.

Voici un exemple d’utilisation de cet attribut avec une syntaxe courte :

<label for="nom">Votre nom : </label> 
<input type="text" id="nom" autofocus /> 

À l’affichage de la page, le point d’insertion clignote bien dans le champ choisi :

Vous ne devez utiliser qu’un seul autofocus par page.

Utiliser cette fonctionnalité avec « parcimonie » : certains internautes la « détestent » car ils se sentent...

1. Les objectifs des pseudo-classes

Les CSS3 nous proposent des nouveautés très intéressantes avec les pseudo-classes dédiées aux objets de formulaire. Vous pouvez maintenant mettre en évidence les objets d’un formulaire qui sont actifs, désactivés et cochés. Ainsi, l’utilisateur sait ce qu’il a fait et ce qui est actif ou inactif.

Voici ces nouvelles pseudo-classes : :enabled, :disabled et :checked.

2. Le formulaire et les styles

Voici l’exemple d’un formulaire avec deux champs de saisie : le premier pour saisir le nom est utilisable (enabled), le deuxième pour saisir l’âge n’est pas utilisable (disabled).

Le formulaire contient aussi deux boutons radio pour choisir le sexe (Homme ou Femme), ainsi qu’une case à cocher.

L’objectif est de mettre en évidence les objets du formulaire en fonction de leur état : utilisable, non utilisable et coché.

Voilà le code HTML du formulaire :

<form id="form1" method="#" action="#"> 
<p> 
    <label for="nom">Votre nom : </label> 
    <input type="text" id="nom" /> 
</p> 
<p> 
    <label for="age">Votre âge : </label> 
    <input type="text"...

1. Objectif

Nous avons vu en début de chapitre, dans la section La validation des formulaires, comment, par exemple, rendre obligatoire une saisie avec l’attribut required et la réponse par défaut des navigateurs. Nous allons maintenant apprendre à mettre en forme avec les CSS3 la validation des formulaires.

2. Le formulaire

Nous allons créer un formulaire comportant trois champs et un bouton d’envoi.

Voilà le code HTML du formulaire :

<form id="inscription" method="#" action="#"> 
    <p> 
        <label for="nom">Votre nom : </label> 
        <input type="text" id="nom" required /> 
    </p> 
    <p> 
        <label for="email">Votre eMail : </label> 
        <input type="email" id="email" required /> 
    </p> 
    <p> 
        <label for="age">Votre âge : </label> 
        <input type="text" id="age" pattern="\d{2}" /> 
    </p> 
    <p> 
        <input type="submit" id="envoi" value="Envoyer" /> 
    </p> 
</form> 

Les deux premiers champs sont obligatoires (required) et le dernier comporte une validation avec une expression régulière. Un simple et unique bouton d’envoi est utilisé.

3. La mise en forme du formulaire

Voici les styles pour la mise en forme simple des objets du formulaire.

Input { 
    border: solid 1px gray; 
    width: 200px; 
} 
label, input{ 
    display: inline-block; 
} 
label { 
    width: 100px; 
    text-align: right; 
    margin-right: 10px; 
} 
input[type=submit]{ 
    width: 75px; 
    background: none; 
} 

Voilà le rendu dans Opera :

4. Les champs non valides

Nous avons un champ de type email et un champ avec...

1. L’objectif

Nous allons voir la création d’un premier exemple simple d’un formulaire en HTML5/CSS3 disponible à cette URL : http://line25.com/tutorials/create-a-stylish-contact-form-with-html5-css3

Voilà le résultat final :

2. La structure du formulaire

Le formulaire est inséré dans une boîte <div id="content"> pour la mise en forme. Les quatre objets du formulaire sont insérés dans un élément <fieldset>.

Les deux premiers champs sont des éléments <input> de type text et email. Ils ont tous les deux l’attribut placeholder pour avoir un exemple de saisie initial dans le champ de saisie.

Le champ de saisie multiligne est un élément <textarea> avec l’attribut placeholder.

Le bouton d’envoi du formulaire est classique.

Voilà le code du formulaire :

<div id="contact"> 
    <h1>Send an email</h1> 
    <form action="#" method="post"> 
        <fieldset> 
            <label for="name">Name:</label> 
            <input type="text" id="name" placeholder="Enter 
your full name" /> 
            <label for="email">Email:</label> 
            <input type="email" id="email" placeholder="Enter 
your email address" /> 
            <label for="message">Message:</label> 
            <textarea id="message" placeholder="What's on your 
mind?"></textarea> 
            <input...

1. L’objectif

Voici un autre exemple d’un formulaire très sobre, utilisant pleinement le HTML5 et les CSS3. Ce formulaire a été créé par l’équipe Red Team Design : https://catalin.red/slick-login-form-with-html5-css3

Voilà l’affichage final :

2. La structure initiale du formulaire

Le formulaire est très classique. Notez l’utilisation des attributs placeholder, autofocus et required.

<form id="login"> 
    <h1>Log In</h1> 
    <fieldset id="inputs"> 
        <input id="username" type="text" 
placeholder="Username" autofocus required> 
        <input id="password" type="password" 
placeholder="Password" required> 
    </fieldset> 
    <fieldset id="actions"> 
        <input type="submit" id="submit" value="Log in"> 
        <a href="">Forgot your password?</a><a 
href="">Register</a> 
    </fieldset> 
</form> 

Voilà l’affichage brut :

3. L’ombre portée du formulaire

Sur le sélecteur d’identification du formulaire, une ombre portée est appliquée à l’aide de six ombres :

#login { 
    position: absolute; 
    height: 240px; 
    width: 400px; 
    padding: 30px; 
    -moz-box-shadow: 
        0 0 2px rgba(0, 0, 0, 0.2), 
        0 1px 1px rgba(0, 0, 0, .2), 
        0 3px 0 #fff, 
        0 4px 0 rgba(0, 0, 0, .2), 
        0 6px 0 #fff, 
        0 7px 0 rgba(0, 0, 0, .2); 
    -webkit-box-shadow: 
        0 0 2px rgba(0, 0, 0, 0.2), 
        0 1px 1px rgba(0, 0, 0, .2), 
        0 3px 0 #fff, 
        0 4px 0 rgba(0, 0, 0, .2), 
        0 6px 0 #fff, 
       ...

1. L’objectif

Nous allons détailler la réalisation d’un formulaire en CSS3 créé par bbxdesign : http://bbxdesign.com/2010/03/24/tutoriel-formulaire-css3-sans-image-sans-javascript/

Voici l’affichage du formulaire :

En cliquant sur le lien Afficher + d’options :

Quand vous renseignez le formulaire et que vous cliquez sur le bouton ENVOYER, un message de confirmation apparaît.

2. La structure initiale du formulaire

La structure reste très classique pour les deux champs Nom et Mot de passe :

<form id="start" action="/"> 
    <h1>Inscription &agrave; CSS3</h1> 
    <p> 
        <label for="name">Nom</label> 
        <input id="name" type="text" /> 
    </p> 
    <p> 
        <label for="password">Mot de passe</label> 
        <input id="password" type="password" /> 
    </p> 
</form> 

3. Les options supplémentaires

Les options supplémentaires, Code Postal, Ville et Pays, sont placées dans un boîte <div id="options"> pour pouvoir gérer l’interactivité, juste après les champs précédents.

C’est dans cette boîte <div> que nous trouvons le lien Afficher + d’options, dans un paragraphe <p> utilisant une classe nommée show. Nous trouvons aussi le lien Masquer les options dans un paragraphe <p> utilisant une classe nommée hide.

<div id="options"> 
    <p class="show"> 
        <a href="#options">Afficher + d'options</a> 
    </p> 
    <p class="hide"> 
        <a href="#start">Masquer les options</a> 
    </p> 
    <p> 
        <label for="zipcode">Code Postal</label> 
        <input id="zipcode" type="text" /> 
    </p> 
    <p> ...

1. L’objectif

Nous allons détailler la création d’un formulaire en HTML5/CSS3 créé par Inayaili de León sur le site : http://24ways.org/2009/have-a-field-day-with-html5-forms/

Voilà le résultat final :

2. La structure du formulaire

Dans ce formulaire, il y a trois grandes parties : Your details, Delivery address et Card details. Pour bien commencer sur une structure logique et sémantique, nous allons utiliser les éléments <fieldset> et <legend> pour chacune de ces parties.

<!DOCTYPE HTML> 
<html lang="fr"> 
<head> 
    <title>Formulaire d'Inayaili de León</title> 
    <meta charset="UTF-8" /> 
</head> 
<body> 
<form id=payment method=# action="#> 
    <fieldset> 
        <legend>Your details</legend> 
    </fieldset> 
    <fieldset> 
        <legend>Delivery address</legend> 
    </fieldset> 
    <fieldset> 
        <legend>Card details</legend> 
    </fieldset> 
    <fieldset> 
        <button type=submit>Buy it!</button> 
    </fieldset> 
</form> 
</body> 
</html> 

Vous remarquerez que la conceptrice a choisi d’utiliser une notation sans guillemets pour les valeurs des attributs.

3. Les objets HTML5

Le HTML5 nous permet d’utiliser de nouveaux attributs pour les champs de texte, pour avoir un contenu donné : email, number, tel.

De plus, nous utilisons les nouveaux attributs pour placer le point d’insertion dans le premier champ (autofocus), pour indiquer un exemple de saisie valide (placeholder) et pour avoir des champs obligatoires (required).

La conceptrice a placé tous les objets du formulaire dans des <ol> et <li>. Cela peut être effectivement une bonne idée, un formulaire est bien constitué d’une liste d’objets.

Voici le code HTML de la partie Your details.

<fieldset> 
    <legend>Your details</legend> ...

1. L’objectif

Pour vos formulaires, vous aurez peut-être besoin d’avoir des boutons avec des symboles ou des pictogrammes. Nous allons voir comment en créer très facilement avec les pseudo-classes :before et :after. Ces exemples sont adaptés de ce site : http://www.paulund.co.uk/css-buttons-with-icons-but-no-images

2. Le formulaire

Nous allons créer un formulaire très classique avec deux boutons, l’un pour valider le formulaire, l’autre pour l’annuler. Cependant, nous n’allons pas utiliser des boutons, mais des liens. En effet, la technique utilisée, les pseudo-éléments, ne s’applique pas aux boutons.

Voici le formulaire initial :

<form id="inscription" method="#" action="#"> 
    <p> 
        <label for="nom">Votre nom : </label> 
        <input type="nom" name="nom" id="nom" /> 
    </p> 
    <p> 
        <label for="prenom">Votre prénom : </label> 
        <input type="prenom" name="prenom" id="prenom" /> 
    </p> 
    <p> 
        <a href="#">Validez<a/>...

1. L’objectif

Les CSS3 nous permettent de réelles avancées dans la création des boutons, ce qui fait que nous n’avons absolument plus besoin de créer des boutons avec des logiciels de dessin. Les boutons en image n’ont que des inconvénients : ils augmentent fortement le poids des fichiers, les mises à jour du design sont plus longues, c’est un frein au référencement naturel et à l’accessibilité.

Pour pouvoir créer rapidement des boutons au design actuel, le Web regorge de générateurs en ligne. Je vous en propose quelques-uns.

2. CSS3 Button

Ce site (http://css3button.net/) vous propose une interface agréable où vous pouvez travailler :

L’aperçu se met à jour. Vous récupérez ensuite le code dans la zone CSS CODE.

3. CSS3 Button Generator

Ce site (https://css3buttongenerator.com/) propose une interface avec des accordéons pour choisir les propriétés CSS à travailler :