RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/html/elements/button/ja below:

button · WebPlatform Docs

button Summary

button要素はクリック可能なボタンを表示します。

Overview Table

DOM Interface: HTMLButtonElement

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要素をドキュメント内のどこにでも配置することができます。
formaction

formからの情報を処理するプログラムのURIを指定します。紐付いたformのaction属性を上書きます。
formmethod

formデータをサブミットする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>

View live example

この例ではフォームを送信するための<button>の使い方を紹介します。よくわからない場合は、form要素についてのページを読んでformの使い方について詳細な情報を学んでください。

<form action="dataReceiverURI">
  <label for="name">氏名:</label>
  <input id="name" type="text" name="user_name">
  <button name="mySubmitButton">送信</button>
</form>

View live example

<button="reset">を使ってformをリセットする例を紹介します。よくわからない場合は、form要素についてのページを読んでformの使い方について詳細な情報を学んでください。

<form>
  <label for="name">氏名:</label>
  <input id="name" type="text" name="user_name" >
  <button name="myResetButton">リセット</button>
</form>

View live example

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

HTML 5.1: W3C Working Draft
HTML 5: W3C Recommendation
HTML 4.01: W3C Recommendation

See also Related articles Document Structure

button
button
footer
head
main
nav
p
section

HTML