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
Recommend
Why Use DOCTYPE HTML
You know that without it, the browser will use qui...
uniapp project optimization methods and suggestions
Table of contents 1. Encapsulate complex page dat...
Vue uses canvas to realize image compression upload
This article shares the specific code of Vue usin...
Detailed explanation of MySQL sql99 syntax inner join and non-equivalent join
#Case: Query employee salary levels SELECT salary...
MySQL 8.0.20 installation and configuration tutorial under Win10
MySQL 8.0.20 installation and configuration super...
JavaScript to achieve floor effect
This article shares the specific code of JavaScri...
Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)
Docker installation (Alibaba Cloud Server) Docker...
Common operation commands of MySQL in Linux system
Serve: # chkconfig --list List all system service...
VMware workstation 12 install Ubuntu 14.04 (64 bit)
1. Installation Environment Computer model: Lenov...
Introduction to the use of MySQL performance stress benchmark tool sysbench
Table of contents 1. Introduction to sysbench #Pr...
Example of making a butterfly flapping its wings with pure CSS3
Pure CSS3 makes a butterfly flapping its wings, s...
How to configure Basic Auth login authentication in Nginx
Sometimes we build a file server through nginx, w...
How to implement a simple HTML video player
This article introduces the method of implementin...
20 CSS coding tips to make you more efficient (sorted)
In this article, we would like to share with you ...
Detailed explanation of the installation commands and usage of Docker and FastDFS
Docker Features 1) Quick to get started It only t...