A detailed example of beautifying HTML form controls (form beautification) with CSS

First, the HTML Submit and bottom button basic grammatical structure

1. HTML Submit button

Set type= "Submit" in the Input tab to set this form control as a button.

Submit Button Code:

The code is as follows:

<input name= "" type= "submit" value= "Commit"/>

Submit Button Effect

HTML Submit Button Effect

2. HTML Bottom button

Set type= "Bottom" in the Input tab to set this form control as a button.

Bottom button code:

The code is as follows:

<input name= "" type= "button" value= "Commit"/>

Bottom button:

HTML Botton button effect

Second, the HTML submit and bottom button difference

Type=button is simply a button function

Type=submit is the Send form

But for the Web UI people should be aware that using submit to improve the usability of the page:

After using submit, the page supports keyboard enter operations, while many web software designers may not notice the submit unification.

The page does not support the ENTER key after the button is used. Therefore, you need to support the ENTER key, you must set a submit, the default enter key to the first submit to the page operation.

The code is as follows:

<input type= "Submit" Name= "B1" value= "Submit" onclick= "Bt_submit_onclick ()" >

After executing the onclick, go to action. You can automatically submit no onclick required. So, the onclick here can not be.

The code is as follows:

<input type= "button" Name= "B1" value= "Submit" onclick= "Bt_submit_onclick ()" >

After executing the onclick, the jump file is controlled in the JS file. Submit requires onclick.

For example:

1,onclick= "form1.action= ' a.jsp '; Form1.submit ();" This enables the function of the submit.

2,button Code

The code is as follows:

<form name= "Form1" method= "Post" action= "<a href=" http://www.css.com ">http://www.css.com</a>" > <input type= "button" name= "button" value= "buttons" onclick= "Submit ()" > </form>

Button

3, Button HTML code

The code is as follows:

<input type= "button" name= "button" value= "button" onclick= "javascript:windows.location.href=" Your url "" >

Third, HTML submit and bottom button beautify CSS p layout

First we prepare the button to beautify the button picture, and add a class style to the input submit or bottom button control, set its button background to beautify the picture, set the border to zero, width and height.

1, the HTML bottom button beautification

1), picture material

You can save a picture as a use

Beautify Picture button material

2), corresponding to the full HTML source code:

The code is as follows:

<! DOCTYPE Html>


3), Bottom effect


Bottom beautification effect

2. Beautify the HTML submit button

1), picture material

You can save a picture as a use


Button picture material mouse right button save as use

2), corresponding to the full HTML source code:

The code is as follows:

<! DOCTYPE html> 
3), submit button effect


HTML Submit beautification Effect