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

This article is about how to optimize HTML input boxes. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

To improve the user experience and ease of use, some designers optimize things that users use most often on a web page, such as input boxes. How are general input boxes optimized? From the user experience point of view, simplifying the user's steps and making it more convenient for users is improving ease of use, such as changing the color of the input box when the mouse hovers over 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 it's actually very simple to do, with just a small piece of javascript code. Here are a few examples of code for effects.

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

Input content:

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

2. Change border color or background color when mouse hovers over input box

There are two ways to do this: one is to use the CSS pseudo-element:focus; the other is to use a small javascript; the html code of the first method is the same as in the above example, but the following paragraph is added to CSS:

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

When the mouse hovers over the input box, the input box border will turn red, but this method only works in Firefox browser and IE7 version above, IE6 does not support it, so it has certain limitations. The code for Method 2 is mostly the same as in the example above, except that a mouse-hovering code is added at the end:

Input content:

Using this code, most browsers can support it.

3. Click the input box default text disappears

There is also an effect where the default text disappears when the mouse clicks on the input box. If you enter something new, and then move the mouse away, the new content of the input box remains unchanged; if you don't enter anything new, the mouse leaves the input box and restores the default text. This effect can also be achieved by adding a small javascript judgment:

Input content:

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

Thank you for reading! About "how to optimize HTML input box" This article is shared here, I hope the above content can have some help for everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

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.