HTML input box optimization to improve user experience and ease of use Detailed introduction

Designers will optimize things that users often use in web pages, such as input boxes. How are general input boxes optimized? For example, when the mouse is hovering over the input box, the color of the input box is changed, and the default text in the input box is automatically selected. In order to improve user experience and ease of use, some designers will optimize things that users frequently use on web pages, such as input boxes. How are general input boxes optimized? From the perspective of user experience, simplifying the user steps and making it more convenient for users improves usability. For example, changing the color of the input box when the mouse is hovering over the input box, automatically selecting the default text in the input box, or clicking to enter Automatically clear the default content when the box is opened, etc.

This effect sounds complicated, but it is actually very simple to do. It only takes a short piece of javascript code to solve it. The following introduces the codes for several effects.

1. Click the input box to select the Html code of the content:

The code is as follows:

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

The most important part of this code is onfocus. Part, if you don't use onfocus, you can also use onclick to achieve the same effect, such as onfocus="this.select()".

2. Change the border color or background color when the mouse is hovering over the input box

There are two methods for this effect: method one is to use the pseudo element in CSS: focus; method two is still using A short piece of javascript; The html code of method one is the same as the above example, except that the following section is added to the CSS:

The code is as follows:

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

When the mouse is hovering over the input box, the border of the input box will turn red. However, this method is only valid in Firefox browser and IE7 or above. IE6 does not support it, so it has certain limitations. The code for method two is mostly the same as the above example, except that a section of mouse hover code is added at the end:

The code is as follows:

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

Use This code is supported by most browsers.

3. Click the input box and the default text disappears

There is another effect. When the mouse clicks on the input box, the original default text disappears. If you enter other new content and then move the mouse away, the new content of the input box remains unchanged; if you do not enter new content, the mouse leaves the input box and the default text is restored. This effect can be achieved by adding a short piece of javascript judgment:

The code is as follows:

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

In HTML5, the placeholder attribute of input can be used directly:

The code is as follows:

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

The above three effects are relatively simple javascript applications. Although they have gone beyond the scope of Html code, master their application to Html and web page production. It brings great convenience, so when necessary, it is necessary to master some simple javascript.

For more HTML input box optimization to improve user experience and ease of use, please pay attention to the PHP Chinese website for detailed related articles!