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

The role of nextTick in Vue and several simple usage scenarios

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

The role of nextTick in Vue and several simple usage scenarios

CSS3 timeline animation

Vue uses monaco to achieve code highlighting

js implements a simple countdown

Detailed explanation of MySQL cluster: one master and multiple slaves architecture implementation

How to improve MySQL Limit query performance

The principles and defects of MySQL full-text indexing

Briefly describe the four transaction isolation levels of MySql

How to install a virtual machine with Windows services on Mac

Detailed steps to use Redis in Docker

Recommend

A complete example of mysql querying batch data from one table and inserting it into another table

Web Design Tutorial (3): Design Steps and Thinking

Detailed explanation of Linux curl form login or submission and cookie usage

docker compose idea CreateProcess error=2 The system cannot find the specified file

MySQL knowledge points for the second-level computer exam mysql alter command

Summary of HTML Hack Tags in IE Browser

CSS3 creates web animation to achieve bouncing ball effect

Solve the problem that the time zone cannot be set in Linux environment

How to connect Navicat to the docker database on the server

Vue implements the full selection function

4 ways to optimize MySQL queries for millions of data

Vue + OpenLayers Quick Start Tutorial

MySQL 5.7.17 winx64 installation and configuration graphic tutorial

Solution to MySql Error 1698 (28000)

Example method of deploying react project on nginx