Five tips for div+css form layouts

Source: Internet
Author: User

the five tips for div+css form layouts can help you more flexibly control the form and make the page more satisfying.

1, form text input mobile selection:

In the text entry field, if prompted, visitors often use the mouse to select and delete, and then enter useful information. In fact, just add onmouseover= "This.focus ()" onfocus= "This.select ()" Code to <textarea>, everything will be much simpler, such as:

<textarea name=textarea wrap=virtual rows=2 cols=22 onmouseover= "This.focus ()" onfocus= "This.select ()" > Webmaster's Home Www.chinaz.com</textarea>

Similarly, you can add code to <input>.

2, the form input unit clicks deletes:

This column is similar to the same effect, just use the mouse slightly changes, you need to click instead of as long as the mouse overlay. Such as:

<input type=text name= "Address" size=19 value= "webmaster's home www.chinaz.com" onfocus= "this.value=" ">

Click the input unit, the prompt information will be deleted, is not very convenient.

3, the form input cell border settings:

Changing the traditional table-only border will make your home page a lot more. Such as:

<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=***" for the left and right up and background color settings, for other units, please try the reader himself.

4, form input Unit text settings:

The font of cells in a form can be modified, such as:

<input type=text name= "Address" size=19 value= "webmaster's home www.chinaz.com" style= "font-size:10px" >

where "style=***" is the font and Word size settings.

5, modify the form properties for pop-up windows:

When most forms are active, they open in the current page, affecting normal browsing. Why not change it, such as:

<form method=post Action=url target=_blank>

where "Target=_blank" is opened for control in the pop-up window.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.