So optimieren Sie HTML-Eingabefelder, um das Benutzererlebnis und die Benutzerfreundlichkeit zu verbessern

Dieses Mal werde ich Ihnen Möglichkeiten vorstellen, das Eingabefeld von HTML zu optimieren, um die Benutzererfahrung und Benutzerfreundlichkeit zu verbessern Schauen wir uns hier praktische Fälle an. Um das Benutzererlebnis und die Benutzerfreundlichkeit zu verbessern, optimieren einige Designer Dinge, die Benutzer häufig auf Webseiten verwenden, wie z. B. Eingabefelder. Wie werden allgemeine Eingabefelder optimiert? Aus Sicht des Benutzererlebnisses verbessert die Vereinfachung der Benutzerschritte und die Benutzerfreundlichkeit die Benutzerfreundlichkeit. Beispielsweise wird die Farbe des Eingabefelds geändert, wenn sich die Maus über dem Eingabefeld befindet, wodurch automatisch der Standardtext im Eingabefeld ausgewählt wird , oder klicken Sie, um den Standardinhalt beim Öffnen des Felds automatisch zu löschen usw.

Dieser Effekt hört sich kompliziert an, ist aber eigentlich sehr einfach durchzuführen. Es ist nur ein kurzes Stück

Javascript
-Code erforderlich, um ihn zu lösen. Im Folgenden werden die Codes für verschiedene Effekte vorgestellt. 1. Klicken Sie auf das Eingabefeld, um den HTML-Code des Inhalts auszuwählen:

Der wichtigste Teil dieses Codes ist der Onfocus-Teil Verwenden Sie

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

onclick

, um den gleichen Effekt zu erzielen, z. B. onfocus="this.select()". 2. Ändern Sie die Rahmenfarbe oder Hintergrundfarbe, wenn sich die Maus über dem Eingabefeld befindet

Es gibt zwei Methoden für diesen Effekt: Methode eins besteht darin, das Pseudoelement in CSS zu verwenden: Fokus ; Methode zwei verwendet immer noch ein kurzes Stück Javascript; Der HTML-Code von Methode 1 ist derselbe wie im obigen Beispiel, außer dass der folgende Abschnitt zum CSS hinzugefügt wurde:

Wann Wenn Sie mit der Maus über das Eingabefeld fahren, wird der Rand des Eingabefelds rot. Diese Methode ist jedoch nur im Firefox-Browser und IE7 oder höher gültig und wird von IE6 nicht unterstützt, sodass bestimmte Einschränkungen bestehen. Der Code von Methode zwei ist größtenteils derselbe wie im obigen Beispiel, außer dass am Ende ein Abschnitt mit Maus-Hover-Code hinzugefügt wird:

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

Verwenden Sie diesen Code, den die meisten Browser unterstützen können.

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

3. Klicken Sie auf das Eingabefeld und der Standardtext verschwindet

Es gibt einen weiteren Effekt, wenn die Maus auf das Eingabefeld klickt. Wenn Sie andere neue Inhalte eingeben und dann die Maus wegbewegen, bleibt der neue Inhalt des Eingabefelds unverändert; wenn Sie keinen neuen Inhalt eingeben, verlässt die Maus das Eingabefeld und der Standardtext wird wiederhergestellt. Dieser Effekt kann durch einfaches Hinzufügen eines kurzen Abschnitts von Javascript zur Beurteilung erzielt werden:

In HTML5 können Sie das Platzhalterattribut der Eingabe direkt verwenden:

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

und höher Bei den drei Effekten handelt es sich um relativ einfache Javascript-Anwendungen. Obwohl sie über den Rahmen von HTML-Code hinausgehen, ist ihre Beherrschung für HTML-Anwendungen und die Erstellung von Webseiten sehr praktisch. Daher ist es bei Bedarf auch sehr nützlich, einige davon zu beherrschen einfaches Javascript.

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

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So implementieren Sie ein Eingabe-Dropdown-Menü in HTML

Wie wäre es mit progressiver Verbesserung und Anmut? Verschlechterung in CSS3 So verwenden Sie die neuen Einheiten vw, vh, vmin, vmax von CSS3 mit

So verwenden Sie das Titelattribut in HTML

Lassen Sie den Text dort erscheinen, wo sich die Maus befindet

Das obige ist der detaillierte Inhalt vonSo optimieren Sie HTML-Eingabefelder, um das Benutzererlebnis und die Benutzerfreundlichkeit zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!