HTMLにフォームを設置したり、クリックできる要素を追加したい！そんな時に登場するのが、今回ご紹介する<button>タグ！導入するだけで、より汎用性のあるページに仕上がりますが、意外と使い方が難しいという点も…
buttonタグを導入するだけでなく装飾もしたい！
今回は、buttonタグの
・基本的な使い方
・buttonタグの装飾方法
・buttonクリック時に入力内容を検証する方法
について説明します。
目次
buttonタグはそのまま「ボタンタグ」と読みます。
buttonタグはHTML内で<button></button>と記載することで搭載でき、実際にボタン部分をクリックすることができます。name属性でボタンごとに名前を付けられ、CSSによってボタンの形を変化させられます。
buttonタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| type属性 | ボタンの種類を指定するための属性(type=””で指定)
・submit フォーム入力内容を送信する
・reset 入力内容のリセット ・button 何も動作がないボタン |
| name属性 | ボタンの名前を指定する |
| value属性 | ボタンの初期値の設定する |
| autofocus属性 | ページ読み込み時に、入力フォーカスを持つべきボタンであることを表す |
| disabled属性 | ボタン押下時の動作を無効化する |
| form属性 | ボタンとform要素（ウェブサーバにデータを送信する）を結びつける |
| formaction属性 | ボタン押下で送信された情報を処理するURL |
| formenctype属性 | フォームデータのエンコード方法を指定する（送信ボタンのときのみ） |
| formmethod属性 | ブラウザがフォームのデータを送信するための |
| formnovalidate属性 | データ送信時に入力内容を検証しない（送信ボタンのときのみ） |
| formtarget属性 | フォームの送信後の動作を表示する場所を示す（送信ボタンのときのみ） |
対応ブラウザ
対応ブラウザは以下の通りです。
| 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 | 対応あり |
「button1」という名前の、何の動作もないボタンを設置しました。typeでボタン押下時の動作を指定し、nameでボタンの名前を付けています。nameはなくても動作しますが、ボタンが複数ある場合は判別し辛くなるため、できるだけnameかclassで名前を付けるようにしましょう。
See the Pen
KKMQZER by rabbittyu (@rabbittyu)
on CodePen.
ボタンの基本的な設置方法は理解できたと思うので、今度はボタンを装飾したり、サイズを大きくして押しやすくしたり、少し変化を加えてみましょう！
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
