La vérification du client est l'une des fonctions les plus couramment utilisées des programmes client Web. HTML5 nous a déjà fourni la fonction de vérification du formulaire. Quant à savoir pourquoi il n'est pas populaire, il est estimé qu'il est compatible et le style est trop laid.
Ci-dessous, nous créerons une vérification de formulaire de HTML5 et CSS3 étape par étape, en utilisant uniquement HTML et CSS.
Ce qui suit est le suivant:
Étape 1: Triez le champ de vérification et le typeTout d'abord, nous avons besoin des champs suivants:
Une fois que l'utilisateur est entré dans certaines informations, nous devons vérifier si les informations de l'utilisateur sont correctes pour éviter les données d'erreur et les données trompées sur le serveur.
Dans les nouvelles spécifications de HTML5, la boîte d'entrée de saisie fournit une variété de types d'entrée tels que: tel, e-mail, numéro, gamme, couleur, etc. Ces types ne sont généralement pas très réfléchis dans le client de bureau. Par exemple, le nombre passera automatiquement aux nombres purs sur le clavier mobile, et le clavier électronique changera automatiquement avec le clavier.
Étape 2: Déterminez le style de formulaireNous devons également déterminer le style final de la forme. Ici, j'ai trouvé un style de forme sur Dribble comme style de démonstration de cette époque.
Étape 3: code de modèleUtiliser le code de déclaration standard HTML5
<!Étape 4: Créez un formulaire
Créez un élément de format de base.
<Form action = onsubmit = return false> </ form>Étape 5: Créez l'élément
Les éléments de la table ont la composition des éléments suivants:
Les éléments UL et Li sont utilisés pour les dispositions de typographie, qui sont utilisées pour diviser les éléments et les dispositions de l'unité de table. L'étiquette est utilisée pour le texte de l'invite de champ du formulaire. L'entrée est utilisée pour les données d'entrée de l'utilisateur. Span est utilisé pour utiliser des emoji pour indiquer si le champ utilisateur est correctement rempli.
<ul> <li> <étiquette pour = name> Nom complet </ labe> <entrée type = text id = name name = name placeholder = s'il vous plaît entrez le nom /> <span class = icon-name> </span> < / span> </span> li> </ul>
Le code HTML Form Form Code complet est le suivant:
Étape 6: Ajouter le styleComplétez l'écriture de l'élément de forme, améliorez étroitement son style, ce qui le rend plus beau.
Body {Affichage: Flex;} Form {Padding: 0 10%; ; Couleur: Black; Position: relative; Absolute; à droite: 0;Le code CSS complète le code comme suit:
Étape 7: Ajouter une invite à emojiDans chaque structure de forme de forme, nous avons ajouté une balise SPAN, comme nous avons ajouté une étiquette <span class = icon-name> </span> dans le champ Nom. Ajoutez maintenant le style au champ de test de l'état de l'école.
LI Span {Affichage: Block;