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

HTMLのbutton要素におけるtype属性の使い方を解説

<button>要素のtype属性は、ボタンの種類（タイプ）を指定するために使用されます。ここでは、type属性の基本的な構文から、実際のフォームでの使い方まで、サンプルコード付きでわかりやすく解説します。

type属性の基本構文

type属性の書き方は以下の通りです。

<button type="button|submit|reset">

type属性には、次の3つの値を指定できます。

  • button：クリック可能な汎用ボタン。JavaScriptなどと組み合わせて使われます。
  • submit：送信ボタン。クリックするとフォームのデータを送信します。
  • reset：リセットボタン。クリックするとフォーム内の入力内容を初期値に戻します。

type属性の実装例

それでは、HTMLでbutton要素のtype属性を実装した具体例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Investor Information</h2>
<p>Give the information about the investor interested in funding:</p>
<form action="" method="get">
   ID: <input type="number"><br>
   Investor: <input type="text"><br>
   Funds: <input type="number"><br>
   Email: <input type="email"><br>
   DOB: <input type="date"><br><br>
   <button type="submit" value="Submit">Submit</button>
   <button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>

このコードを実行すると、「Submit（送信）」ボタンと「Reset（リセット）」ボタンが配置されたフォームが表示されます。

コードの解説

上記の例では、フォーム要素と2つのボタンから構成されるフォームを作成しています。

<form action="" method="get">
   ID: <input type="number"><br>
   Investor: <input type="text"><br>
   Funds: <input type="number"><br>
   Email: <input type="email"><br>
   DOB: <input type="date"><br><br>
   <button type="submit" value="Submit">Submit</button>
   <button type="reset" value="Reset">Reset</button>
</form>

ポイントとなるのは、ボタンのtype属性の指定部分です。「submit」でフォームデータを送信するボタンを、「reset」で入力内容を初期化するボタンを作成しています。

<button type="submit" value="Submit">
   Submit
</button>
<button type="reset" value="Reset">
   Reset
</button>

まとめ

button要素のtype属性を使い分けることで、送信・リセット・汎用といった目的に応じたボタンを簡単に作成できます。特に

タグ内では、type属性の指定を忘れるとブラウザによって既定の動作が異なる場合があるため、意図した動作を確実にするためにも明示的に指定することをおすすめします。

  1. HTMLのlang属性とは？使い方と言語コードの指定方法を解説

    HTMLのlang属性は、そのHTML要素の内容がどの言語で書かれているかを定義するための属性です。lang属性はグローバル属性に分類されるため、すべてのHTML要素に対して自由に指定することができます。検索エンジン最適化（SEO）やスクリーンリーダーによる音声読み上げの正確性向上にも役立つ重要な属性なので、適切な言語コードを設定しておきましょう。基本構文lang属性の基本的な記述方法は以下のとおりです。<タグ名 lang=言語コード></タグ名>「言語コード」の部分には、ISO 639-1で規定されている言語コードを指定します。代表的な例としては、日本語ならja、英語

  2. HTMLのreversed属性とは？ol要素でリストを降順に表示する方法

    HTMLのreversed属性は、<ol>（順序付きリスト）要素に指定することで、リスト項目の番号を降順（大きい数字から小さい数字へ）で表示させるためのブール型属性です。通常、順序付きリストは「1」から始まる昇順で番号が振られますが、reversed属性を追加するだけで、マークアップをほとんど変更せずに逆順のリストを簡単に作成できます。 構文 reversed属性の基本的な構文は以下のとおりです。 <ol reversed></ol> 値を指定する必要はなく、属性名だけを記述すれば有効になります。それでは、実際にreversed属性を使用した具体例を見てみま