学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / HTML5(目的別) / <button>

HTML5  <button>

<button>タグは、ボタンを作成する際に使用します。
type属性はボタンの種類を指定する際に使用します。 type属性の値には、以下の3種類のいずれかを指定することができます。 初期値はtype="submit"です。
  • type="submit" …… フォーム入力内容を送信するサブミットボタン(初期値)
  • type="reset" …… フォーム入力内容をリセットするリセットボタン
  • type="button" …… 何もしない汎用的な押しボタン
form属性は、どのフォームと関連付けるかを指定する際に使用します。 <button>は初期値では直近の親要素となる<form>と関連付けられますが、 <form>のid属性の値と<button>のform属性の値を一致させることで、 ボタンを特定のフォームと関連付けることができます。 ボタンを任意の場所に配置できるので、ウェブアプリケーションなどを制作する際には便利かもしれません。
name属性は、<button>に名前を付ける際に使用します。 スクリプトで操作する際などに必要となる<button>のコントロール名です。
disabled属性は、ボタンを無効にする際に使用します。 disabled属性が指定されていると、ボタンを押せなくなりデータは送信されません。
autofocus属性は、ボタンへの自動フォーカスを指定する際に使用します。
formaction属性(送信先URL)・ formenctype属性(送信するデータの形式)・ formmethod属性(送信方法)・ formnovalidate属性(入力されたデータの妥当性を確認しない)・ formtarget属性(フォーム送信するターゲット先)は、 <form>の属性でも同様の指定をすることができますが、 <button>側でこれらの属性を指定すると、<form>の指定より優先されます。
formaction属性・formenctype属性・formmethod属性・formnovalidate属性・formtarget属性は、 type="submit"の場合にのみ指定することができます。
value属性は、<button>自身の値を指定する際に使用します。 例えば、<input>などの入力部品が無くても、 <button>の値を送信して何らかのフラグにすることができます。

■HTML4.01からHTML5へのバージョンアップによる変更点

button要素は、HTML5ではHTML4.01には無かった autofocus属性・form属性・formaction属性・formenctype属性・formmethod属性・formnovalidate属性・formtarget属性 が新たに追加されています。

■属性

autofocus属性
   自動フォーカスを指定する(autofocus)
disabled属性
   操作を無効にする(disabled)
form属性
   どのフォームと関連付けるかを<form>のid名で指定
formaction属性
   送信先URLを指定
formenctype属性
   送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)(初期値はapplication/x-www-form-urlencoded)
formmethod属性
   送信方法(HTTPメソッド)を指定(get・post)(初期値はget)
formnovalidate属性
   入力されたデータの妥当性を確認しない(formnovalidate)
formtarget属性
   フォーム送信するターゲット先を指定(_blank・_self・_parent・_top・任意のターゲット名)
name属性
   ボタンの名前を指定
type属性
   ボタンの種類を指定(submit・reset・button)(初期値はsubmit)
value属性
   ​値を指定

■使用例

HTMLソース
<button type=button onclick="alert('button要素は、この使用例のようにスクリプトと組み合わせて利用されることが多いようです。')">
button要素に関するワンポイントメモを表示
</button>
↓↓↓
ブラウザ上の表示
HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ