CSS を使用して HTML フォームコントロールを美しくする詳細な例 (フォームの美化)

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

1. HTML送信ボタン

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

送信ボタンコード:

コードをコピー

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

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

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

2. HTML下部ボタン

入力タグで type="bottom" を設定すると、このフォームコントロールもボタンとして設定されます。

下部ボタンコード:

コードをコピー

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

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

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

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

type=buttonは単なるボタン機能です

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

ただし、WEB UI に取り組んでいる人は、submit を使用するとページの使いやすさが向上する可能性があることに注意する必要があります。

送信を使用した後、ページはキーボードの Enter キー操作をサポートしますが、多くの WEB ソフトウェア設計者は送信の統一性に気付かない場合があります。

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

コードをコピー

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

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

コードをコピー

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

onClick実行後、jsファイル内でジャンプファイルを制御します。送信にはonClickが必要です。

例えば：

1. onclick="form1.action='a.jsp';form1.submit();" これは送信機能を実装します。

2. ボタンコード

コードをコピー

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

<フォーム名="form1" メソッド="post" アクション="<a href="http://www.css.com">http://www.css.com</a>">
<input type="button" name="ボタン" value="ボタン" onClick="送信()">
</フォーム>

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

3. ボタンのHTMLコード

コードをコピー

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

3. HTML送信と下部ボタンの美化CSS pレイアウト

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

1. HTMLの下部ボタンを美しくする

1)画像素材

画像は次のように保存できます

画像を美しくするボタン素材

2) 対応する完全な HTML ソースコード:

コードをコピー

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

<!DOCTYPE html>
<html>
<ヘッド>
<title>ボタン美化オンラインデモ - www.css.com</title>
<スタイル>
html{幅:100%;高さ:100%;}
body{background:#fff;font-size:18px;font-family:"Arial","Tahoma","Microsoft YaHei","YaHei";
行の高さ:18px;パディング:0px;マージン:0px;テキスト配置:中央}
div{パディング:18px}
画像{境界線:0px;垂直位置揃え:中央;パディング:0;マージン:0}
input,button{font-family:"Arial","Tahoma","微软雅黑","雅黑";border:0;
垂直位置合わせ:中央;余白:8px;行の高さ:18px;フォントサイズ:18px}
.btn{幅:140px;高さ:36px;行の高さ:18px;フォントサイズ:18px;
背景:url("bg26.jpg")no-repeatlefttop;色:#FFF;パディング下部:4px}
</スタイル>
</head>
<本文>
<p>
<formid="form1"name="form1"method=""action="<a href="http://www.css.com/"target="_blank">http://www.css.com/"target="_blank</a>">
<div>
<inputtype="button"class="btn"value="button"onmouseover="this.style.backgroundPosition='left-36px'"
onmouseout="this.style.backgroundPosition='lefttop'"/>
</div>
</フォーム>
</p>
</本文>
</html>

3) 下部エフェクトのスクリーンショット

下部美化効果のスクリーンショット

2. HTML送信ボタンを美しくする

1)画像素材

画像は次のように保存できます

ボタン画像素材右クリックして名前を付けて保存して使用

2) 対応する完全な HTML ソースコード:

コードをコピー

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

<!DOCTYPE html>
<html>
<ヘッド>
<title>送信ボタンの美化オンラインデモ - www.css.com</title>

<スタイル>
html { 幅:100%; 高さ:100%; }
body { background:#fff; font-size:18px; font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";
行の高さ:18px; パディング:0; マージン:0; テキスト配置:中央; }
div { パディング:18px }
img { 境界線:0px; 垂直位置揃え:中央; パディング:0px; マージン:0px; }
input、button { font-family:"Arial", "Tahoma", "微软雅黑", "雅黑"; border:0;
垂直位置揃え:中央; 余白:8px; 行の高さ:18px; フォントサイズ:18px }
.btns { 幅:143px; 高さ:40px; 背景:url("bg11.jpg") 繰り返しなし左上; 色:#FFF; }
</スタイル>
</head>
<本文>
<p>
<フォーム id="form1" 名前="form1" メソッド="" アクション="<a href="http://www.css.com/">http://www.css.com/</a>" ターゲット="_blank">
<div>
<input type="submit" class="btns" onmouseover="this.style.backgroundPosition='left -40px'"
onmouseout="this.style.backgroundPosition='left top'" value="送信" />
</div>
</フォーム>
</p>
</本文>
</html>

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