Comment optimiser la zone de saisie HTML

Cette fois, je vais vous montrer comment optimiser la zone de saisie HTML. Quelles sont les précautions pour optimiser la zone de saisie HTML. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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 :

<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>

La partie la plus importante de ce code est la partie onfocus. utilisez onfocus, utilisez onclick peut également obtenir le même effet, 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 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 la section suivante est ajoutée au CSS :

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

Quand la souris survole la zone de saisie, la bordure de la zone de saisie changera et deviendra rouge, mais cette méthode n'est valable 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 :

<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>

En utilisant 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 une courte section de javascript :

<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, vous pouvez utiliser directement l'attribut placeholder de input :

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

Les trois ci-dessus effets Ce sont toutes des applications javascript relativement simples. Bien qu'elles dépassent le cadre 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 également nécessaire de maîtriser du javascript simple.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment résoudre le problème lorsque le formulaire est automatiquement soumis et passe à d'autres pages après avoir appuyé sur Entrée dans la page Web

Comment La largeur du tableau peut être fixée table-layout : fixe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!