プログラミング

button要素でフォームにボタンを設置する【HTML】

フォームなどでボタンを設置するときに使うのがbutton要素。

button要素でマークアップしたテキストや画像をボタンとして使うことができます。

button要素で使える属性

button要素では以下のような属性を使うことができます。

  • autofocus(オート・フォーカス)
  • disabled(ディスエーブルド)
  • form(フォーム)
  • formaction(フォーム・アクション)
  • formenctype(フォーム・エンコード・タイプ)
  • formmethod(フォーム・メソッド)
  • formnovalidate(フォーム・ノー・ヴァリデート)
  • formtarget(フォーム・ターゲット)
  • name(ネーム)
  • type(タイプ)
  • value(バリュー)

autofocus(オート・フォーカス)

autofocus属性を指定することで、Webページが読み込まれたら、autofocus属性が指定されたボタンにフォーカスが自動的に移動されます。

autofocus属性は値を必要としない論理属性です。

disabled(ディスエーブルド)

disabled属性を指定すると、ボタンが無効になります。

disabled属性は論理属性です。

form(フォーム)

form属性に任意のform要素につけたid属性値を指定することで、そのフォームとこのform属性を持つボタンを関連づけることができます。

ブラウザが対応していれば、form要素の外にボタンがあっても送信などが行えます。

formaction(フォーム・アクション)

formaction属性に値を指定することで、関連づけられているform要素のaction属性値を上書きすることができます。

formenctype(フォーム・エンコード・タイプ)

formenctype属性に値を指定することで、関連づけられているform要素のenctype属性値を上書きすることができます。

formmethod(フォーム・メソッド)

formmethod属性に値を指定することで、関連づけられているform要素のmethod属性値を上書きすることができます。

formnovalidate(フォーム・ノー・ヴァリデート)

formnovalidate属性に値を指定することで、関連づけられているform要素のnovalidate属性値を上書きすることができます。

formtarget(フォーム・ターゲット)

formtarget属性に値を指定することで、関連づけられているform要素のtarget属性値を上書きすることができます。

name(ネーム)

name属性で、データが送信される際のクエリ名を指定することができます。

type(タイプ)

表示されたボタンの操作が送信なのかリセットなのか、以下の値で指定できます。

submit 送信ボタン
reset リセットボタン
button 何もしない

submitが初期値として指定されていて、buttonはスクリプトを実行するボタンなどに使われます。

value(バリュー)

value属性は送信されるクエリ値を指定することができます。

関連記事
form要素(フォーム)とは?使用できる属性は?【HTML】

Leave a Comment