このページについて
このページではHTMLで使う事ができるbuttonタグの機能と使い方などを解説しています。
buttonタグ
buttonタグはその名の通りボタンを定義するタグになります。一言でボタンと言っても、与える属性によって機能が大きく異なるのがこのタグの特徴と言えます。まずはbuttonの基本的な書き方から紹介します。
buttonタグの書き方
buttonタグは単体で使用する事もできますし、どこかしらの子要素として使う事もできます。単体で使う場合はこのように直接buttonを書くだけでOKです。書き方のみの紹介なので、この段階では属性は省略します。
<button>ボタン</button>このように囲んだテキストがそのままボタンに表示されることになります。大きさを変更するにはCSSでいじるのが手っ取り早いと思います。
<style>
.button1 {
padding: 30px 40px
}
.button2 {
padding: 20px 100px;
font-size:30px;
}
.button3 {
padding: 100px 200px;
margin: 3px 2px;
font-size: 40px;
}
</style>
<button class="button1">ボタン1</button>
<button class="button2">ボタン2</button>
<button class="button3">ボタン3</button>と書くとこんな感じでそれぞれのボタンの大きさを変更できます。
CSSについては別ページで詳しく解説する予定ですが、paddingは「定義した要素の周囲に空き要素を作る」的な機能を持っています。つまりボタン自体の大きさを指定しているわけではなく、中にあるボタン1やボタン2などの文字に合わせて周囲を形成しています。その結果として、ボタン全体の大きさが変化しているわけです。
そしてfont-sizeでフォントの大きさを指定してあげないと、ボタン1のようにかなり小さい文字になってしまうこともあります。
marginは「定義した要素の外周に指定した空き要素を作る」というものです。paddingとは逆なんですが、つまりはボタンの周囲に空き要素を作るものです。良い感じに調節してあげましょう。
buttonタグで使える属性
ここからはbuttonに機能を持たせる事ができる、属性についての解説になります。
| autofocus | ページを読み込んだときに、ボタンを選択状態にする属性 |
|---|---|
| disabled | ボタンを無効にする属性 |
| form | ボタンが属するフォームを指定する属性 |
| formaction | フォームが送信された場合に、データを送る先のURLを指定 これはtype=”subit”の時のみ使えます。 |
| formenctype | フォームのテキストが送信されたときにエンコードするタイプを指定 type=”submit”の時のみ使えます。 |
| formmethod | フォームデータを送る時のHTTPメソッド(get/post)を指定 type=”submit”の時のみ使えます。 |
| formnovalidate | フォームデータの送信時に検証をしない属性 type=”submit”の時のみ使えます。 |
| formtarget | フォームデータを送信したあとのページをどう開くかを指定 type=”submit”の時のみ使えます。 |
| name | ボタンの名前を指定する属性 |
| type | ボタンに与える機能を指定 |
| value | ボタンの初期値を設定 |
ざっと書くとこのようになります。それぞれ簡単な解説をしていきますが、autofocus属性とdisable属性はもうそのままですね。
form関連
form関連の属性が多い事が特徴ですが、コメント欄や掲示板など書き込み内容を投稿するときに使われるのがフォームというものになります。その中にはボタンがいくつかあったりしますが、そのときに使っているボタンがまさにこれです。
form属性は「そのボタンがどこのフォームに属性ているか」を指定する機能です。例えフォームとボタンが全く別の場所にあったとしても、ボタンは常に属しているフォームの機能を実行します。
例えばformタグとbuttonタグの位置が離れていて、間にJavaScriptで要素を挿入する用に空っぽのpタグがあったとします。この場合でもbuttonをクリックすればこのボタンが属しているフォームの機能の1つとして機能します。
このようにformとボタンの間に空っぽのpタグが入っていますが、実際に入力して送信を押すと
入力したものをそのまま取得・表示するスクリプトが機能し、フォームとボタンの間に表示してくれます。
type
type属性はそのボタンにどんな機能を持たせるかを選ぶ事ができます。選べる値は3つあります。
| button | クリック可能なボタン |
|---|---|
| submit | フォームデータを送信するボタン |
| reset | フォームに入力されたデータをリセットするボタン |
それぞれとてもわかりやすい機能ですね。
value
value属性は各ボタンの初期値を設定します。
<button value="初期値">ボタン</button>
ぱっと見はなんの変化もないようには見えますが、JavaScriptで実行されたときに「何も無かったらこのボタンの要素を取得」とかもできます。
まとめ
buttonはフォームに使われるタグなので色々とカスタマイズの幅があります。その反面、JavaScriptやらnameやらformタグやら色々な要素が混在していて最初は分かりにくいと思います。
とりあえず形だけ作って見て、後から色々と必要な機能を加えていくのが良いと思われます。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。