1. ホーム
  2. Web制作
  3. HTML/Xhtml

cssを使ったhtmlフォームコントロールの美化(フォームビューティフィケーション)の詳細例

2022-01-15 13:28:28

I. htmlの送信ボタンと下ボタンの基本的な構文構造

1. html送信ボタン

inputタグにtype="submit"を設定し、このフォームコントロールをボタンとして設定します。

送信ボタンのコードです。


/{br
コピーコード
コードは以下の通りです。
/{br

Screenshot of the 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.

The bottom button code.


/{br
Copy code
The code is as follows:
/{br

Screenshot of the bottom button.

Screenshot of html botton button effect

Second, html submit and bottom button difference

type=button is simply a button function

type=submit is to send the form

But for those working with WEB UI should note that using submit to improve page ease of use.

After using submit, the page supports keyboard enter key operation, and many WEB software designers, may not notice the submit unification.

After using the button, the page often does not support the enter key anymore. So you need to support the enter key, you must set a submit, the default enter key to the first submit of the page to operate.


/{br
Copy code
The code is as follows:
/{br

After executing onClick, go to action. can automatically submit without onClick. so that onclick can be left out here.


/{br
Copy code
The code is as follows:
/{br

执行完onClick,跳转文件在 js文件里控制。 提交需要onClick。

比如:

1,onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。

2,button代码


Copy code
The code is as follows:

http://www.css.com">


Button screenshot

3, button HTML code


Copy code
The code is as follows:
/{br
onClick="javascript:windows.location.href="your url"">

Three, html submit and bottom button beautification css p layout

First we prepare the button image for button beautification and add class style inside the input submit or bottom button control can be, set its button background to beautify the image, set the border to zero, width and height.

1. beautify the html bottom button

1), picture material

You can save the picture as a file using

Beautify image button material

2), corresponding to the full HTML source code.


复制代码
代码如下:

button按钮美化在线演示-www.css.com


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



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



3)、bottom效果截图

bottom美化效果截图

2、对html submit按钮美化

1)、图片素材

可将图片另存为使用

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

2)、对应完整HTML源代码:


复制代码
代码如下:




submit按钮美化 在线演示-www.css.com





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


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





3)、submit按钮效果截图

html submit美化后效果截图