HTML（HyperText Markup Language）では、ユーザーインターフェイスを構築するために多くの要素があります。
その中でも今回は独特の属性があるbutton要素の紹介をしたいと思います。
普段何気なく使用していても基礎の部分は忘れてしまっていたりしますので、是非ご存じの方もこの機会に見直していただけたらと思います。
説明
button要素はクリック可能なボタンを定義するために使用されます。
この要素はフォームを送信したり、JavaScript関数を実行したりするために使用されます。
基本的な使用例
<button>クリック</button>この例では、シンプルなボタンが作成されます。
type属性の役割
button要素にはtype属性を設定することで、その動作を制御することができます。
type属性には主に以下の3つの値があります：
- submit
- button
- reset
type="submit"
説明
デフォルトでbutton要素のtype属性が指定されていない場合この値が適用されます。
submitボタンはフォームを送信するために使用されます。
使用例
<form action="/submit" method="post">
<button type="submit">送信</button>
</form>このボタンをクリックすると、フォームデータが送信されます。
type="button"
説明
buttonは、ボタンとしての機能のみを持ち、特定の動作を持ちません。JavaScriptを使用して、カスタムの動作を定義することができます。
使用例
<button type="button" onclick="alert('ボタンがクリックされました')">クリック</button>このボタンをクリックするとJavaScriptのalert関数が実行されます。
type="reset"
説明
resetボタンは、フォームのすべての入力フィールドをデフォルトの値にリセットするために使用されます。
使用例
<form>
<input type="text" name="name" value="名前">
<button type="reset">リセット</button>
</form>このボタンをクリックすると、フォームの入力フィールドがリセットされます。
button要素にtype属性を指定しないとデフォルトでtype="submit"として扱われます。
これは、button要素がフォーム内に含まれている場合ボタンをクリックするとフォームが送信されることを意味します。
例
<form action="/submit" method="post">
<button>送信</button>
</form>この例では、button要素にtype属性が指定されていないため、デフォルトでsubmitボタンとして扱われ、フォームが送信されます。
まとめ
button要素のtype属性は、ボタンの動作を制御するために非常に重要です。
type属性を適切に使用することでフォームの送信、カスタム動作の定義フォームのリセットなど様々な機能を持つボタンを作成することができます。
特に、button要素にtype属性を指定しない場合、デフォルトでsubmitとして扱われるためフォーム内でのボタンの動作には注意が必要です。
ウェブデザインの技能検定においても、このようなHTMLの基本的な特性を理解し、適切に使いこなすことが求められます。
