Page de connexion au didacticiel HTML5 avec les formulaires HTML5
HTML5 apporte de nombreuses fonctionnalités et améliorations à formulaires Web, il y a de nouveaux attributs et types d'entrée qui ont été introduits principalement pour faciliter la vie des développeurs web et offrir une meilleure expérience aux internautes.
Donc, dans ce post, nous allons créer une page de connexion en utilisant Formulaires HTML5 pour voir comment fonctionnent les nouvelles fonctionnalités ajoutées.
- Démo
- Source de téléchargement
Entrée HTML5
Jetons un coup d'oeil au balisage suivant.
Si vous avez déjà utilisé des formulaires HTML, cela vous semblera familier. Mais vous remarquerez aussi des différences ici. Les entrées ont espace réservé et Champs obligatoires attributs, qui sont de nouveaux attributs dans HTML5.
Espace réservé
le espace réservé attribut nous permet de donner le texte initial dans l’entrée qui disparaîtra quand il est dans un concentrer état ou être rempli. Auparavant, nous le faisions avec JavaScript, mais maintenant cela devient beaucoup plus facile avec ce nouvel attribut.
Attribut requis
le Champs obligatoires L'attribut définira le champ comme obligatoire et ne devra donc pas être laissé vierge avant l'envoi du formulaire. Ainsi, lorsque l'utilisateur n'aura pas rempli le champ, l'erreur suivante s'affichera..
Un nouveau sélecteur est également introduit dans CSS3, :Champs obligatoires cibler des champs avec Champs obligatoires attribut. Voici un exemple;
entrée: nécessaire bordure: 1px rouge uni;
Type d'entrée de courrier électronique
Le premier type d'entrée est email qui est en fait un nouveau type de champ ajouté en HTML5 aussi. le email type donnera la validation de base de l’adresse email dans le champ. Lorsque l'utilisateur ne remplit pas le champ avec une adresse électronique, le navigateur affiche la notification suivante.
L’utilisation de types de saisie de courrier électronique peut également offrir une meilleure expérience aux utilisateurs mobiles, tels que les utilisateurs d’iPhone et d’Android, où le système affiche Clavier virtuel optimisé pour la messagerie avec un dédié “@” bouton pour aider à taper l'adresse email plus rapidement.
Les inconvénients
Les nouvelles fonctionnalités de formulaire offertes en HTML5 sont puissantes et faciles à mettre en œuvre, mais elles font toujours défaut dans certains domaines. Par exemple;
le espace réservé attribut, n'est supporté que par les navigateurs modernes - Firefox 3.7+, Safari 4+, Chrome 4+ et Opera 11+. Donc, si vous en avez besoin pour fonctionner avec des navigateurs non pris en charge, vous pouvez utiliser ce remplissage multiple avec Modernizr..
La même chose va avec le Champs obligatoires attribut. La notification d'erreur ne peut pas être personnalisée, l'erreur restera “S'il vous plaît remplir ce champ” plutôt que “S'il vous plaît remplir votre prénom”, cette prise en charge d'attribut est également limitée aux derniers navigateurs.
Donc, utiliser JavaScript pour valider le champ requis est (jusqu'à présent) une meilleure option.
function validateForm () var x = document.forms ["login"] ["nomutilisateur"]. value; if (x == null || x == "") alert ("Veuillez renseigner le nom d'utilisateur"); retourne faux; Styliser les formulaires
Bon, maintenant décorons notre formulaire de connexion avec CSS. Tout d'abord, nous allons donner au fond un motif en bois dans le html étiquette.
html background: url ('wood_pattern.png'); taille de la police: 10 pt; Ensuite, nous devons supprimer le remplissage et la marge par défaut dans ul tag qui enveloppe l'ensemble contributions et flotte le li à gauche, les entrées seront affichées horizontalement, côte à côte.
.loginform ul padding: 0; marge: 0; .loginform li display: inline; float: gauche;
Depuis que nous flottons le li, les parents vont s'effondrer, nous devons donc effacer les choses autour du parent avec le hack clearfix.
label display: block; couleur: # 999; .cf: avant, .cf: après content: ""; affichage: table; .cf: after clear: both; .cf * zoom: 1; : focus contour: 0;
En CSS3, nous avons le sélecteur de négation. Nous allons donc l'utiliser pour cibler contributions autre que le soumettre type, qui dans ce cas ciblera l'email et le mot de passe;
.loginform input: not ([type = submit]) padding: 5px; marge droite: 10px; bordure: 1px solide rgba (0, 0, 0, 0,3); border-radius: 3px; box-shadow: incrément 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Enfin, nous allons donner une petite décoration de style pour le Soumettre bouton, comme suit.
.loginform input [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); arrière-plan: # 64c8ef; / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (en haut, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche haut, gauche bas, couleur-stop (0%, # 64c8ef), couleur-stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (haut, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / arrière-plan: -o-linear-gradient (haut, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (haut, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: linéaire-dégradé (jusqu'en bas, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: Progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; rembourrage: 5px 15px; marge droite: 0; marge supérieure: 15 px; border-radius: 3px; ombre du texte: 1px 1px 0px rgba (0, 0, 0, 0,3);
Ça y est, vous pouvez maintenant essayer le formulaire de connexion à partir des liens suivants.
- Démo
- Source de téléchargement
Mots finaux
Dans ce didacticiel, nous avons examiné quelques nouvelles fonctionnalités des formulaires HTML5:espace réservé, Champs obligatoires et email types d'entrée pour créer une page de connexion simple. Nous sommes également passés par les inconvénients des attributs, de sorte que nous pouvons décider d'une meilleure approche à appliquer.
Dans le prochain article, nous examinerons une autre nouvelle fonctionnalité de formulaire HTML5, restez à l'écoute..
