• HOME > 
  • HTML > 
  • HTMLのbutton要素(タグ)の使い方【inputのbu...

HTMLのbutton要素(タグ)の使い方【inputのbuttonやsubmitとの違い】

投稿日:

button要素とは?

button要素はクリック可能なボタンを設置できる要素です。タグを記述するだけで自動的にデザインされたボタン(ブラウザごとにデザインは異なります)が表示できます。用途は様々ですが、主にWebサイトの入力フォームの送信ボタンなどに利用されます。

button要素の例

button要素の書き方

button要素は開始タグと閉じタグの中に、表示させたいテキストや画像・アイコンを記述して表示させます。

button要素の書き方

HTML

<button type="button">送信</button>
<button type="button"><img src="sample_icon.png" alt="アイコンのサンプル">送信</button>
<button type="button">送信<i class="fas fa-angle-double-right"></i></button>

プレビュー

type属性の種類と使い分け

button要素を正しく使用するためにはtype属性を設定する必要があります。

使用するボタンの用途を次の3種類の内から選択してtype属性で指定します。

  • submit
  • reset
  • button
type属性の書き方

送信【type="submit"】

type属性に「submit」を指定するとフォームの入力内容の送信を実行させることができます。

なお、type属性を指定しない(省略する)と自動的にsubmitになります。

HTML

<form>
    Email:<input type="email"><br>
    TEL:<input type="tel"><br>
    <button type="submit">送信</button>
</form>

プレビュー

Email:
TEL:

リセット【type="reset"】

type属性に「reset」を指定するとフォームの入力内容を空にリセットさせることができます。

HTML

<form>
    Email:<input type="email"><br>
    TEL:<input type="tel"><br>
    <button type="reset">リセット</button>
</form>

プレビュー

Email:
TEL:

ボタン【type="button"】

前述の通り、type属性を指定しないと自動的にsubmitになってしまいますので、form内に送信ボタン以外の複数のボタンを設置したときに意図せず送信が実行されてしまうことになります。

そのような場合にはtype属性に「button」を指定すれば機能を持たないボタンを作成できます。

HTML

<form>
    Email:<input type="email"><br>
    TEL:<input type="tel"><br>
    <button type="button">ただのボタン</button>
</form>

プレビュー

Email:
TEL:

formタグの外に記述して使用する

submitとresetは、formタグの中に記述しないと機能しないので注意が必要です。

これは、buttonをformに紐づけることができなくなってしまうためです。

HTML

<form>
    Email:<input type="email"><br>
    TEL:<input type="tel"><br>
</form>
<button type="reset">リセット</button>

正しく機能しない例

Email:
TEL:

もしformタグの外にbuttonを設置したい場合は、まずform側に任意のIDを付与し、次にbutton側のform属性でIDを指定することで両者を紐づけることができます。

HTML

<form id="myForm">←IDを付与
    Email:<input type="email"><br>
    TEL:<input type="tel"><br>
</form>
<button type="reset" form="myForm">リセット</button>←form属性で紐づけ

プレビュー

Email:
TEL:

inputのボタンとbuttonタグの違い

HTMLでフォームを作成する際に使用するinput要素の「input="button"」や「input="submit"」がでもbutton要素とまったく同じ機能と見た目のボタンを作成することができます。

HTML

<form id="myForm">
    Email:<input type="email"><br>
    TEL:<input type="tel"><br>
    <input type="submit" value="送信">
</form>

inputタグによる送信ボタン

Email:
TEL:

ボタンを作る際にはどちらのタグを使っても問題はありません。用途が重複しているタグが存在する理由は、昔からあるinput要素に対して、buttonタグは後から新しく追加された比較的新しい要素であるためです。

buttonタグは疑似要素が使用できる

button要素には閉じタグが存在するため、画像を子要素にしたり、疑似要素が利用できるという点が大きな違いです。

リンク先のサムネイル
CSSの疑似要素・疑似クラスの種類と使い方

疑似要素・疑似クラスは、どちらも元となる(基準となる)要素に対して追加のスタイルを指定したり装飾を行うために使用するCSSのセレクタ―です。どちらもHTMLのソースコードには追加の記述やマークアップの必要がなく...【もっと読む】

buttonを無効化させる【disabled属性】

Webサイトにおいてボタンを設置する際には、条件によってクリックできないようにしたい場合もあります。

buttonタグでは、disabled属性を設定するとボタンの色が変わり、クリックできないようにすることが可能です。

Javascriptを使ってユーザーの行動に応じて動的にボタンを無効化させるといった利用方法がよく用いられます。

disabledの記述方法

HTML

<button disabled>送信</button>

プレビュー

リンクを設定して遷移させる【onclick属性】

onclick属性を使うと、ユーザーがボタンをクリックしたときに任意の処理を実行させるように設定できます。

これを利用すれば、「ボタンをクリックしたら特定のURLへ遷移させる」というリンク付きボタンを作ることが可能です。

次のようにlocation.hrefでリンク先のURLを指定します。

HTML

<button onclick='location.href="リンク先のURL"'>開く</button>

プレビュー

リンクにはaタグを使用するのが一般的です。aタグの場合、ボタンの形状にするにはCSSを使わなくてはなりませんが、buttonタグにおいてもデフォルトで使用することは少ないため、CSSのスタイル調整にかかる手間は同じです。リンクの設置にあえてbuttonタグを用いる必要はないと言えるでしょう。

CSSでデザインをカスタマイズする

button要素にはブラウザのデフォルトのスタイルが適用されるので、ボタンの見た目はブラウザごとに異なります。

オリジナルのボタンデザインにしたり、ブラウザが異なっても統一されたデザインにするためにはCSSを編集します。

プレビュー

CSS

.button1{
    display:block;
    width:100%;
    max-width: 250px;
    padding:10px 0;
    border:none;
    font-weight:bold;
    background:#d40000;
    color:#fff;
    font-size:1em;
}
.button2{
    display:block;
    width:100%;
    max-width: 250px;
    padding:10px 0;
    border:none;
    border-radius:50px;
    font-weight:bold;
    background:#0044dd;
    color:#fff;
    font-size:1em;
}
.button3{
    display:block;
    width:100%;
    max-width: 250px;
    padding:10px 0;
    border:solid 2px #00dd44;
    font-weight:bold;
    background:transparent;
    color:#00dd44;
    font-size:1em;
}
.button4{
    display:block;
    width:100%;
    max-width: 250px;
    padding:10px 0;
    border:outset 5px #333;
    border-radius:50px;
    font-weight:bold;
    background:linear-gradient(-35deg,#333 0%,#666 60%,#fff 100%);
    color:#fff;
    font-size:1em;
}
.button5{
    display:block;
    width:100%;
    max-width: 250px;
    padding:10px 0;
    border:outset 2px #dd4e02;
    border-radius:5px;
    font-weight:bold;
    background:linear-gradient(-35deg,#dd4e02 0%,#dd4e02 60%,#fff 100%);
    color:#fff;
    font-size:1em;
    box-shadow:3px 3px 3px #999;
}
button:hover{/*マウスオーバーされた時*/
    cursor: pointer;
    opacity:.8;
}
リンク先のサムネイル
CSS入門編-CSSの役割と使い方を解説

CSSで装飾したい対象のHTMLを「セレクタ」、装飾する項目を「プロパティ」と呼びます。プロパティに対して「値」を指定することで対象のHTMLの装飾を変更します。...【もっと読む】

まとめ

以上がHTMLのbutton要素の使い方です。

ボタンを作るときにbuttonタグとinputタグのどちらを使うべきか迷いますが、疑似要素が利用できるという点ではデザインの融通が効きやすくなるのでbutton要素の方が優位かもしれません。

関連する記事

サムネイル

HTMLのpタグ(段落)の使い方【改行タグbrとの違い】

2023年03月15日
pタグの「p」は段落・節を意味するParagraphの頭文字で、ひとかたまりの文章であることを指定するためのタグです。開始タグと終了タグからなる要素で、pタグを使用して段落を分けると前後の要素と改行されます。
サムネイル

Google Chromeのデベロッパーツールの使い方【画像……

2022年01月15日
最終更新日:2022年02月12日
デベロッパーツールとはWEBブラウザであるGoogle Chromeにはじめから備わっている機能の一つです。閲覧中のWEBサイトのページを構成しているHTMLやCSSといったソースコードを確認することができます
サムネイル

HTMLとCSSだけでアコーディオンメニューを作る方法【初心……

2020年12月18日
最終更新日:2022年07月05日
アコーディオンメニューとは、メニューの項目名をクリックすると非表示にされていたコンテンツが項目名の下に広がって表示される機能のことです。HTMLとCSSだけで簡単に実装することが可能です。
サムネイル

HTMLでスクロールバーを表示させる方法

2020年12月17日
最終更新日:2022年01月28日
HTMLで表示させるスクロールバーとは? HTMLとCSSを用いることでサイト内のコンテンツを一部だけ見えるようにし隠れた部分をスクロールして見るようにすること […]
サムネイル

HTMLにGoogle MAP(グーグルマップ)の埋め込みを……

2020年12月16日
最終更新日:2022年01月28日
Google MAPとは? 埋め込みとは? 自身のサイトのページの中に特定の場所を示したGoogle MAPを表示させることが出来ます。 簡単かつ無料なうえ、ペ […]
サムネイル

HTMLのtable(テーブル)タグの使い方

2020年12月15日
最終更新日:2022年01月27日
<table>タグとは? WEBサイトに表を表示させたい場合にHTMLの<table>(テーブル)タグを使用します。 単に表の作成に利用 […]
サムネイル

HTMLのformタグで入力フォームを作る方法

2020年12月14日
最終更新日:2022年01月28日
<form>タグとは? 「フォームで入力した内容を送信する」機能をもつHTMLタグです。 問い合わせフォームは、別に集計してメールを送る処理を記述し […]