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

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 to use is to improve usability. For example, when the mouse hovers over the input box, the color of the input box changes, the default text in the input box is automatically selected, or the default content is automatically cleared when the input box is clicked, etc.

This effect sounds complicated, but it is actually very simple to do. It can be solved with just a small piece of JavaScript code. Here are some codes for some effects.

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

Copy code

The code is as follows:

The most important part of this code is onfocus. 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 hovers over the input box

There are two ways to achieve this effect: Method 1 is to use the pseudo-element :focus in CSS; Method 2 is to use a small piece of javascript. The HTML code for Method 1 is the same as in the example above, except that the following section is added to the CSS:

Copy code

The code is as follows:

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

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

Copy code

The code is as follows:

<form id="form1" name="form1" method="post" action="">
<label for="textfield">Enter content:</label>
<input name="textfield" type="text" id="textfield" 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

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

Copy code

The code is as follows:

<form id="form1" name="form1" method="post" action="">
<label for="textfield">Enter content:</label>
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/>
</form>

In HTML5, you can directly use the placeholder attribute of input:

Copy code

The code is as follows:

The above three effects are relatively simple javascript applications. Although they have surpassed the scope of Html code, mastering them will bring great convenience to Html application and web page production. Therefore, when necessary, it is also necessary to master some simple javascript.

<<: Vue advanced usage tutorial dynamic components

>>: Front-end performance optimization - the pain points that front-end engineers have to talk about

In-depth understanding of the life cycle comparison between Vue2 and Vue3

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

In-depth understanding of the life cycle comparison between Vue2 and Vue3

Introduction to MyCat, the database middleware

Detailed explanation of views in MySQL

Some tips for writing high-performance HTML applications

express project file directory description and detailed function description

Ubuntu Docker installation in vmware (container building)

How to reset MySQL root password under Windows

How to connect XShell and network configuration in CentOS7

Detailed explanation of various methods of Vue component communication

Recommend

Centos 7.4 server time synchronization configuration method [based on NTP service]

What you need to know about MySQL auto-increment ID

Detailed tutorial on installing mysql-8.0.20 under Linux

React configuration px conversion rem method

Solution for coexistence of multiple versions of PHP under Linux system (super simple)

js realizes shopping cart addition and subtraction and price calculation functions

25 Examples of Using Circular Elements in Web Design

Detailed explanation of 2 methods to synchronize network time in Linux/CentOS system

Detailed explanation of the middleman mode of Angular components

Three uses and differences of MySQL not equal

How to use JSX to implement Carousel components (front-end componentization)

Prevent HTML and JSP pages from being cached and re-fetched from the web server

Brief analysis of the various versions of mysql.data.dll driver

Explore VMware ESXI CLI common commands

Tutorial on deploying springboot package in linux environment using docker