Optimisation de la zone de saisie HTML pour améliorer l'expérience utilisateur et la facilité d'utilisation_HTML/Xhtml_Production de pages Web

Afin d'améliorer l'expérience utilisateur et la facilité d'utilisation, certains concepteurs optimiseront les éléments que les utilisateurs utilisent fréquemment sur les pages Web, tels que les zones de saisie. Comment les zones de saisie générales sont-elles optimisées ? Du point de vue de l'expérience utilisateur, simplifier les étapes utilisateur et les rendre plus pratiques pour les utilisateurs améliore la convivialité. Par exemple, changer la couleur de la zone de saisie lorsque la souris survole la zone de saisie, en sélectionnant automatiquement le texte par défaut dans la zone de saisie. , ou en cliquant pour entrer Effacer automatiquement le contenu par défaut à l'ouverture de la boîte, etc.

Cet effet semble compliqué, mais il est en fait très simple à réaliser. Il suffit d'un court morceau de code javascript pour le résoudre. Ce qui suit présente les codes de plusieurs effets.

1. Cliquez sur la zone de saisie pour sélectionner le code HTML du contenu :

Copiez le code

Le code est le suivant :

">Contenu de l'entrée :< /label>

La partie la plus importante de ce code est la partie onfocus si onfocus n'est pas utilisé, le même effet peut être obtenu en utilisant onclick, comme onfocus="this. .sélectionner()".

2. Changez la couleur de la bordure ou la couleur d'arrière-plan lorsque la souris survole la zone de saisie

Il existe deux méthodes pour cet effet : la première consiste à utiliser le pseudo-élément en CSS : focus ; la méthode 2 utilise toujours Un court morceau de javascript; Le code html de la méthode 1 est le même que l'exemple ci-dessus, sauf que le paragraphe suivant est ajouté au CSS :

Copier le codeLe code est le suivant :

input:hover { border:1px solid #F00 }

Lorsque la souris survole la zone de saisie, la bordure de la zone de saisie devient rouge, mais cette méthode n'est valide que dans le navigateur Firefox et IE7 ou supérieur, et IE6 ne la prend pas en charge, elle a donc certaines limitations. Le code de la deuxième méthode est essentiellement le même que celui de l'exemple ci-dessus, sauf qu'une section de code de survol de la souris est ajoutée à la fin :

Copier le code Le code est le suivant :

;label for= "textfield">Contenu de l'entrée :

Utilisez ceci code, big La plupart des navigateurs peuvent le prendre en charge.

3. Cliquez sur la zone de saisie et le texte par défaut disparaît.

Il y a un autre effet lorsque la souris clique sur la zone de saisie, le texte par défaut d'origine disparaît. Si vous saisissez un nouveau contenu puis éloignez la souris, le nouveau contenu de la zone de saisie reste inchangé ; si vous n'entrez pas de nouveau contenu, la souris quitte la zone de saisie et le texte par défaut est restauré. Cet effet peut être obtenu en ajoutant simplement un court morceau de javascript pour juger :

Copiez le codeLe code est tel suit :

Contenu de saisie :



L'attribut placeholder de input peut être utilisé directement en HTML5 :

Copier le code Le code est le suivant :

Les trois effets ci-dessus sont des comparaisons Bien que les applications javascript simples dépassent la portée du code HTML, leur maîtrise apporte une grande commodité aux applications HTML et à la production de pages Web, donc lorsque cela est nécessaire, il est nécessaire de maîtriser du javascript simple.