Attribut d'entrée HTML5 requis
Ce manuel expliquera l'entrée "requis»Attribut et son utilisation.
Quel est l'attribut d'entrée HTML «requis»?
Le "requis»L'attribut est un attribut booléen qui indique une condition, à savoir que le champ d'entrée doit être rempli avant d'exploiter la soumission de formulaire. Les champs d'entrée spécifiés pour les données importants doivent être définis avec l'attribut requis. Cet attribut fonctionne sur diverses entrées: URL, mot de passe, cueilleurs de date, numéro, case à cocher, tel, texte, radio, e-mail, recherche et fichier.
Comment utiliser l'attribut «requis» dans HTML5?
Pour utiliser le «requis”Attribut dans le HTML5, suivez les instructions fournies ci-dessous:
- Ajoutez un élément div avec la classe "principal".
- À l'intérieur de cette div, ajoutez un autre élément div ayant le nom de classe "contenu de formulaire".
- Dans la div de formulaire de formulaire, deux balises sont ajoutées pour les prénoms et les noms.
- Puis le ""Élément avec les attributs"taper"Est défini sur le texte,"nom”F-NAME, et L-NAME pour le prénom et le nom de famille, respectivement. L'attribut Placeholder sera affiché dans le champ de texte. Nous avons utilisé l'attribut "requis”Dans la première balise d'entrée uniquement pour voir sa fonctionnalité.
Html
Le code ci-dessus génère le résultat comme indiqué dans l'image ci-dessous:
Allons à la section CSS, où nous allons styliser le fichier HTML et voir comment fonctionne l'attribut requis.
Style «Main» Div
.principalColor d'arrière-plan: RGBA (0, 0, 0, 0.159);
largeur maximale: 500px;
marge: auto;
hauteur: 270px;
Border-Radius: 30px;
rembourrage: 10px;
Selon l'extrait de code donné, les propriétés CSS suivantes sont appliquées au «principal" récipient:
- "Couleur de l'arrière plan»La propriété spécifie la couleur d'arrière-plan de l'élément.
- "largeur maximale»La propriété définit la largeur maximale d'un élément HTML.
- "marge»La propriété spécifie l'espace à travers l'élément HTML sélectionné.
- "hauteur»La propriété définit la hauteur d'un élément HTML.
- "rayon frontalier»La propriété ajuste les bords de l'élément tour.
- "rembourrage»La propriété définit l'espace requis autour du contenu.
Div de style «Form-Content»
.formulaire de formulaireAffichage: flex;
Justification-contenu: centre;
Align-Items: Centre;
hauteur: 100%;
taille de police: 20px;
Pour styliser le div «formulaire de formulaire», appliquez les propriétés CSS enrôlées:
- "afficher»La propriété définit la disposition de l'élément.
- "justifier»La propriété ajuste l'élément horizontalement.
- "align-items»La propriété définit les éléments des articles flexibles.
- "hauteur»La propriété est utilisée pour définir la hauteur d'un élément.
- "taille de police»La propriété indique la taille de la police de texte.
Élément de style «entrée» de la div «form-contenu»
.entrée de contenu de formulaireBorder: 1px RVB solide (47, 63, 63);
rembourrage: 6px 10px;
taille de police: 20px;
Color en arrière-plan: RVB (85, 104, 104);
Couleur: #ffffff;
Aperçu: aucun;
Selon le style CSS fourni:
- "couleur»La propriété définit la couleur de la police.
- "contour"Avec la valeur"aucun”Supprime le contour de l'élément lorsqu'il est sélectionné.
Style «Planolder» de l'élément «entrée»
.Entrée de contenu de formulaire :: PlaceholderCouleur: #dadada;
La couleur de la police du placement du champ de saisie est définie comme «#dadada".
Élément de style «bouton» de la div «format-contenu»
.Bouton de contenu de formulaireBorder: 1px RVB solide (47, 63, 63);
rembourrage: 10px 20px;
taille de police: 22px;
Color en arrière-plan: RVB (12, 33, 33);
Couleur: # A3A3A3;
curseur: pointeur;
marge-gauche: 5px;
transition: tout 0.3s facilité;
Selon les propriétés données:
- "le curseur»La propriété est définie avec le pointeur de valeur. Lorsque la souris plane, une main avec un doigt pointu sera affichée.
- "marge-gauche»La propriété ajoute de l'espace à gauche du contenu.
- "transition"La propriété est définie avec la valeur"tout 0.Facilité 3s», Où tout représente toutes les propriétés, 0.3S est la durée de transition et la facilité représente le mouvement de la transition.
Élément de style «bouton» sur «volant
".Bouton de contenu de formulaire: HoverTransformer: échelle (1.1, 1.2);
Couleur blanche;
L'élément bouton est appliqué au «transformer”Échelle (1.1, 1.2) Transformer l'élément sur un plan 3D.
L'attribut requis est attaché au premier élément d'entrée. Lorsque le champ est vide, il affichera un message comme indiqué ci-dessous dans l'image:
Il peut être vu à partir de l'image ci-dessous que nous ne pouvons pas laisser le premier élément d'entrée vide:
Le deuxième élément d'entrée n'est pas associé à l'attribut requis. Donc, s'il est soumis comme vide n'affecte pas le fonctionnement de la soumission de formulaire. Lorsque le premier élément d'entrée est rempli, l'URL indique que le formulaire est soumis avec succès:
C'est ainsi que fonctionne l'attribut requis d'entrée dans HTML5.
Conclusion
L'élément d'entrée CSS est associé à de nombreux attributs, tels que le type, l'espace réservé, le requis ou plus. L'attribut requis est un booléen qui indique que le champ de saisie doit être rempli avant d'exploiter la soumission du formulaire. Ce manuel a démontré l'utilisation du HTML "requis»Attribut avec un exemple pratique.