JavaScript

フォームのイベントに応答する

JavaScript を使用して、フォームでのユーザー操作に応答したり、追加のフォーム フィールドを表示したり、フォームを送信したりできます。

ユーザーが追加のフォーム コントロールを入力するのをサポートする

アンケート フォームを作成したとします。ユーザーが 1 つのオプションを選択したら 選択内容に関連する具体的な質問をするために、追加の <input> を表示したい。 適切な <input> 要素のみを表示するには、どうすればよいでしょうか。

JavaScript を使用して <input> を表示できるのは、関連付けられている <input type="radio"> が現在選択されている場合のみです。

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

注意: JavaScript を使用できない場合でも、フォームが使用可能であることを確認してください。中核となるエクスペリエンスはすべてのユーザーにとって同じで、JavaScript は拡張機能のみとして使用する必要があります。

それでは デモの JavaScript コード aria-controls 属性と aria-expanded 属性に気づいたでしょうか。 使用する ARIA 属性 追加のフォーム コントロールの表示と非表示の状態をスクリーン リーダーのユーザーが把握できるようにします。

注意: <input type="radio"> の aria-expanded 属性は、すべてのスクリーン リーダーで正しく読み上げられるわけではありません。

ユーザーがページから離れずにフォームを送信できるようにする

コメント フォームがあるとします。読者がコメントを追加してフォームを送信すると ページを更新せずにコメントをすぐに確認できれば理想的です。

そのためには、onsubmit イベントをリッスンしてから、event.preventDefault() を使用してデフォルトの動作を回避します。 Fetch API を使用して FormData を送信します。

対応ブラウザ

• <ph type="x-smartling-placeholder"></ph> 42
• <ph type="x-smartling-placeholder"></ph> 14 歳
• <ph type="x-smartling-placeholder"></ph> 39
• <ph type="x-smartling-placeholder"></ph> 10.1

ソース

注: FormData は、フォーム フィールドとその値を表す Key-Value ペアのセットです。フォームのすべてのフィールドを FormData オブジェクトに追加することも、一部のフィールドとその値のみを送信することもできます。

バックエンド スクリプトは、POST リクエストがブラウザからのものであるかどうかを確認できます （method="post" の場合はフォーム要素の action 属性を使用）、JavaScript の場合は、 たとえば fetch() リクエストなどです。

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

動的なコンテンツの変更をスクリーン リーダーのユーザーに必ず通知する。 aria-live="polite" 属性を持つ要素を HTML に追加します。 変更後に要素のコンテンツを更新します。 たとえば、ユーザーがコメントを送信したら、テキストを「コメントを投稿しました」に更新します。

詳しくは、ARIA のライブ リージョンをご覧ください。

JavaScript による検証

エラー メッセージがサイトのスタイルやトーンに合っていることを確認する

デフォルトのエラー メッセージの表現はブラウザによって異なります。 すべてのユーザーに同じメッセージが表示されるようにするには メッセージがサイトのスタイルやトーンに合っていることを確認します。 setCustomValidity() を使用する Constraint Validation API のメソッド 独自のエラーメッセージを定義します

注: 多言語のウェブサイトをお持ちの場合は、必ずエラー メッセージを翻訳してローカライズしてください。

エラーがユーザーにリアルタイムで通知されるようにする

フォーム検証用の組み込みの HTML 機能はユーザーへの通知に最適 データをバックエンドに送信する前に、無効なフォーム フィールドに関する情報を入手できます。 ユーザーがフォームのフィールドを離れたらすぐに通知できれば便利ではないでしょうか。

アテンション機構の blur これは要素のフォーカスを喪失したときに起動され、 フォーム コントロールが無効なかどうかを検出する ValidityState インターフェース。

ユーザーが入力したパスワードが見えるようにする

<input type="password"> に入力したテキストはデフォルトで非表示になっています。 ユーザーのプライバシーを尊重するため 入力したテキストの表示 / 非表示を切り替える <button> を表示して、ユーザーがパスワードを入力しやすくします。

デモをお試しください。[ パスワードを表示 <button> を使用して、入力したテキストの公開設定を指定します。 このプログラムの仕組みを見てみましょう。[Show Password]をクリックすると パスワード フィールドの type 属性を type="password" から type="text" に変更します。 <button> のテキストが「Hide Password」に変わります。

試してみる: パスワード表示 <button> の改善を試みます。<button> はどこに配置しますか。アイコンのみを使用し、<button> にアクセスできるようにしてください。

[Show Password] ボタンにアクセスできるようにすることが重要です。 aria-controls 属性を使用して <button> を <input type="password"> に接続します。

注意: aria-controls 属性はすべてのスクリーン リーダーでサポートされているわけではありませんが、サポートしている場合、拡張機能として役立ちます。

パスワードが現在表示されているか非表示にしているかをスクリーン リーダーのユーザーに通知するには、 aria-live="polite" で隠し要素を使用し、それに応じてテキストを変更します。 パスワードが自分の画面を見ている他のユーザーに対して表示されるときに、スクリーン リーダーのユーザーがそれを把握できるようにすることが重要です。

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

注: Microsoft Edge には、<input type="password"> に対して組み込みのパスワード表示コントロールが表示されます。表示ボタンが 2 つに表示されないようにするには、組み込みコントロールを css ::-ms-reveal { display: none } で非表示にします。詳しくは、パスワード表示ボタンのカスタマイズをご覧ください。

詳しくは、show password オプションの実装をご覧ください。

リソース

• FormData
• Constraint Validation API
• <input type="password">