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

Implementation of Nginx configuration Https security authentication

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

Implementation of Nginx configuration Https security authentication

How to connect to docker server using ssh

How to remove the underline of a hyperlink using three simple examples

How to compile and install opencv under ubuntu

Several common methods of CSS equal height layout

Vue Element front-end application development: Use of API Store View in Vuex

Detailed explanation of html-webpack-plugin usage

Solution to overflow of html table

How to connect a Linux virtual machine to WiFi

Detailed explanation of six web page image carousel effects implemented with JavaScript

Recommend

Vue implements start time and end time range query

Detailed explanation of the deployment process of SEATA transaction service Docker

Detailed application of Vue dynamic form

The difference between html empty link href="#" and href="javascript:void(0)"

React tsx generates random verification code

Docker implements MariaDB sub-library and sub-table and read-write separation functions

Perform data statistics on different values of the same field in SQL

Detailed explanation of the 10061 unknown error when using Navicat to connect to a remote Linux MySQL database

mysql5.7.21.zip installation tutorial

MySQL Database Basics SQL Window Function Example Analysis Tutorial

Detailed explanation of the use of router-view components in Vue

CSS3 implements horizontal centering, vertical centering, horizontal and vertical centering example code

How to modify the default submission method of the form

Vue+element+springboot to implement file download progress bar display function example

VMware ESXi 6.0 and deployment of virtual machine installation tutorial (picture and text)