静的HTMLのフォームで「送信しました」と表示できても、実際に誰かへ届いているとは限りません。画面の反応とデータの受信を分けてレビューするためのチェックリストです。
私はHTMLをリンクで共有するPlopinoを開発しています。以下は特定のホスティングサービスに依存しない、静的プロトタイプの確認方法です。
1. 未入力・不正な入力を先に試す
次の例は送信をシミュレーションするだけです。
<form id="request">
<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" required autocomplete="email">
<button type="submit">送信をシミュレーション</button>
<p id="status" role="status"></p>
</form>
<script>
const form = document.querySelector("#request");
const status = document.querySelector("#status");
form.addEventListener("submit", (event) => {
event.preventDefault();
status.textContent = "デモ完了。データは送信・保存していません。";
});
</script>
空欄のまま送信し、次に「abc」のようなメール形式ではない文字列を試します。required と type="email" によりブラウザーの基本的な制約検証が働きます。メールボックスの実在確認やサーバー側の検証を行うものではありません。
2. クリックだけでなくEnterで確認する
処理をボタンのclickではなくformのsubmitで受けています。入力欄でEnterを押す操作も確認します。Tabで移動してフォーカスが見えるか、labelと入力欄が結び付いているかも確認します。role="status" は状態更新を示すために付けていますが、実際の読み上げは対象のスクリーンリーダーでも確認してください。
補足：form.submit() を直接呼ぶ場合は、通常のsubmitイベントや制約検証を経由しません。ここで確認するのは利用者によるフォーム操作です。
3. 成功メッセージを実際の処理に合わせる
このコードにはfetchも送信先APIもありません。「お問い合わせを受け付けました」と表示すると、レビュー担当者が本当に連絡したと誤解する可能性があります。デモでは「送信・保存していない」と明記し、架空の入力値を使います。
4. APIをつなぐなら、通信中と失敗も設計する
実際に受信するサービスを別途用意した場合は、通信中・成功・失敗を分けます。二重送信を防ぎ、失敗時に入力を消さず、再試行できるようにします。レスポンスを確認する前に成功を表示しないこと、サーバーでも入力検証することが必要です。
5. 別のブラウザーで状態の範囲を確かめる
localStorageに入力を保存しても、作成者の受信箱にはなりません。保存先はそのブラウザーのオリジンに対応する領域です。別端末との共有やサーバーへの送信とは別の機能です。また、配布するHTMLやJavaScriptへ秘密のAPIキーを埋め込まないでください。
共有時の小さな運用ルール
上の断片をHTMLに入れ、index.htmlとして保存し、共有先の未ログインのブラウザーでも確認します。私の用途ではPlopinoで静的HTMLを公開できますが、フォームの受信機能が自動で追加されるわけではありません。受信が必要なら別のサービスを接続します。
レビュー依頼には「入力チェックと状態表示を確認してください。実際の送信はしません」と添えると、確認してほしい範囲が明確になります。
仕様を確認する資料
掲載コードは処理を追い、上記仕様と照合しています。各ブラウザー・支援技術での実機確認項目は本文中のチェックリストとして分けています。