HTMLでボタンを設置するタグの使い方基本編+修飾・使い分け法

HTMLにフォームを設置したり、クリックできる要素を追加したい!そんな時に登場するのが、今回ご紹介する<button>タグ!導入するだけで、より汎用性のあるページに仕上がりますが、意外と使い方が難しいという点も…

buttonタグを導入するだけでなく装飾もしたい!

今回は、buttonタグの

・基本的な使い方
・buttonタグの装飾方法

・buttonクリック時に入力内容を検証する方法

について説明します。

buttonタグとは

buttonタグの読み方

buttonタグはそのまま「ボタンタグ」と読みます。

buttonタグの説明

buttonタグはHTML内で<button></button>と記載することで搭載でき、実際にボタン部分をクリックすることができます。name属性でボタンごとに名前を付けられ、CSSによってボタンの形を変化させられます。

buttonタグで利用できる属性

buttonタグでは以下の属性を使うことができます。

属性 説明
type属性 ボタンの種類を指定するための属性(type=””で指定)

・submit フォーム入力内容を送信する
・reset 入力内容のリセット
・button 何も動作がないボタン
name属性 ボタンの名前を指定する
value属性 ボタンの初期値の設定する
autofocus属性 ページ読み込み時に、入力フォーカスを持つべきボタンであることを表す
disabled属性 ボタン押下時の動作を無効化する
form属性 ボタンとform要素(ウェブサーバにデータを送信する)を結びつける
formaction属性 ボタン押下で送信された情報を処理するURL
formenctype属性 フォームデータのエンコード方法を指定する(送信ボタンのときのみ)
formmethod属性 ブラウザがフォームのデータを送信するための
formnovalidate属性 データ送信時に入力内容を検証しない(送信ボタンのときのみ)
formtarget属性 フォームの送信後の動作を表示する場所を示す(送信ボタンのときのみ)
注意
type、name、value、disabled以外の属性はHTML5からの登場となります。HTML5が対応していないブラウザでは動作しない属性もあるので、十分注意してください。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12~
Firefox  1~
Internet Explorer  4~
Opera  6~
Safari  3~
スマートフォン用ブラウザ 対応状況
Android webview 対応あり
Android版Chrome 対応あり
Android版Firefox  対応あり
Android 版 Opera  対応あり
iOS版Safari  対応あり
Samsung Internet  対応あり

buttonタグの基本的な使い方

buttonタグの使い方

「button1」という名前の、何の動作もないボタンを設置しました。typeでボタン押下時の動作を指定し、nameでボタンの名前を付けています。nameはなくても動作しますが、ボタンが複数ある場合は判別し辛くなるため、できるだけnameかclassで名前を付けるようにしましょう。

See the Pen
KKMQZER
by rabbittyu (@rabbittyu)
on CodePen.

buttonタグの応用的な使い方

ボタンの基本的な設置方法は理解できたと思うので、今度はボタンを装飾したり、サイズを大きくして押しやすくしたり、少し変化を加えてみましょう!

CSSでボタンを装飾する

普通にボタンを設置した状態では、白色のデフォルトのボタンが設置されるだけです。しかしCSSを使用することで、ボタンを簡単に装飾できます。ここではボタンの名前をnameではなく、classで付けています。

paddingで余白を設定し、backgroundでボタンの色を赤色に、border-radiusでボタンの角を少し丸くしています。またカーソルがボタンの上にいるときの状態は:hoverで設定し、クリック時に沈み込むように:activeで設定しました。

ページの色に合わせてボタンを装飾するのが良いでしょう。

See the Pen
gOMvvbW
by rabbittyu (@rabbittyu)
on CodePen.

入力内容を検証する

他のタグも使いますが、formタグの中にinputタグでテキストエリアを設置し、その横にbuttonタグを使ってボタンを設置しました。buttonの種類はtype=”submit”としているので、フォームの送信用ボタンとなります。

何も入れずにクリックすると、「このフィールドを入力してください」という警告が表示されます。これはinputタグの中に『required』を入れているから!これによって未入力のままフォームが送信されるのを防ぐことができます。

See the Pen
mdEXXwM
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はbuttonタグについて解説しました。

  • <button></button>タグでページ内にボタンを設置できる
  • buttonタグはCSSで色や形、クリック時の状態を変えることができる
  • buttonタグはフォームの送信用、クリックするだけなど、押下時の動作を様々に定義することができる

以上がbuttonタグの基本的な使い方になります。ぜひbuttonタグの使い方を覚えて、フォーム送信やアンケートが取れるページを作成してみてくださいね!

参考文献:
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button
http://www.htmq.com/html5/button.shtml
https://code-kitchen.dev/html/button/
https://saruwakakun.com/html-css/reference/buttons