button 要素の form 属性を活用する

button 要素には form という属性を指定できる。

この属性を使うと、対象の button 要素に form 要素を明示的に紐づけられる。省略した場合は button 要素の祖先の form 要素が自動で関連付けられるので、通常は省略されることが多い。

どういうときに有効かというと、form 要素の外側に送信ボタンがある場合だ。

レイアウトやデザインの要件によっては、以下のように form と button を分けざるを得ないこともある。

const Page: React.FC = () => {
  reutrn (
    <>
      <form method="POST">
        {/* 各種入力欄 */}
      </form>
      {/* ページ下部に固定する */}
      <FixedBottom> 
        <button type="submit">送信</button>
      </FixedBottom>
    </>
  )
}

この場合、form 要素に id 属性を指定し、button 要素の form 属性に同じ値を指定すれば、フォーム外の submit ボタンをクリックしても送信処理を実行できる。

const Page: React.FC = () => {
  const formId = useId()

  reutrn (
    <>
      {/*    id 属性を追加 ↓ */}
        <form method="POST" id={formId}>
          {/* 各種入力欄 */}
        </form>
        <FixedBottom>
          {/*    form 属性を追加 ↓ */}
          <button type="submit" form={formId}>送信</button>
        </FixedBottom>
    </>
  )
}

React v19 のサーバー関数や Remix（React Router v7）を使っていると、通常のフォーム送信で処理するケースが増える。今後使うことも増えそうなので、メモがてら書いておく。

Resources

No comments yet

Continue reading