Detailed example of using css to beautify html form controls (form beautification)_HTML/Xhtml_web page production

1. Basic syntax structure of html submit and bottom buttons

1. html submit button

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

Submit button code:

Copy code

The code is as follows:

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

Screenshot of submit button effect

Screenshot of html submit button effect

2. html bottom button

Set type="bottom" in the input tag to set this form control as a button.

Bottom button code:

Copy code

The code is as follows:

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

bottom button screenshot:

Screenshot of html botton button effect

2. The difference between html submit and bottom buttons

type=button is simply a button function

type=submit is to send the form

But those who are engaged in WEB UI should note that using submit can improve the usability of the page:

After using submit, the page supports keyboard enter key operation, but many WEB software designers may not have noticed that submit is unified.

After using button, the page often does not support the enter key. Therefore, if you need to support the enter key, you must set up a submit. By default, the enter key operates on the first submit on the page.

Copy code

The code is as follows:

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

Copy code

The code is as follows:

After onClick is executed, the jump file is controlled in the js file. Submit requires onClick.

For example:

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

< form name="form1" method="post" action="http://www.css.com">

Button screenshot

3. Button HTML code

Copy code

The code is as follows:

< ;input type="button" name="Button" value="Button"

onClick="javascript:windows.location.href="your url"">

3. HTML submit and bottom buttons beautify css p layout

First of all, we prepare the button image for button beautification, and add the class style to the input submit or bottom button control, set the button background to the beautification image, and set the border to zero, width and height. 1. Beautify the html bottom button

1), picture materials

You can save the image for use

Beautify picture button material

2), corresponding to the complete HTML source code:

Copy code

The code is as follows:

http://www.css.com/"target="_blank">

onmouseout="this.style.backgroundPosition='lefttop'"/>

3）、bottom效果截图

bottom美化效果截图

2、对html submit按钮美化

1）、图片素材

可将图片另存为使用

按钮图片素材 鼠标右键另存为使用

2）、对应完整HTML源代码：

复制代码

代码如下:

http://www.css.com/" target="_blank">

onmouseout="this.style.backgroundPosition='left top'" value="提交" />

3）、submit按钮效果截图

html submit美化后效果截图