cssを使ったhtmlフォームコントロールの美化（フォームビューティフィケーション）の詳細例
I. htmlの送信ボタンと下ボタンの基本的な構文構造
1. html送信ボタン
inputタグにtype="submit"を設定し、このフォームコントロールをボタンとして設定します。
送信ボタンのコードです。
/{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
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
After executing onClick, go to action. can automatically submit without onClick. so that onclick can be left out here.
/{br
执行完onClick，跳转文件在 js文件里控制。 提交需要onClick。
比如：
1，onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。
2，button代码
Button screenshot
3, button HTML code
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.
onmouseout="this.style.backgroundPosition='lefttop'"/>
3）、bottom效果截图
bottom美化效果截图
2、对html submit按钮美化
1）、图片素材
可将图片另存为使用
按钮图片素材 鼠标右键另存为使用
2）、对应完整HTML源代码：
3）、submit按钮效果截图
html submit美化后效果截图
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン