Five examples and skills of web form design

Time:2022-4-29

1. Mobile selection of form text input: if a prompt is added in the text input field, visitors often need to select it with the mouse, delete it, and then enter useful information. In fact, as long as you add OnMouseOver = “this. Focus()” onfocus = “this. Select()” code to < textarea >, everything will be much easier, such as:

The following are the references:
< 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 delete in the form input unit: this column is the same as the above, but the function is similar. It is only slightly changed with the mouse. It needs to be clicked instead of being overwritten with the mouse. For example:
The following are the references:

< 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. Is it very convenient.
3. Border setting of form input unit: changing the traditional border of form unit will make your home page colorful. For example:
The following are the references:

<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″>

Where “style = * * *” is the setting of left and right up and down and background color, which is applicable to other units.
4. Text setting of form input cell: the font of the cell in the form can be modified, such as:
The following are the references:

< input type = text name = “address” size = 19 value = “please fill in your name” style = font family: “Verdana”; font-size:10px >
Where “style = * * *” is the font and word size setting.
5. Modify form properties to pop-up window: after most forms are activated, they will open in the current page, affecting normal browsing. It’s better to modify it, such as:
The following are the references:
<form method=POST action=url target=_blank>

Where “target = _blank” is to control the opening in the pop-up window.