buttonタグとは?|ボタンを作成する

buttonタグとは?|ボタンを作成する
博士
以前、<input>タグを使ってボタンを作成する方法を解説したが、今回はまた違った方法でボタンを作る方法を解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<button>タグとは

 

<button>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素(リスト化された要素、送信可能要素、再関連付け可能要素、ラベル付け可能要素) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが期待される場所
内容 フレージング・コンテンツ(ただし、インタラクティブ・コンテンツを子要素とすることは不可)


 
 
<button>タグは、ボタンを作成する際に使用します。
<button>タグは<input>タグで作ったボタンとは異なり、内容を持つことができます。
 
 
博士
button要素の中に入れたテキストや画像をボタン上に表示できるということじゃな。
 
 

type属性

ボタンのタイプを指定します。
指定できる値は以下の通りです。

  • submit
    送信ボタンを作成します。
    この送信ボタンは、input要素の送信ボタンと同じ機能を持ちます。(デフォルト)
  • reset
    リセットボタンを作成します。
    このリセットボタンは、input要素のリセットボタンと同じ機能を持ちます。
  • button
    汎用的なボタンを作成します。
    この汎用ボタンは、input要素の汎用ボタンと同じ機能を持ちます。
  • menu
    ポップアップメニューを表示するためのボタンを作成します。
    type属性にこの値を指定する場合は、同時にmenu属性を指定しないといけません。

 
 

スポンサーリンク

formaction属性

フォームに入力されたデータを処理する、PHPやCGIなどのプログラムのURLを指定します。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたaction属性よりも優先されます。

formaction属性は、ボタンのタイプがtype=”submit”の場合に指定することができます。
 
 

formenctype属性

データを送信するときに、どのような形式にエンコードするのかを、MIMEタイプで指定します。
指定できる値は以下の3種類です。

  • application/x-www-form-urlencoded
    デフォルト
  • multipart/form-data
    ファイルを添付するようなフォーム
  • text/plain
    テキストのみのフォーム

 
 
formenctype属性がない場合は、デフォルトの「formenctype=”application/x-www-form-urlencoded”」として扱われます。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたenctype属性よりも優先されます。

formenctype属性は、ボタンのタイプがtype=”submit”の場合に指定することができます。
 
 

スポンサーリンク

formmethod属性

データをどのような方法で送信するかを指定します。
指定できる値は以下の2種類です。

  • get
    action属性で指定したURLの後に「?」とフォームのデータを追加して送信(デフォルト)
  • post
    フォームのデータのみを本文として送信

 
 
formmethod属性がない場合は、「get」として扱われます。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたmethod属性よりも優先されます。

formmethod属性は、ボタンのタイプがtype=”submit”の場合に指定することができます。
 
 

formnovalidate属性

フォームを送信するときに、入力されたデータが適切かどうかの検証を無効にすることができます。
こちらは、以下のいずれかの形式で指定します。

  • formnovalidate
  • formnovalidate=”formnovalidate”
  • formnovalidate=””

 
 
送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたnovalidate属性よりも優先されます。

formnovalidate属性は、ボタンのタイプがtype=”submit”の場合に指定することができます。
 
 

スポンサーリンク

formtarget属性

データの送信結果をどのウィンドウ(またはフレーム)に表示するかを指定できます。
指定できる値は以下の通りです。

_blank 新規のウィンドウ(フレーム)に表示
_self 現在のウィンドウ(フレーム)に表示
_parent 現在のウィンドウ(フレーム)に親があれば、その親ウィンドウ(フレーム)に表示
_top フレームを解除してウィンドウ全体に表示
ターゲット名 任意の名前を付けたウィンドウ(フレーム)で表示

 
 
送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたtarget属性よりも優先されます。

formtarget属性は、ボタンのタイプがtype=”submit”の場合に指定することができます。
 
 

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

  • autofocus
  • autofocus=”autofocus”
  • autofocus=””

 
 

スポンサーリンク

menu属性

そのボタンをどのポップアップメニューと関連付けるかを指定します。
menu属性の値には、対応するmenu要素に指定したID名を記述します。

この属性は、ボタンのタイプがtype=”menu”の場合に指定することができます。

 
 
博士
ボタンをクリックすると、ポップアップメニューが表示されるぞ。
 
 

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

スポンサーリンク

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 
博士
部品をform要素の外に配置する場合に使用するぞ。
 
 

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。
 
 

博士
以下のように、複数の送信ボタンを配置する場合などに使用するぞ。

 
 

スポンサーリンク

value属性

送信される値を指定します。
value属性の値は、そのボタンがクリックされた時に送信されます。
 
 

使用例

 
 

表示例


 
 

スポンサーリンク

まとめ

ボタンを作成する際は、<button>タグを使用します。
 
 

博士
<button>タグを使って、さまざまなボタンを作ってみよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








buttonタグとは?|ボタンを作成する