Mettez vos formulaires à jour avec la validation CSS3 et HTML5

Voyons comment créer un formulaire fonctionnel qui valide les données des utilisateurs, côté client. Ceci étant fait, nous allons couvrir les détails en utilisant CSS, y compris certains CSS3.!

Avant de commencer, vous voudrez peut-être envisager l’utilisation de l’un de nos modèles HTML5 ou thèmes CSS pour votre prochain projet, c’est-à-dire si vous avez besoin d’une solution rapide et professionnelle. Ou vous pourriez obtenir l'aide d'un expert sur Envato Studio.

Sinon, il est temps de commencer ce tutoriel étape par étape.

Étape 1: Fonctionnalité de la conceptualisation

Premièrement, nous voulons conceptualiser à quoi ressemblera notre formulaire et comment il fonctionnera. Pour cet exemple, créons un formulaire de contact simple qui demande les informations suivantes à l'utilisateur:

• prénom
• Email
• Site Internet
• Message

Nous voulons nous assurer que l'utilisateur entre les informations correctement. Pour ce faire, nous utiliserons les nouvelles techniques de validation côté client de HTML5. Qu'en est-il des utilisateurs qui n'ont pas de capacités HTML5? Vous pouvez simplement utiliser la validation côté serveur, mais cela sort du cadre de cet article..

Étape 2: Formulaire de conceptualisation

Nous allons avoir une idée de ce que nous voulons que notre formulaire ressemble en créant un rugueux maquette.

Comme vous pouvez le constater, les éléments suivants constituent notre formulaire:

• Titre du formulaire Notification des champs obligatoires
• Étiquettes de formulaire
• Entrées de formulaire Texte fictif
• Conseils sur les champs de formulaire
• Bouton de soumission

Maintenant que nous avons spécifié quels éléments composent notre formulaire, nous pouvons créer le balisage HTML..

Étape 3: Code de démarrage HTML

Créons notre balisage HTML de base à partir du concept de formulaire que nous avons créé.

Jusque-là, notre fichier HTML sera toujours vide dans le navigateur. C'est simplement du code de démarrage pour une page HTML5.

Étape 4: formulaire HTML

Créons le formulaire HTML (nous laisserons la méthode d'action vide pour l'instant car la validation côté serveur ne sera pas traitée dans ce tutoriel):

Étape 5: Éléments de formulaire HTML

Pour que notre contenu de formulaire reste organisé et structuré, nous allons envelopper nos éléments de formulaire (étiquette, contribution, etc) dans une liste. Commençons donc par créer l'en-tête de formulaire et notre premier élément d'entrée:

 
 
Contactez nous
 * Indique un champ obligatoire 
 
 Prénom:  
 

Conseils de formulaire

Comme nous le voyons dans notre maquette, nous allons avoir des astuces de formatage pour les champs "email" et "site web". Nous allons donc ajouter nos astuces sous le contribution champs si nécessaire, et leur donner une classe afin que nous puissions les dénommer plus tard.

 Email:  Format correct "nom@quelque chose.com" 

Le reste Contribution Éléments

Continuons et créons nos éléments de formulaire restants, en nous rappelant d'envelopper chaque section dans un élément de liste.

 Site Internet:  Format approprié "http://someaddress.com" 
 
 Message:  </li> <li> <button type="submit">Soumettre le formulaire</button> </li></pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_4.png">  <h2>Étape 6: Ajout de l'attribut d'espace réservé </h2> <p>L'une des premières améliorations apportées par HTML5 aux formulaires Web (que vous connaissez sans doute déjà) est la possibilité de définir le texte de substitution. Le texte d'espace réservé est affiché lorsque le champ de saisie est vide ou n'est pas centré.</p> <p>Ajoutons l'attribut de marque de réservation à notre <code>contribution</code> éléments. Cela aidera l’utilisateur à comprendre ce qu’il doit entrer dans chaque champ..</p> <pre><input type="text" name="name" placeholder="John Doe" /> <input type="text" name="email" placeholder="john_doe@example.com" /> <input type="text" name="website" placeholder="http://johndoe.com/" required/></pre> <h3>Conseil rapide: style votre <code>espace réservé</code> Texte</h3> <p>Voici une astuce: si vous souhaitez styler votre texte de substitution, il existe quelques préfixes de navigateur pour vous aider:</p> <pre>: -moz-placeholder couleur: bleu;  :: - webkit-input-placeholder color: blue; </pre> <p>La prise en charge de l'attribut de marque de réservation est assez bien établie dans les navigateurs modernes (sauf IE9, désolé). Si vous avez vraiment besoin de le faire supporter par tous les navigateurs, voici quelques solutions javascript que vous pouvez explorer..</p> <h2>Étape 7: CSS de base</h2> <p>Ajoutons quelques CSS de base pour structurer notre formulaire. Je vais vous guider à travers les règles:</p> <h3>Retirer <code>:concentrer</code> Style</h3> <p>Webkit ajoute automatiquement du style aux éléments d'entrée lorsqu'ils sont actifs. Puisque nous allons ajouter nos propres styles, nous voulons remplacer ces valeurs par défaut:</p> <pre>*: focus contour: none;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_5.png">  <h3>Styles Typographiques</h3> <p>Ajoutons quelques styles typographiques à nos éléments de formulaire:</p> <pre>body font: 14px / 21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans empattement; .contact_form h2, .contact_form label font-family: Géorgie, Times, "Times New Roman", serif; .form_hint, .required_notification taille de la police: 11px;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_6.png">  <h3>Styles de liste</h3> <p>Appelons nos éléments de liste pour structurer notre formulaire:</p> <pre>.contact_form ul width: 750px; type de style de liste: aucun; list-style-position: à l'extérieur; marge: 0px; remplissage: 0px;  .contact_form li padding: 12px; border-bottom: 1px solid #eee; position: relative; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_7.png">  <p>Ajoutons également une légère bordure aux sections supérieure et inférieure du formulaire. Nous pouvons accomplir cela en utilisant le <code>:premier enfant</code> et <code>:dernier enfant</code> sélecteurs. Ceux-ci sélectionnent, comme les noms l’impliquent, les premier et dernier éléments de la <code><ul></code> liste.</p> <p>Cela ajoute quelques sections visuelles utiles à notre formulaire. Gardez à l'esprit que ces sélecteurs CSS ne sont pas pris en charge par les anciens navigateurs. Comme cela n’est pas vital pour les fonctionnalités clés, nous récompensons ceux qui utilisent les navigateurs actuels..</p> <pre>.contact_form li: premier-enfant, .contact_form li: dernier-enfant border-bottom: 1px solide # 777; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_8.png">  <h3>En-tête de formulaire</h3> <p>Appelons la section d'en-tête de notre formulaire. Cela inclut la balise de titre et la notification qui informe les utilisateurs que l'astérisque (*) indique les champs obligatoires..</p> <pre>.contact_form h2 margin: 0; affichage: en ligne;  .required_notification color: # d45252; marge: 5px 0 0 0; affichage: en ligne; Flotter à droite; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_9.png">  <h3>Éléments de saisie de formulaire</h3> <p>Appelons tous les éléments de base de notre formulaire, ceux utilisés pour collecter les informations utilisateur.</p> <pre>.contact_form label width: 150px; marge supérieure: 3px; affichage: inline-block; float: gauche; rembourrage: 3px;  .contact_form input height: 20px; largeur: 220px; rembourrage: 5px 8px;  .contact_form textarea padding: 8px; width: 300px; .contact_form button marge-gauche: 156px;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_10.png">  <p>Ajoutons maintenant quelques styles CSS visuels supplémentaires. Certains d'entre eux sont des styles CSS3 qui récompensent les utilisateurs qui utilisent des navigateurs modernes.</p> <pre>.contact_form input, .contact_form textarea border: 1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius: 2px;  Entrée .contact_form: focus, .contact_form textarea: focus background: #fff; bordure: 1px solide # 555; box-shadow: 0 0 3px #aaa;  / * Style du bouton * / button.submit background-color: # 68b12f; arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# 68b12f) à (# 50911e)); arrière-plan: -webkit-linear-gradient (haut, n ° 68b12f, n ° 50911e); arrière-plan: -moz-linear-gradient (haut, # 68b12f, # 50911e); arrière-plan: -ms-linear-gradient (haut, # 68b12f, # 50911e); arrière-plan: -o-linear-gradient (haut, n ° 68b12f, n ° 50911e); arrière-plan: dégradé linéaire (haut, # 68b12f, # 50911e); bordure: solide 1px # 509111; border-bottom: 1px solide # 5b992b; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; box-shadow: encadré 0 1 pixels 0 0 # 9fd574; -webkit-box-shadow: 0 1px 0 0 # 9fd574 inset; -moz-box-shadow: 0 1px 0 0 # 9fd574 inset; -ms-box-shadow: 0 1px 0 0 # 9fd574 inset; -o-box-shadow: 0 1px 0 0 # 9fd574 inset; Couleur blanche; poids de police: gras; rembourrage: 6px 20px; text-align: center; text-shadow: 0 -1px 0 # 396715;  button.submit: survol opacité: 0,85; curseur: pointeur;  button.submit: actif border: 1px solid # 20911e; box-shadow: 0 0 10px 5px # 356b0b inset; -webkit-box-shadow: 0 0 10px 5px # 356b0b inset; -moz-box-shadow: 0 0 10px 5px # 356b0b inset; -ms-box-shadow: 0 0 10px 5px # 356b0b inset; -o-box-shadow: 0 0 10px 5px # 356b0b inset; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_11.png">  <h2>Étape 8: Ajoutez une certaine interactivité avec CSS3</h2> <p>Ajoutons un peu d'interactivité. Nous ferons développer le champ actuellement sélectionné en ajoutant du rembourrage.</p> <pre>.contact_form input: focus, .contact_form textarea: focus / * ajoute ceci au style déjà existant * / padding-right: 70px; </pre> <p>Maintenant, pour les navigateurs qui le prennent en charge, faisons en sorte que l’expansion du champ se fasse en douceur grâce à CSS3..</p> <pre>.contact_form input, .contact_form textarea / * ajoute ceci au style déjà existant * / -moz-transition: padding .25s; -webkit-transition: rembourrage .25s; -o-transition: rembourrage .25s; transition: rembourrage .25s; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_12.png">  <h2>Étape 9: le <code>Champs obligatoires</code> Attribut en HTML5</h2> <p>Le moment est venu de répondre à ce que nous attendions tous: les outils de gestion des formulaires de HTML5.</p> <p>Ajout du <code>Champs obligatoires</code> attribuer à n'importe quel élément input / textarea indiquera au navigateur qu'une valeur est requise avant que le formulaire puisse être soumis. Ainsi, un formulaire ne peut pas être soumis si un <code>Champs obligatoires</code> le champ n'a pas été rempli.</p> <p>Alors, allons-y et ajoutons le <code>Champs obligatoires</code> attribuer à tous nos éléments de formulaire (parce que nous voulons qu'ils soient tous remplis).</p> <pre><input type="text" name="name" required /> <input type="text" name="email" required /> <input type="text" name="website" required /> <textarea name="message" cols="40" rows="6" required >

Étape 10: style Champs obligatoires Des champs

Vous remarquerez probablement que visuellement, rien n’est arrivé en ajoutant le Champs obligatoires attribut. Nous allons styliser les champs obligatoires en utilisant CSS. Pour cet exemple, nous allons ajouter un astérisque rouge en tant qu'image d'arrière-plan dans chaque champ requis. Pour ce faire, nous voudrons d’abord ajouter du rembourrage à droite de notre entrée, là où sera l’image d’arrière-plan (cela évitera le chevauchement du texte si le champ est une longue chaîne):

.contact_form input, .contact_form textarea padding-right: 30px; 

Nous allons maintenant utiliser le pseudo sélecteur CSS :Champs obligatoires pour cibler tous les éléments de formulaire avec un attribut requis. J'ai créé une simple icône astérisque rouge de 16 x 16 pixels dans Photoshop qui servira d'indicateur visuel d'un champ requis..

input: required, textarea: required background: #fff url (images / red_asterisk.png) no-repeat 98% center; 

Qu'est-ce qui se passe lors de la soumission?

À l'heure actuelle, différents navigateurs font différentes choses lorsqu'un formulaire utilisant des éléments HTML5 est soumis. Lorsque le formulaire est soumis, la plupart des navigateurs l'empêcheront d'être envoyés et afficheront un "indice" pour l'utilisateur, en indiquant le premier champ requis, qui n'a aucune valeur. Le style visuel et la prise en charge de ces «champs de bulles» sont assez larges. Espérons que ces comportements seront standardisés à l'avenir.

Vous pouvez voir le support actuel du navigateur pour la Champs obligatoires attribut à quirksmode.

Conseil rapide:

Vous pouvez en fait attribuer un style au message bulle dans webkit à l'aide des éléments suivants:

:: - webkit-validation-bubble-message padding: 1em; 

Étape 11: Comprendre le nouveau HTML5 type Attributs et validation côté client

La validation HTML5 fonctionne selon le type attribut défini dans les champs du formulaire. Pendant des années, HTML n’a pris en charge que quelques attributs de type, tels que type = "text" mais avec HTML5, il y a plus d'une douzaine de nouveaux types d'entrée, y compris email et url que nous allons utiliser dans notre formulaire.

En combinant notre contribution type attributs avec le nouveau Champs obligatoires attribut, le navigateur peut maintenant valider les données du formulaire côté client. Si le navigateur d'un utilisateur ne supporte pas le nouveau type attributs, tels que type = "email", il sera tout simplement défaut à type = "text". C'est en fait assez incroyable. Vous avez essentiellement une compatibilité ascendante avec tous les navigateurs sur la Terre!

Et si le navigateur supporte réellement le nouveau type les attributs? Pour les navigateurs de bureau, il n'y a pas de différence visuelle (à moins que cela ne soit spécifié par les règles CSS personnalisées). UNE type = "text" le terrain ressemble à un type = "email" champ. Cependant, pour les navigateurs mobiles, il y a une différence en ce qui concerne l'interface utilisateur.

Un exemple: l'iPhone

L'iPhone d'Apple détecte les types de formulaire et modifie de manière dynamique le clavier à l'écran en fournissant des caractères contextuels. Par exemple, toutes les adresses électroniques nécessitent les symboles suivants: "@" et "." Donc, l'iPhone fournit ces caractères lorsque le type d'entrée est spécifié pour envoyer un courrier électronique.

Étape 12: Changer le type Les attributs

Nous avons déjà nos champs de formulaire mis à la valeur par défaut type = "text". Mais maintenant, nous voulons changer l'attribut type de nos champs d'email et de site Web en leur type HTML5 correspondant..

Étape 13: Validation HTML5

Comme mentionné précédemment, la validation HTML5 est basée sur votre type attributs et il est activé par défaut. Aucune validation spécifique n'est requise pour activer la validation du formulaire. Si vous souhaitez l'éteindre, vous pouvez utiliser le novalidate attribuer comme ceci:

 <-- do not validate this form -->  

Nom du champ

Regardons notre premier champ qui demande à l'utilisateur son nom. Comme décrit précédemment, nous avons ajouté le type = "text" attribut et le Champs obligatoires attribut. Ceci informe le navigateur Web que ce champ est obligatoire et qu'il doit valider le champ en tant que texte. Donc, tant que l'utilisateur entre au moins un caractère dans ce champ, il validera.

Nous allons maintenant créer notre propre CSS pour styliser les entrées de champ considérées comme valides et non valides par le navigateur. Si vous vous en souvenez, nous avons utilisé :Champs obligatoires dans notre CSS pour styler tous les éléments d’entrée avec un attribut obligatoire. Maintenant, nous pouvons définir nos champs obligatoires valides ou invalides en ajoutant :valide ou :invalide à nos règles CSS.

Commençons par définir les champs non valides. Pour cet exemple, nous souhaitons que le formulaire soit considéré comme non valide lorsqu'il est actif. Nous allons ajouter une bordure rouge, une ombre rouge et une icône rouge créées dans photoshop pour indiquer le champ non valide..

.contact_form input: focus: invalid, .contact_form textarea: focus: invalid / * lorsqu'un champ est considéré comme invalide par le navigateur * / background: #fff url (images / invalid.png) no-repeat 98% center; box-shadow: 0 0 5px # d45252; couleur de la bordure: # b03535

Créons maintenant les règles indiquant que le champ est valide. Nous allons ajouter une icône de coche de bordure, d'ombre verte et de cupidité créée dans photoshop. Cela s'appliquera à tous les champs valides, qu'ils soient ciblés ou non..

.contact_form input: required: valide, .contact_form textarea: required: valide / * lorsqu'un champ est considéré comme valide par le navigateur * / background: #fff url (images / valid.png) no-repeat 98% center; box-shadow: 0 0 5px # 5cd053; couleur de bordure: # 28921f; 

Désormais, lorsque vous vous concentrez sur un champ de formulaire, le style rouge non valide est affiché. Dès qu'un seul caractère est entré dans le champ, il est validé et les styles CSS verts sont affichés pour indiquer ce fait..

Champs Email et URL

Nos styles CSS et nos règles de validation sont déjà appliqués au champ de courrier électronique car nous avons défini le paramètre type et Champs obligatoires attributs plus tôt.

Étape 14: Présentation du HTML5 modèle Attribut

En utilisant le type = "email" attribut comme exemple, il apparaît que la plupart des navigateurs valident ce champ en tant que * @ * (tout caractère + le symbole "@" + tout caractère). Ceci n’est évidemment pas très limitatif mais empêche les utilisateurs de saisir des espaces ou des valeurs totalement erronées.

Dans l'exemple du type = "url" attribut, il semble que le minimum requis pour la plupart des navigateurs soit n'importe quel caractère suivi de deux points. Donc, si vous entrez "h:" alors le champ sera validé. Ce n'est pas extrêmement utile, mais cela empêche les utilisateurs d'entrer des informations non pertinentes, telles que leur adresse électronique ou leur adresse personnelle. Maintenant, vous pouvez manipuler plus précisément vos valeurs d’entrée dans votre validation côté serveur; cependant, nous allons parler de la façon de le faire en HTML5.

le modèle Attribut

L'attribut pattern accepte une expression régulière javascript. Cette expression est utilisée, plutôt que la valeur par défaut du navigateur, pour valider la valeur du champ. Donc, notre HTML ressemble maintenant à ceci:

Désormais, notre champ n'acceptera que les valeurs commençant par "http: //" ou "https: //" et par un caractère supplémentaire. Ces modèles d’expression régulière peuvent être déroutants au début, mais une fois que vous aurez pris le temps de les apprendre, vos formulaires seront ouverts à un tout nouveau monde..

Étape 15: indicateurs de champ de formulaire (CSS)

Maintenant, modélisons nos astuces de formulaire qui indiquent à l'utilisateur le format à utiliser pour entrer ses informations..

.form_hint background: # d45252; border-radius: 3px 3px 3px 3px; Couleur blanche; marge gauche: 8px; rembourrage: 1px 6px; z-index: 999; / * Les astuces restent au-dessus de tous les autres éléments * / position: absolute; / * permet un formatage correct si l'indice est composé de deux lignes * / display: aucun; 

Nous fixons affichage: aucun parce que nous allons seulement montrer les astuces quand l'utilisateur se concentre sur le champ de saisie. Nous avons également défini nos info-bulles sur notre couleur rouge non valide par défaut, car elles sont toujours considérées comme non valides jusqu'à la saisie des informations appropriées..

En utilisant le ::avant Sélecteur

Maintenant, nous souhaitons ajouter un petit triangle à nos boîtes d’indices pour nous aider à diriger et guider l’œil. Cela peut être fait en utilisant des images, mais dans notre cas, nous allons le faire en utilisant du CSS pur..

Parce que c'est purement un élément de présentation qui n'est pas vital pour la fonctionnalité de la page, nous allons ajouter un petit triangle qui pointe à gauche en utilisant le ::avant pseudo sélecteur. Nous pouvons le faire en utilisant l’une des formes géométriques Unicode..

Normalement, nous utiliserions le format HTML Unicode pour les afficher dans notre code HTML (comme indiqué dans l'image ci-dessus). Cependant, comme nous allons utiliser le ::avant Sélecteur CSS, nous devons utiliser l'unicode échappé correspondant du triangle lorsque vous utilisez le contenu:"" règle. Ensuite, nous utilisons simplement le positionnement pour le faire où nous le voulons.

.form_hint :: before content: "\ 25C0"; / * triangle de point gauche en unicode échappé * / color: # d45252; position: absolue; en haut: 1px; à gauche: -6px; 

En utilisant le + Sélecteur Adjacent

Enfin, nous allons utiliser le sélecteur adjacent CSS pour afficher et masquer nos indicateurs de champ de formulaire. Le sélecteur adjacent (x + y) sélectionne l'élément immédiatement précédé de l'élément précédent. Comme nos indicateurs de champ viennent juste après nos champs de saisie dans notre code HTML, nous pouvons utiliser ce sélecteur pour afficher / masquer les info-bulles..

.contact_form input: focus + .form_hint display: inline; .contact_form input: obligatoire: valide + .form_hint background: # 28921f; / * changer la couleur de l'indice du formulaire lorsque valide * / .contact_form input: obligatoire: valide + .form_hint :: before color: # 28921f; / * change la couleur de la flèche de la forme lorsque valide * /

Comme vous pouvez le constater à partir des CSS, nous avons également défini les indicateurs de formulaire pour modifier les couleurs ainsi que la bordure de l'entrée lorsqu'un champ est valide ou non valide..

Étape 16: Asseyez-vous et admirez votre beau formulaire HTML5

Allez-y et regardez votre produit final!

Conclusion

Comme vous pouvez le constater, les nouvelles fonctionnalités du formulaire HTML5 sont plutôt bien conçues! Tout est rétrocompatible, donc intégrer ces nouvelles fonctionnalités à votre site Web ne casse rien..

La validation HTML5 se rapproche de la validation côté client pour aider les utilisateurs à remplir correctement leurs formulaires en ligne. Cependant, la validation HTML5 ne remplace toujours pas la validation côté serveur. Pour le moment, il est préférable d'utiliser les deux méthodes lors du traitement des informations soumises par l'utilisateur. Merci d'avoir lu!

Jetez un coup d'œil à nos modèles HTML5 ou à nos thèmes CSS pour votre prochain projet, si vous avez besoin d'une solution professionnelle prête à l'emploi..