【フォーム制作】バックエンドからの要望に基づいたコードの書き方

はじめに

弊社ではフロントエンドとバックエンドが分かれているので、組み込みがあるときにはHTMLデータを共有して制作してもらいます。
今回は備忘録も兼ねて、実際にあったバックエンドからの要望に基づいたコードの書き方をまとめました。
あくまで弊社バックエンドとのやりとりに基づいているので、他社様だとやり方が違う部分があると思いますが、何か少しでも参考になる部分がありますと幸いです。

コードの書き方

nameやvalueは基本的に空でOK

バックエンド側で管理しているデータベースの値が入るので、基本的に場所だけ用意すればOKです。
動作確認等でnameを設定する必要がある場合は、その旨をコメントで残すようにしています。

index.html

<form>
  <select name="">
    <option value="">オプション1</option>
    <option value="">オプション2</option>
    <option value="">オプション3</option>
  </select>
  
  // 動作確認のためにnameを設定しています。変更して頂いて大丈夫です。
  <input id="dog" type="radio" name="animals" value="">
  <label for="dog">犬</label>
  <input id="cat" type="radio" name="animals" value="">
  <label for="cat">猫</label>
  <input id="rabbit" type="radio" name="animals" value="">
  <label for="rabbit">うさぎ</label>
</form>

都道府県のセレクトボックスには、valueに都道府県コードを入力する

都道府県コードとは？

都道府県コードは、コード標準化の一環として総務省（当時：自治省）が昭和43年に全国の都道府県のコードを設定したものです。（市区町村コードもあります。）

■ 都道府県コード一覧

バックエンドではこの都道府県コードの番号と都道府県名をデータベース上で紐づけて管理、または別ファイルにして管理しています。

YubinBango.jsについて

YubinBango.jsは、郵便番号を入力すると住所を自動入力してくれるJSライブラリです。
読み込んで指定のclassを付与するだけで使用できます。

<select>のclassにp-region-idを設定すれば、都道府県コードを使用できます。

index.html

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br>
    <select class="p-region-id">
    <option value="">--</option>
    <option value="1">北海道</option>
    <option value="2">青森県</option>
    <option value="3">岩手県</option>
    <option value="4">宮城県</option>
    <option value="5">秋田県</option>
    <option value="6">山形県</option>
    <option value="7">福島県</option>
    <option value="8">茨城県</option>
    <option value="9">栃木県</option>
    <option value="10">群馬県</option>
    <option value="11">埼玉県</option>
    <option value="12">千葉県</option>
    <option value="13">東京都</option>
    ...
  </select><br>
  <input type="text" class="p-locality p-street-address p-extended-address"/><br>
</div>

YubinBango.jsの使用で気をつけること

YubinBango.jsで都道府県コードを使用する場合、1〜9までのコードが１桁になります。
しかし本来都道府県コードは2桁（1〜9は01、02、03...のように頭に0がつく）なので、バックエンドに事前に相談することをおすすめします。

必須項目にrequiredはつけなくても良いかも

バックエンドと要相談。

必須項目に未入力があった場合、サーバー側でのチェック前にブラウザのバリデーションにひっかかります。
ブラウザによって挙動やエラー表示に差があり、その差が気になるという場合はサーバー側で全ての項目をチェックできないか相談してみましょう。
サーバー側でしっかりチェックをしてもらえる場合は、必須項目にする必要がなくなるのでrequiredは外してOKです。

ブラウザバック時の挙動を考慮する

ブラウザバック時にはchangeやclickなどのJSのイベントが発火しないため、classのつけ外しや選択項目による要素の表示/非表示切り替えの処理が走りません。
pageshowイベントはブラウザバック時にも発火するため、これらの問題に対応することができます。

window.addEventListener('pageshow', () => {
 ...
});

送信ボタンには、二重送信防止や連打防止のための処理を必ずつける

二重送信や連打ができてしまうと、送信ボタンが押されるたびにサーバー側にデータが送られてしまいます。
サーバー側でチェックもできますが、何回も同じデータが送られるのはよくないので、JSのsubmitイベントを使用しフロントで対応しましょう。

const form = document.querySelectorAll('form');

if (form) {
  form.forEach((el) => {
    const button = el.querySelector('button[type="submit"]');
    if (button) {
      el.addEventListener('submit', () => {
        button.disabled = true;
      });
    }
  });
} else {
  return;
}

おわりに

以上となりますが、他にもまだまだ要望や気をつけることがありそうなので、今後もこちらのページに追加していこうと思います。