HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでプッシュボタンを追加する方法｜buttonタグの使い方と属性一覧

HTMLでプッシュボタンを追加するには、<button>タグを使用します。<button>タグは、HTMLフォーム内にボタンを作成するための要素です。また、同様のボタンは<input>タグを使って作成することもできます。

<button>タグの主な属性

<button>タグで利用できる主な属性は以下のとおりです。

属性値説明
autofocusAutofocusページの読み込み時に、このボタンが自動的に入力フォーカスを受け取ることを指定します。
disabledDisabledボタンを無効化（操作不可）にすることを指定します。
formform_idボタンが属するフォームのIDを指定します。
formactionURLフォームの送信先となるURLを指定します。
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		サーバーへ送信する際のフォームデータのエンコード方式を指定します。
formmethodget
post		フォームデータの送信方法（HTTPメソッド）を指定します。
formnovalidateFormnovalidateフォームデータの検証（バリデーション）を行わないことを指定します。
formtarget_blank
_self
_parent
_top		フォーム送信後のレスポンスを表示する場所を指定します。
name名前ボタンの名前を指定します。
typebutton
reset
submit		ボタンの種類を指定します。
valueテキストボタンの初期値を指定します。

使用例

以下のコードを実行すると、HTMLで<button>タグを使ったプッシュボタンを実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Button Tag</title>
   </head>
   <body>
      <form>
         <button name = "button" value = "OK" type = "button">My Button</button>
      </form>
   </body>
</html>

この例では、<form>要素の中に「My Button」というラベルの付いたボタンを配置しています。type属性に「button」を指定しているため、クリックしてもフォームは送信されません。JavaScriptと組み合わせれば、クリック時の動作を自由に定義できます。フォーム送信用のボタンにしたい場合は、「submit」を指定してください。

  1. HTMLページに動画を追加する方法を徹底解説！<video>タグの使い方

    HTMLページに動画を埋め込む基本的な方法 HTMLページに動画を表示したい場合は、<video>要素を使用します。これは、HTMLで動画を標準的な方法で埋め込むために用意されたタグです。 動画を正しく表示するためには、以下のポイントを押さえておきましょう。 height（高さ）とwidth（幅）を指定して、レイアウトが崩れないようにする <source>要素を使って動画ファイルの場所（src）を指定する type属性で動画の形式（MIMEタイプ）を明示する 記述例 実際のコードは以下のようになります。 <video width=640 height=360

  2. HTML Webページにオーディオプレーヤーを追加する方法

    HTMLでのオーディオ再生の基本Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。対応している音声フォーマットHTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。MP3（audio/mpeg）― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能Wav（audio/wav）― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがちOgg（audio/ogg）― オープンソースの