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