Five practical tips for web form design

1. Mobile selection of form text input: In the text input field, if a prompt is added, visitors often have to select and delete it with the mouse, and then enter useful information. In fact, as long as you add onMouseOver="this.focus()" onFocus="this.select()" code to <textarea>, everything will become much simpler, such as:

The following is the quoted content:
<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">Please fill in your name</textarea>
Similarly, you can add code to <input>.
2. Click to delete the form input unit: This column has a similar function to the above one, but there is a slight change in the use of the mouse. It needs to be clicked instead of just covering with the mouse like the above one. like:
The following is the quoted content:

<input type=text name="address" size=19 value="Please fill in your email" onFocus="this.value=''">
After clicking the input unit, the prompt information will be deleted. Isn’t it convenient?
3. Border setting of form input unit: Changing the traditional form unit border will make your homepage more colorful. like:
The following is the quoted content:

<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">
Among them, "style=***" is the left, right, top, bottom and background color settings, which are applicable to other units.
4. Text settings of form input cells: The font of cells in the form can be modified, such as:
The following is the quoted content:

<input type=text name="address" size=19 value="Please fill in your name" style=font-family:"verdana";font-size:10px >
Among them, "style=***" is the font and font size settings.
5. Change the form properties to a pop-up window: After most forms are activated, they will be opened in the current page, affecting normal browsing. It is better to modify it, such as:
The following is the quoted content:
<form method=POST action=url target=_blank>
"target=_blank" is used to control the opening of the pop-up window.

<<: Pure HTML and CSS to achieve JD carousel effect

>>: Difference and implementation of JavaScript anti-shake and throttling

Even a novice can understand the difference between typeof and instanceof in js

Five practical tips for web form design

Even a novice can understand the difference between typeof and instanceof in js

Vue project configures webpack-obfuscator to implement code encryption and obfuscation

Summary of MySQL common functions

MySQL's method of dealing with duplicate data (preventing and deleting)

CSS example code for implementing sliding doors

Docker uses Git to implement the detailed process of Jenkins release and test projects

Will this SQL writing method really cause the index to fail?

Modify the default data directory of MySQL 8.0 (quick operation without configuration)

Zabbix monitors Linux hosts based on snmp

React event binding details

Recommend

In-depth analysis of MySQL 8.0 redo log

MySQL 8.0.16 compressed version download and installation tutorial under Win10 system

MySQL 5.7.25 compressed version installation and configuration method graphic tutorial

Example of removing json backslash in php

mysql command line script execution example

How to capture exceptions gracefully in React

Example code for using Nginx to implement 301 redirect to https root domain name

Detailed explanation of the process of deploying MySql on Centos server and connecting to Navicat

Detailed explanation of how to use $props, $attrs and $listeners in Vue

Detailed example of IOS database upgrade data migration

Detailed explanation of Navicat's slow remote connection to MySQL

Detailed explanation of viewing and setting SQL Mode in MySQL

Detailed explanation of the simple use of MySQL query cache

How to set up vscode remote connection to server docker container

MySQL deep paging (how to quickly paginate tens of millions of data)