フォームを作る

代用しない。入力を始めた瞬間に消えて、何を入れる欄か分からなくなる。ラベルは欄の外に置く。入力

<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" autocomplete="email">

少ないほうを明示する。ほとんど必須なら任意にだけ印を付ける。入力

<label>会社名 <span class="optional">任意</span></label>

入る内容の長さに合わせる。郵便番号の欄が氏名と同じ幅だと、何を入れるか伝わらない。入力

input[name="zip"] { max-inline-size: 8rem; }
input[name="name"] { max-inline-size: 20rem; }

何が悪いかと、どう直すかを両方書く。入力欄のそばに置き、色だけに頼らない。フォームの検証

<div class="field field--error">
  <label for="email">メール</label>
  <input id="email" type="email" aria-invalid="true" aria-describedby="email-err">
  <p class="field__error" id="email-err" role="alert">@ を含む形式で入力してください</p>
</div>

入力中は出さない。欄から離れたときか、送信を押したときに出す。フォームの検証

input.addEventListener('blur', validate);
form.addEventListener('submit', validateAll);

処理中の表示と、完了の表示を分けて出す。押した直後にボタンを無効化して二重送信を防ぐ。知らせる

btn.disabled = true;
btn.textContent = '送信中…';
// 完了後 → btn.textContent = '送信完了';

本当に要る項目だけ残す。減らせないなら段階に分け、いま何段目かを見せる。情報設計

<!-- 段階フォーム -->
<p>ステップ 2 / 4</p>
<progress value="2" max="4"></progress>

autocomplete 属性を正しく付ける。氏名・住所・電話は決められた値がある。入力

<input name="name" autocomplete="name">
<input name="tel" autocomplete="tel">
<input name="address" autocomplete="street-address">

取り消せない操作なら要る。取り消せるなら、送ってから直せるほうが早い。情報設計

<!-- 取り消せない操作 -->
<form action="/confirm" method="post">...</form>