CSSを使ってHTMLフォームコントロールを美化する具体例（フォーム美化）_HTML/Xhtml_Webページ制作

1. HTML 送信ボタンと下部ボタンの基本構文構造

1. HTML 送信ボタン

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

送信ボタン コード:

コードをコピー

コードは次のとおりです:

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

送信ボタンの効果のスクリーンショット

HTML 送信ボタン効果のスクリーンショット

2. HTML 下部ボタン

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

下のボタンのコード:

コードをコピー

コードは次のとおりです:

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

下のボタンのスクリーンショット:

HTML ボタンのボタン効果のスクリーンショット

2. HTML 送信ボタンと下部ボタンの違い

type=button は単なるボタン関数です

type=submit はフォームを送信します

ただし、WEB UI に携わっている人は、submit を使用するとページの使いやすさが向上する可能性があることに注意してください。

submit を使用すると、ページはキーボードの Enter キー操作をサポートしますが、多くの WEB ソフトウェア設計者は submit が統一されていることを認識していないかもしれません。

ボタンを使用した後、ページが Enter キーをサポートしていないことがよくあります。したがって、Enter キーをサポートする必要がある場合は、デフォルトで、ページの最初の送信時に Enter キーが機能するように設定する必要があります。

コードをコピー

コードは次のとおりです:

onClick 実行後、アクションに移ります。 onClick なしで自動的に送信できます。したがって、ここでは onclick は必要ありません。

コードをコピー

コードは次のとおりです:

onClick実行後のジャンプファイルはjsファイルで管理されます。送信には onClick が必要です。

例:

1, onclick="form1.action='a.jsp';form1.submit();" これによりsubmit関数が実現されます。

< フォーム名="form1" メソッド="post" アクション="http://www.css.com">

ボタンのスクリーンショット

3. ボタンの HTML コード

コードをコピーします

コードは次のとおりです:

onClick="javascript:windows.location.href="あなたの URL"">

3. HTML 送信ボタンと下部ボタンにより CSS P レイアウトが美しくなります

まず、ボタン美化用のボタン画像を準備し、入力送信または下部ボタンコントロールにクラススタイルを追加し、ボタンの背景を美化画像に設定し、境界線をゼロ、幅、高さに設定します。 1. HTML の下部ボタンを美しくします

1)、写真素材

画像を保存して使用できます

美化写真ボタン素材

2)、完全な HTML ソース コードに対応します:

コードをコピーします

コードは次のとおりです:

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

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

< /form>

3）、下效果截图

下美化效果截图

2、对html submit按钮美化

1）、写真素材

画像ファイルを保存して使用することができます

按钮写真素材 ネズミ标右键另使用用

2）、对应完整HTML源代：

复制代

代码如下：

html {幅:100%;高さ:100%;
ボディ{背景:#fff;フォントサイズ:18px; font-family:"Arial"、"Tahoma"、"微软雅黑"、"雅黑";
line-height:18px;パディング:0;マージン:0;テキスト整列:中央; }
div {padding:18px }
img { border:0px;垂直配置:中央;パディング:0px;マージン:0px; }
input, button { font-family:"Arial", "Tahoma", "微软雅黑", "雅黑"; border:0;
垂直整列:中央;マージン:8px;行の高さ:18px; font-size:18px }
.btns { width:143px;高さ:40ピクセル;背景:url("bg11.jpg") 繰り返しなし、左上;色:#FFF; }

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

onmouseout="this.style.backgroundPosition='左上'" value= "提交" />

3）、送信按钮效果截图

html submit美化后效果截图