HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介

寻∝梦

Sep 03, 2018 pm 05:12 PM

button html

この記事では、HTML ボタンタグのスタイル設定と、HTML ボタンタグの美化スタイルを主に紹介します

まず、HTML のラベルスタイル設定について説明します。

通常のボタンの設定:

input要素のtype属性を「button」に設定して通常のボタンを作成します。ボタンに表示されるテキストは、value 属性の値です。value 属性が指定されていない場合は、空のボタンが作成されます。例:

<input type="button" value="立即购买">

ログイン後にコピー

HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介

効果は明らかで、これがデフォルトの通常ボタン設定です。

デフォルトでは、通常のボタンをクリックしても何も起こりません。したがって、通常のボタンのイベントを登録し、対応するハンドラー関数を手動で記述する必要があります。上記のボタンをクリックしたときにフォームを送信したい場合は、ボタンの onClick イベントを登録する必要があります。例:

<form name="buy" action="form.html" method="post">
    <button onClick="submitForm(buy)">立即购买</button>
</form>

ログイン後にコピー

ここでボタンをクリックすると、onClick イベントがトリガーされ、イベント処理関数 submitForm(buy) が呼び出されます。パラメーター buy は、処理されるフォームの name 属性の値です。ボタンをクリックした後にフォームを送信したい場合は、イベントハンドラー関数でフォームオブジェクトの submit() メソッドを呼び出すことができます。

function submitForm(f) {
    f.submit();  
}

ログイン後にコピー

これはデフォルトの設定です。次に、スタイルの設定を見てみましょう。 HTML ボタンタグの場合:

完全なコード例を示します:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
}
.div:active{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html>

ログイン後にコピー

この効果は図に示すとおりです:

HTMLボタンタグのスタイルを設定するにはどうすればよいですか? HTMLボタンタグのスタイルの紹介