Detailed example of using CSS to beautify HTML form controls (form beautification)

1. Basic syntax structure of HTML submit and bottom button

1. HTML submit button

Setting type="submit" in the input tag can set this form control as a button.

Submit button code:

Screenshot of submit button effect

HTML submit button effect screenshot

2. HTML bottom button

Setting type="bottom" in the input tag also sets this form control as a button.

Bottom button code:

Bottom button screenshot:

HTML botton button effect screenshot

2. The difference between HTML submit and bottom button

type=button is simply a button function

type=submit is to send the form

However, people working on WEB UI should note that using submit can improve page usability:

After using submit, the page supports keyboard enter key operation, but many WEB software designers may not notice the uniformity of submit.

After using the button, the page often does not support the enter key. Therefore, the enter key needs to be supported, and a submit must be set. By default, the enter key operates on the first submit of the page.

After executing onClick, go to action. Can be submitted automatically without onClick. So onclick is not necessary here.

After executing onClick, the jump file is controlled in the js file. onClick is required for submit.

for example:

1. onclick="form1.action='a.jsp';form1.submit();" This implements the submit function.

2. Button code

Button screenshot

3. Button HTML code

3. HTML submit and bottom button beautify CSS p layout

First, we prepare the button image for button beautification, and add a class style to the input submit or bottom button control, set the button background to the beautified image, and set the border to zero, width and height.

1. Beautify the HTML bottom button

1) Picture material

You can save the image as

Beautify picture button material

2) Corresponding complete HTML source code:

Screenshot of bottom beautification effect

2. Beautify the HTML submit button

1) Picture material

You can save the image as

Button picture material right click save as use

2) Corresponding complete HTML source code:

3) Screenshot of the submit button effect

Screenshot of the beautified HTML submit