HTML5, élément d'entrée - Partie 2

Table des matières
Déjà dans la première partie de ce tutoriel, nous avons défini les attributs avec lesquels nous pouvons travailler, nous avons vu que nous en avons de nouveaux pour HTML5 et d'autres qui ne le sont pas, cependant lorsqu'il s'agit de construire des champs solides qui nous aident dans les processus essentiels du site, c'est lorsque la combinaison de ceux-ci et la bonne utilisation de chacun nous aideront à collecter les données de la meilleure manière possible.
Définir la taille d'un champ
Comme nous l'avons vu, nous avons deux attributs qui affectent directement la taille d'un champ, ce sont Taille Oui longueur maximale, l'un règle l'amplitude visuelle du champ et l'autre la quantité de texte que le champ peut réellement recevoir.
Voyons un exemple utilisant les deux attributs :
 Exemple

Patate douce:

Ville:

Fruit:

Soumettre Vote

Dans cet exemple, nous voyons comment le premier champ est spécifié a longueur maximaleSeulement avec cela, nous disons au navigateur qu'il ne peut accepter que 10 caractères, mais il peut attribuer la largeur par défaut, dans le deuxième champ, nous spécifions le Taille Avec ce que nous lui disons à quelle largeur il devrait être, cependant nous ne limitons pas la saisie de texte et dans la troisième nous appliquons les deux conditions, voyons comment cela fonctionne dans le navigateur.

Utilisation de la valeur et de l'espace réservé
Ayant vu la différence entre ces deux champs, dans cet exemple, nous allons démontrer efficacement comment les appliquer à un formulaire, voyons comment les utiliser dans le code suivant.
 Exemple

Patate douce:

Ville:

Fruit:

Soumettre Vote

Comme nous pouvons le voir dans les deux premiers champs, l'espace réservé indique une aide pour ce que l'utilisateur doit entrer, cette valeur que l'espace réservé contient n'est pas la valeur du champ de saisie, donc si nous soumettons ces champs ils arriveront vides, à la place le troisième champ Il a déjà quelque chose dans l'attribut value, ceci s'il serait transmis lors de la soumission audit formulaire.
Voyons comment le navigateur nous montrerait cela

Créer des champs en lecture seule
Parfois, nous devons travailler avec des champs en lecture seule, soit parce que la valeur ne doit pas être modifiée par l'utilisateur, soit parce qu'elle est simplement informative. Il se peut également que cela soit le résultat d'un filtrage précédent par l'utilisateur et que seule cette valeur puisse être vue, pour cela nous avons deux options qui, bien qu'elles semblent identiques, sont totalement différentes.
On avait déjà vu l'attribut lecture seulement et on sait que c'est pour que le champ ne soit pas modifiable, on a aussi l'attribut désactivée, remplit la même fonction que lecture seulement, cependant en faisant nous faire parvenir tous les champs désactivée ils ne sont pas soumis donc c'est comme s'il n'existait pas dans le formulaire.
Voyons ce qui précède expliqué avec un exemple pratique.
 Exemple

Patate douce:

Ville:

Fruit:

Soumettre Vote

Nous pouvons voir que le premier champ est désactivé et le second en lecture seule, lorsque le désactivé est affiché dans le navigateur, il apparaît avec une coloration grise, généralement associée à la non-activation, tandis que le champ en lecture seule est considéré comme un champ normal, bien que si nous essayons pour écrire à qui que ce soit, aucun ne nous laissera entrer de texte.
Voyons comment est l'exemple :

Avec cela, nous terminons cette deuxième partie du tutoriel, nous sommes maintenant en mesure d'améliorer nos formulaires en utilisant des validations de base de taille et de quantité de texte et également en contrôlant ce que l'utilisateur peut modifier ou non, en plus de pouvoir afficher de l'aide dans les champs pour qu'il ait une idée que vous devriez ou ne devriez pas entrer.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif

Vous contribuerez au développement du site, partager la page avec vos amis

wave wave wave wave wave