Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to optimize the input box of HTML to improve user experience and ease of use". In daily operation, I believe many people have doubts about how to optimize the input box of HTML to improve user experience and ease of use. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "how to optimize the input box of HTML to improve user experience and ease of use". Next, please follow the editor to study!

In order to improve the user experience and ease of use, some designers optimize the things that users often use on the web, such as input boxes. How is the general input box optimized? From the point of view of user experience, simplifying user 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 hovering over the input box and automatically selecting the default text in the input box. Or automatically clear the default content when you click on the input box, and so on.

This effect sounds complicated, but it is actually very simple to do, and can be solved with a small piece of javascript code. Here is the code for several effects.

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

Enter the content:

The most important part of this code is the onfocus part, which can be achieved with onclick without onfocus, such as onfocus= "this.select ()".

two。 Change the border color or background color when the mouse hovers over the input box

There are two ways to achieve this effect: method one is to use pseudo elements in CSS: method two of focus; or a small piece of html code of method one of javascript; is the same as in the above example, except that the following paragraph is added to the CSS:

Input:hover {border:1pxsolid#F00;}

When the mouse hovers over the input box, the input box border will turn red, but this method is only valid in Firefox browsers and above IE7, and IE6 does not support it, so it has some limitations. Most of the code in method 2 is the same as in the above example, except that a mouse hover code is added later:

Enter the content:

Most browsers can support this code.

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 enter other new content, and then move the mouse away, the new content of the input box remains the same; if you do not enter new content, the mouse leaves the input box and restores the default text. This effect can also be achieved by adding a short javascript judgment:

Enter the content:

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

At this point, the study on "how to optimize the input box of HTML to improve user experience and ease of use" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.