Optimisation de la zone de saisie HTML pour améliorer l'expérience utilisateur et la facilité d'utilisation Introduction détaillée

Les 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 ? Par exemple, lorsque la souris survole la zone de saisie, la couleur de la zone de saisie est modifiée et le texte par défaut dans la zone de saisie est automatiquement sélectionné. Afin d'améliorer l'expérience utilisateur et la facilité d'utilisation, certains concepteurs optimisent 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 :

Le code est le suivant :

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> 
</form>

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

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 deux utilise toujours Un court morceau de javascript; Le code html de la première méthode est le même que l'exemple ci-dessus, sauf que la section suivante est ajoutée au CSS :

Le Le 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 deviendra rouge. Cependant, cette méthode n'est valable que dans le navigateur Firefox et IE7 ou. ci-dessus, IE6 ne le prend pas en charge et présente donc certaines limitations. Le code de la deuxième méthode est essentiellement le même que l'exemple ci-dessus, sauf qu'une section de code de survol de la souris est ajoutée à la fin :

Le code est le suivant :

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" onmouseover="this.style.borderColor=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" /> 
</form>

Grâce à ce code, 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 jugement JavaScript :

Le code est le suivant :

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" onFocus="if (value ==&#39;Dreamweaver&#39;){value =&#39;&#39;}" onBlur="if (value ==&#39;&#39;){value=&#39;Dreamweaver&#39;}"/> 
</form>

En HTML5, l'attribut placeholder de input peut être utilisé directement :

Le code est le suivant :

<input type="search" name="user_search" placeholder="Search W3School" />

Les trois effets ci-dessus sont des applications javascript relativement simples, bien qu'elles dépassent le cadre de. Le code HTML, maîtrisant son impact sur la production d'applications HTML et de pages Web, apporte une grande commodité. Ainsi, lorsque cela est nécessaire, il est nécessaire de maîtriser un javascript simple.

Pour plus d'optimisation de la zone de saisie HTML afin d'améliorer l'expérience utilisateur et la facilité d'utilisation, veuillez prêter attention au site Web PHP chinois pour des articles connexes détaillés !