<button>タグについて

<button>とは？

<button>タグは、HTMLでボタンを作成するためのタグです。
フォームの送信やリセット、あるいはJavaScriptで処理を行うボタンとして使われます。

基本構文

<button type="種類">表示ラベル</button>

主なtype属性の種類

• submit：フォームの送信を実行（デフォルト）
• reset：フォームの入力内容をリセット
• button：単なるボタン（JavaScriptと連携して動作）

使用例

<form action="/submit" method="post">
  名前：<input type="text" name="username"><br>
  <button type="submit">送信</button>
  <button type="reset">リセット</button>
</form>
  

テキスト以外の内容を含める例

<button>タグはテキストだけでなく、画像やHTML要素を中に入れることができます。

<button type="button">
  <img src="icon.png" alt="アイコン" width="16"> 登録
</button>
  

JavaScriptとの連携例

<button type="button" onclick="alert('クリックされました！')">
  クリック
</button>
  

スタイル調整例（CSS）

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}
  

注意点

• type属性を省略すると、フォーム内ではsubmitとして動作する
• 送信ボタンとリセットボタンは用途に応じて明確に分ける
• 装飾はCSSで行うのが一般的

まとめ

• <button>はHTMLでボタンを作るタグ
• 主にsubmit・reset・buttonの3種がある
• 中にテキストや画像などの要素を入れることができる
• JavaScriptやCSSと組み合わせて活用される
• 終了タグが必要な要素