[HTML] なぜbutton要素にはtype属性を付ける必要があるのか

背景

HTMLの<button>要素は、ウェブページ上でクリック可能なボタンを実装するために広く利用されている。しかし、この要素を使用する際にはtype属性を明示的に指定することが推奨される。

type属性を省略した場合、ブラウザによっては意図しない挙動を引き起こす可能性がある。特にフォーム内で<button>要素を使用する場合、type属性を省略すると、デフォルトでtype="submit"として扱われることがある。これにより、ユーザーがボタンをクリックした際に、意図せずフォームが送信されてしまう問題が発生する。

button要素のtype属性

<button>要素のtype属性には、以下の3つの値を指定できる。

submit:
フォームを送信するためのボタン。フォーム内でこのタイプのボタンがクリックされると、ブラウザはフォームのaction属性に指定されたURLへデータを送信する。
reset:
フォームの入力内容を初期値にリセットするためのボタン。
button:
単なるクリック可能なボタン。デフォルトでは何もアクションを起こさず、JavaScriptでクリックイベントを定義して使用する。

type属性を省略した場合の挙動

HTMLの仕様では、<button>要素のtype属性を省略した場合のデフォルト値はsubmitと定められている。

The missing value default is the Submit Button state.
4.10.5 The button element

これにより、フォーム内でtype属性を持たない<button>要素は、すべて送信ボタンとして機能する。

問題が発生するケース

例えば、フォーム内に「プレビュー」や「キャンセル」といった、フォーム送信を意図しないボタンを配置する場合を考える。

<form action="/register" method="post">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username" />

  <!-- type属性を省略したボタン -->
  <button>プレビュー</button>

  <button type="submit">登録</button>
</form>

この例では、「プレビュー」ボタンにtype属性が指定されていないため、ブラウザはこれをtype="submit"として解釈する。その結果、ユーザーが「プレビュー」ボタンをクリックすると、意図せずフォームが送信されてしまう。

なぜtype属性の指定が重要なのか

type="button"を明示的に指定することで、<button>要素がフォームの送信をトリガーしない、単なる「ボタン」として機能することを保証できる。

<form action="/register" method="post">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username" />

  <!-- type="button"を明示的に指定 -->
  <button type="button">プレビュー</button>

  <button type="submit">登録</button>
</form>

このようにtype="button"を指定することで、「プレビュー」ボタンはフォームの送信をせず、JavaScriptで定義されたプレビュー機能のみを実行するようになる。

コンポーネント指向開発における仕様の重要性

モダンなフロントエンド開発、特にReactやVueなどのコンポーネント指向のフレームワークを使用する場合でも、このHTMLの仕様は同様に重要である。むしろ、コンポーネントとして再利用されることで、意図しない副作用を生む可能性が高まるため、より一層の注意が必要となる。

再利用可能なコンポーネントが引き起こす問題

例えば、プロジェクト内で汎用的な<Button>コンポーネントを作成し、type属性のデフォルト値を考慮せずに実装したとする。

// Button.jsx
// 内部の<button>にtypeが指定されていないコンポーネント
const Button = ({ children, onClick }) => {
  return <button onClick={onClick}>{children}</button>;
};

このコンポーネントは、最初はフォームの外で「モーダルを開く」などの目的で利用されていた。その場合、type属性がなくても問題は発生しない。

しかし、開発が進む中で、この汎用的な<Button>コンポーネントが、別の開発者によってフォーム内に配置されるケースが考えられる。

// UserForm.jsx
const UserForm = () => {
  const handleCancel = () => {
    // キャンセル処理
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 登録処理
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* ...form fields... */}

      {/* このボタンは意図せずsubmitとして機能してしまう */}
      <Button onClick={handleCancel}>キャンセル</Button>

      <button type="submit">登録</button>
    </form>
  );
};

上記の例では、<Button>コンポーネントで作成された「キャンセル」ボタンは、内部でレンダリングされる<button>要素にtype属性が指定されていないため、HTMLの仕様通りデフォルトのsubmitとして扱われる。その結果、ユーザーが「キャンセル」ボタンをクリックした際に、意図せずフォームが送信されてしまう。

防御的なコンポーネント設計

このような意図しない挙動を防ぐためには、コンポーネントを設計する段階で、HTMLの仕様を考慮し、type属性のデフォルト値をbuttonに設定することが「防御的なプログラミング」として非常に有効である。

// Button.jsx
const Button = ({ children, onClick, type = 'button' }) => {
  return (
    <button type={type} onClick={onClick}>
      {children}
    </button>
  );
};

このように、コンポーネントのデフォルトのtypeを'button'としておくことで、このコンポーネントがフォーム内で使用されたとしても、意図せずsubmitとして機能することを防げる。

フォーム送信を意図する場合は、呼び出し側で明示的にtype="submit"を指定すればよい。

<Button type="submit">登録</Button>

これにより、コンポーネントの再利用性が高まり、予期せぬ副作用のリスクを低減できる。

まとめ

<button>要素のtype属性を省略した場合のデフォルト挙動は、HTMLの仕様によって定められている。この仕様は、Reactのようなモダンなフレームワークでコンポーネントとして抽象化された場合でも変わらず影響を及ぼす。

意図しないフォーム送信といったバグを防ぎ、安全で予測可能なUIを構築するために、<button>要素を使用する際は、その役割に応じてtype属性（submit, reset, button）を常に明示的に指定することが重要である。