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

Time:2020-2-13

In order to improve the user experience and ease of use, some designers will optimize the things that users often use in web pages, such as input boxes. How is the general input box optimized? From the perspective of user experience, simplifying the user’s use steps and making it more convenient for users is to improve the ease of use, such as changing the color of the input box when the mouse is suspended in the input box, automatically selecting the default text in the input box, or automatically clearing the default content when clicking the input box, etc.

This effect sounds complicated, but in fact, it’s very simple, just a little JavaScript code can solve it. The following describes several effects of the code.

1. Click the HTML code of the selected content in the input box:

Copy code

The code is as follows:

<form name=”form1″ method=”post” action=””>
< label for = “textfield” > input content: < / label >
<input name=”textfield” type=”text” value=”Dreamweaver”onfocus=”this.select()” />
</form>

The most important part of this code is the part of onfocus. If you do not use onfocus, you can use onclick to achieve the same effect, such as onfocus = “this. Select()”.

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

There are two ways to achieve this effect: one is to use the pseudo elements in CSS: focus; the other is to use a small section of JavaScript; the HTML code of method 1 is the same as in the above example, except to add the following paragraph in CSS:

Copy code

The code is as follows:

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

When the mouse hovers over the input box, the input box border will turn red, but this method is only effective in Firefox browser and IE7 or above, which is not supported by IE6, so it has certain limitations. Most of the code in method 2 is the same as in the above example, except for adding a section of hovering code later:

Copy code

The code is as follows:

<form name=”form1″ method=”post” action=””>
< label for = “textfield” > input content: < / label >
<input name=”textfield” type=”text” value=”Dreamweaver”onfocus=”this.select()” onmouseover=”this.style.borderColor=’#FF6600′” onmouseout=”this.style.borderColor=”” />
</form>

With this code, most browsers can support it.

3. Click the input box and the default text disappears

Another effect is that when the mouse clicks on the input box, the original default text disappears. If you input other new content, and then move the mouse, the new content of the input box will not change; if you do not input new content, the mouse will leave the input box and restore the default text. This effect can be achieved only by adding a short paragraph of JavaScript judgment:

Copy code

The code is as follows:

<form name=”form1″ method=”post” action=””>
< label for = “textfield” > input content: < / label >
<input name=”textfield” type=”text” value=”Dreamweaver” onmouseover=”this.style.borderColor=’#FF6600′” onmouseout=”this.style.borderColor=”” onFocus=”if (value ==’Dreamweaver’){value =”}” onBlur=”if (value ==”){value=’Dreamweaver’}”/>
</form>

The placeholder attribute of input can be used directly in HTML5:

Copy code

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, mastering them will bring great convenience to HTML application and web page production. Therefore, it is necessary to master some simple JavaScript when necessary.

Recommended Today

IOS bottom layer exploration – KVC

IOS bottom Exploration Series IOS underlying exploration – alloc & init IOS underlying exploration – calloc and ISA IOS underlying exploration class IOS underlying exploration cache IOS bottom layer exploration method IOS underlying exploration – Message lookup IOS underlying exploration – message forwarding IOS underlying exploration – application loading IOS underlying exploration – class loading […]