button
Summary
button要素はクリック可能なボタンを表示します。
Overview Table
button要素ではボタンの中にテキストや画像を設置することができます。button要素がdisableでなければ、ボタンを押すことができます。
デフォルトではボタンをクリックすることで、formのデータをサブミットします。type属性を変更することでボタンがクリックされた際の挙動を変更できます。
属性(HTML 4)
- name
- ボタンの名前です。これによってformをサブミットしたボタンを識別することができます。
type - ボタンのタイプを指定します。type属性を記述しない場合、
submitとなります。使用できるtypeは以下の3つです。submit: 紐付いたフォームのデータをサーバに送ります。これがデフォルト値となります。reset: 紐付いたフォームをリセットします。フィールドに初期値をセットします。button: これを指定すると、デフォルトでは何もしません。JavaScriptのclickイベントを設定すると非常に便利です。
- value
- ボタンの初期値です。
disabled - このBooleanの属性は、ユーザにボタンを操作できなくするためのものです。特にこの属性を指定しない場合、button要素は親要素の設定を継承します。例えば、fieldsetの中の要素にdisabled属性を設定したものがなければ、ボタンは有効となります。disabledを指定したボタンはクリックすることができません。
追加属性(HTML 5勧告候補)
- autofocus
この属性を"true"にすると、ユーザが別の入力をしない限り、ページをロードしたあとすぐにボタンがフォーカスされます。 ドキュメント内のform関連要素の中で1つだけがこの属性を指定できます。
formボタンに紐づくformを指定します。属性の値はformのid属性と一致していなければいけません。button要素をサブミットできるformデータを持ったフォームの子要素としていれば、この属性を指定せずに使用することができます。この属性によってform要素の子要素としてだけでなく、button要素をドキュメント内のどこにでも配置することができます。
formactionformからの情報を処理するプログラムのURIを指定します。紐付いたformのaction属性を上書きます。
formmethodformデータをサブミットするHTTP メソッドを指定します。
postまたはgetを指定できます。指定した場合、紐付いたformのmethod属性を上書きます。利用可能な値は以下のとおりです。post: formのbodyに含まれるデータをサーバに送信します。get: form属性のURIにセパレータとして”?”をつけてフォームのデータを追記し、作成されたURIをサーバに送信します。formが動的でなく、ASCII文字のみで構成されていればこのメソッドを使用できます。
- formnovalidate
ボタンがサブミットボタンであれば、formの値の妥当性を確認するかどうかを指定することができます。formの持つnovalidate属性を上書きます。
formtargetこの属性は送信されたフォームを受け取るウィンドウを指定します。以下の中から一つ指定することができます。
_self: 自身のフォームにレスポンスを表示します。これがデフォルト値となります。_blank: 名前の無いコンテキストとして新しいウインドウにレスポンスを読み込ませます。_parent: 親コンテキストにレスポンスを読み込ませます。親が存在しない場合、_selfを指定した時と同じ動作をします。_top: 一番上のコンテキストにレスポンスを読み込ませます。これは現在のコンテキストの一番祖先のコンテキストを指します。親が存在しない場合、_selfを指定した時と同じ動作をします。
これらの属性はname属性を除き、デフォルト値を持っているため、記載せずに利用することができます。
Examples
この例は<button>要素を使って、送信もリセットもしないクリック可能なボタンを表示しています。
<button name="myButton" type="button">クリックしてね</button>
この例ではフォームを送信するための<button>の使い方を紹介します。よくわからない場合は、form要素についてのページを読んでformの使い方について詳細な情報を学んでください。
<form action="dataReceiverURI">
<label for="name">氏名:</label>
<input id="name" type="text" name="user_name">
<button name="mySubmitButton">送信</button>
</form>
<button="reset">を使ってformをリセットする例を紹介します。よくわからない場合は、form要素についてのページを読んでformの使い方について詳細な情報を学んでください。
<form>
<label for="name">氏名:</label>
<input id="name" type="text" name="user_name" >
<button name="myResetButton">リセット</button>
</form>
Usage
一般的に、button要素はいつでもクリック可能であるべきです。
閉じタグは必須です。
ボタンには簡単な説明文をボタン内に記載するべきです。ボタンの中のテキストが空だとｍユーザはそのボタンがどんな動きをするのかわからなくなってしまいます。
サブミットボタンを装飾するときは<button>要素を使うよりもtype属性にsubmitを指定したinput要素のほうが簡単に実装することができます。
Notes
type属性のデフォルト値はtypeであるため、特に他のtypeを使用する必要がない場合は、typeを省略することができます。過去のブラウザではtypeの値がそれぞれ違いました。
Android用のFirefoxではデフォルトでbackground-imageがセットされており、すべてのbuttonにグラデーションがついていました。 これはbackground-image: noneを指定することで無効化することができます。
Firefoxは他のブラウザと異なり、デフォルトでbuttonのdisabledの状態がページ読み込みを挟んでも保持されます。 autocomplete属性をoffにするとこの機能を無効にすることができます。Mozilla Bug #654072をご覧ください。
クリックとフォーカス
ブラウザ/OS別 buttonをクリックした際、フォーカスが切り替わるかどうか
buttonをクリックしたときフォーカスされますか？
| デスクトップブラウザ | Windows 8.1 | OS X 10.9 |
|---|---|---|
| Firefox 30.0 | Yes | No (even with a tabindex) |
| Chrome 35 | Yes | Yes |
| Safari 7.0.5 | N/A | No (even with a tabindex) |
| Internet Explorer 11 | Yes | N/A |
| Presto (Opera 12) | Yes | ??? |
buttonをタップしたときフォーカスされますか？
| Mobile Browsers | iOS 7.1.2 | Android 4.4.4 |
|---|---|---|
| Safari Mobile | No (even with a tabindex) | N/A |
| Chrome 35 | ??? | Yes |
Related specifications
See also
Related articles
Document Structure
HTML
button
Other articles
Attributions
Mozilla Developer Network
: [<button> on MDN Article]Microsoft Developer Network: [Windows Internet Explorer API reference Article]