フォームを学ぶ

学習前の知識

フォームの送信ではGETやPOSTなどのメソッドを選択できる。
GETを使用するとデータがURLパラメータにのる
フォームはユーザーのインプットを受け付けるのでセキュリティ上の問題を生みやすい。
フォームは制約検証APIを使用できる。
フォームのデザインはアクセシビリティに気をつけなければならない点が多々ある。
ラベルをつける。確認画面を表示する。制約を予め明示する。サイトを離れた際入力内容を保つ。拡大してもラベルと入力欄は対応関係がわかりやすいように近接させる。

Learn Forms

https://web.dev/learn/forms/

HTMLフォームの基本的な構築の仕方、スタイリングの仕方、データの再入力、フォームがアクセシブルであるセキュアであることを保証すること、そしてどのようにフォームをテストするのかを学ぶ。
form controlsとは<input>、<select>、<textarea>、<button>などでありユーザーがデータや選択とインタラクションすることを可能にする要素である。
form fieldはform controlsの中でもとくにテキストを扱う要素であり、<input>、<textarea>のことである。

Use forms to get data from users

https://web.dev/learn/forms/form-element/

httpsを使用するとフォームのデータは全て暗号化される。
フォームが提出されるとブラウザをリクエスト作成する。スクリプトを使用してレスポンスやリクエストを処理することができる。つまり、データの検証をおこなったり、データベースに保存したり、データに基づいて何らかの処理を行うことができる。
デフォルトではリクエストはフォームが表示されているページに向けて作成される。
formのaction属性でリクエストの送信先を指定することができる。actionはフォームが処理される場所を指定する属性である。
デフォルトでデータはGETリクエストを送信する。GETリクエストではURLパラメータにデータが載る。
formのaction属性をPOSTに設定するとデータはリクエストの本体に含まれる。フロントかバックエンドのスクリプトからのみ見ることができる。
GETとPOSTのどちらのメソッドを使用するべきかについて

For forms that process sensitive data use the POST method. The data is encrypted (if you use HTTPS) and only accessible by the backend script that processes the request. The data is not visible in the URL. A common example is a sign-in form.

センシティブなデータについてはPOSTを使用する。HTTPSを使用すればそのデータは暗号化され、バックエンドのスクリプトからしかアクセスできない。一般的な例はサインインのフォームである。

データが共有可能ならば、GETメソッドを使うことができる。この方法ではURLに付加したものとしてブラウザヒストリに追加される。検索フォームをGETを使うことが多い。この方法を使用すると検索結果をブックマークすることができる。

Help users enter data in forms

type属性によってブラウザは異なるUIを表示したり、異なる検証ルールを適用する。
デフォルトのフォームのスタイルはブラウザやOSによって異なる。

Labels for form element

inputにラベルを使用することでユーザーがその入力欄に何を書けばよいのかを知らせることができる。
他のHTML要素よりもlabelを使用することでアクセシブルになる。

Capturing user input

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

name属性はユーザーが入力したデータと結び付けられるものである。
テキスト入力によって既に定義済みの値リストを選択するようなUIには<input>とdtalist要素を使うとよい。
selectの中のoption要素にselected属性をつけるとデフォルトでその値が選択される。

Grouping form controls

<fieldset>要素を使用することでフォームコントロールをグループ化することができる。
legend要素はグループ化したフォームのタイトルである。inputに対するlabelのようなもの。
全ての<fieldset>要素は<legend>要素を要求する。また<legend>要素は<fieldset>要素の一番最初の子要素である必要がある。

Submitting a form

form要素内のbutton要素はデフォルトでSubmit buttonとして扱われる。デフォルトの振る舞いを避けるためにはtype="button"を使用するとよい。
input要素のtypeをsubmitにしてもsubmitボタンの役目を果たす。
form fieldがフォーカスされているときenterキーを押すとフォームが送信される。

Help users avoid re-entering data in forms（ユーザーがフォームの再入力を避けるのを手助けする）

毎回の異なるサイトで何度も住所を入力するのは手間である。autofillを使用すると住所を一度入力すると次回からはブラウザが住所をオプションで表示してくれる。

How does autofill work in the browser?

ブラウザはname、type、id属性の値などを用いてそのフィールドが何を要求しているかを予測する。

Help browsers with autofill

webコンテンツ製作者はブラウザのフォーム自動入力がうまく働くようにマークアップをする。
例えばemailの入力欄では次のようにtype、name、idの値をemailとするとブラウザがうまく自動入力する手助けとなる。

<label for="email">Email</label>
<input type="email" name="email" id="email">

Help users enter the right data in forms

フロントエンドでどのようにフォームを検証するのかを学ぶ。
検証はCSSやJavaScriptを用いることでより強化することができる。
制約はフロントエンドだけではなくバックエンドサーバーに保存するときや共有されるときにも検証されるべきである。

なぜフォームを検証する必要があるのか

どのフィールドが要求されていて、どのフィールドにどんな制約があるのかを知らなかったらイライラする。
validation ruleを定義しそれを使用することでユーザーに制約に関する情報を提供する。
inputのrequired属性をつけるとそのフィールドに何も入力されていない場合はブラウザ固有のエラーが出る。

Help the uer enter the correct format

minlength属性などで入力の最小値などを制限することができる。
制約のルールを説明するため要素とform controlをつなぐためにaria-describedbyを使用する。

Pattern attribute

patter属性を使用することで正規表現を使用し制約検証が可能である。

Style invalid form controls

invaild擬似クラスやrequired擬似クラスを用いることで各状態に対応するスタイルを適用できる。

Sometimes designers color the invalid state red, using the :invalid pseudo-class. However, to communicate error or success you should never rely only on color. For people with red-green color blindness a green and a red border look almost the same. It's impossible for them to see if there was an error or success. Add text or an icon to make it obvious.

フィールドが無効のとき赤色で表示するのはよくない。なぜならばred-green color blindnessの人にとっては赤と緑がほとんど同じように見えるからである。
アイコンかテキストで明示するのがよい。

In practice :invalid is tricky to work with. Invalid form fields are already marked as :invalid before user interaction, which may confuse users. The :user-invalid pseudo-class solves this issue, as the styles are only applied after user interaction. Learn more about :user-invalid.

:invalidを使うとまだユーザーがインタラクションしていないのに無効用のスタイルが適用されてしまう。
この問題を解決するには:user-invaildを使用する。

Validataion with JavaScript

validationを強化するためにJavaScript Constraint Validataion APIを使用することができる。

Provide meaningful error messages

setCustomValidity()メソッドを使うとよい。
リアルタイムで検証するにはフォームコントロールのonblurイベントを使用するとよい。

Test your forms

Does your form work on other devices?

いろいろなデバイスがある中で自分が作ったフォームが正しく機能するのかをどのようにテストするのか？

How can you test if your form works for others?

Design basics

Creating user-friendly interfaces

最適化されたフォームの構造とグラフィックデザイン、論理的なUIを提供することでUXが向上する。

Labels

適切なラベルを書くことでユーザーはフォームコントロールの目的を理解することができる。
plaeholderの使い方を間違えないように気を付ける。placeholderは何を入力するかの具体的なヒントである。

<label for="email">Enter you email address</label>

<label for="email">Email address</label>

上の二つなら二つ目の方がラベルとして適切である。ラベルは端的である方が良い。

Label position

position the label above the form controlによるとラベルはフォームコントロールの上が良い。

Designing forms

significantly reduce form abandonment ratesにはフォームの良いデザインについて記述がある。
type属性やinputmode属性を適切に使うことでタッチキーボードのデバイスに適切なキーボードを表示させることができる。

Help users navigate forms

次のフォームコントロールがどこにあるか探すのは手間であるので1カラムのフォームがよい。
キーボードのみを使用してフォームを制御する場合、どの順番にフォーカスが当たるかはsource order in Chrome DevToolsを利用するとわかる。（当然自分でキーボード操作しても良い。）

Help users interact with forms

不意のタップやクリックを避け、ユーザーがフォームを使いやすいようにボタンは十分大きくするべきである。
推奨されるタップの最小サイズは48pxである。Accessible tap targets
フォームコントロール間には十分な間を空けておくべきである。
フォームコントロールの大きさは1rem以上にする。1rem以下だとiOS Safariで自動でページズームが行われる。
pointing deviceによって大きさやスタイルを変化させることができる。

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

Make it clear to users what data to enter

ユーザーにどのようなデータが有効なデータなのか先に伝える。

Make it clear to users which fields are required

どのフィールドが入力必須のフィールドなのかを伝える。
ほとんどのフィールドが必須ならばオプショナルなフィールドを示すと良い。

Accessibility

全てのフォールコントロールにはlabelが関連づけられなければならない。
labelを関連づけるととのテキストが表示されたり、スクリーンリーダーで読まれたりする。また、フォームコントロールの大きさを大きくする役目を果たす。

Ensure users are aware of the expected data format

ユーザーに求めているデータの形式を明示する。aria-describedbyを使用する。

Help users to identify the currently focused form control

:focus擬似クラスのデフォルトスタイルを除去したいが、キーボードユーザーにはフォーカスインジケーターを表示したいときは:focus-visibleを使用するとよい。
focus indicatorsについてさらに学ぶ。https://www.sarasoueidan.com/blog/focus-indicators/

Internationalization and localization

htmlのlang属性を適切な値に設定することでlocalizationを行う。
サイトの翻訳バージョンはlink要素を用いて表現することでサーチエンジンとブラウザが翻訳バージョンの存在を知ることができる。
多くの翻訳ツールはaria-labelを翻訳できないのでaria-labelによって要素の説明をするのは避けるべきである。

Make spacing independent of writing systems

input {
  border: 1px solid;
  border-inline-start-width: 4px; // 文書の方向によって左か右のボーダーが4pxに設定される。
}

上のようなCSSのプロパティをlogical propertyと呼ばれる。

Ensure your form can handle different name formats

異なる名前の形式に対応するべきである。できるだけ名前は単一のフィールドで扱うべきである。

Security and privacy

A secure form means that all data is encrypted, kept secure, and no unauthorized access can happen. To ensure privacy, only save the data you need, only save personal data after consent, ensure the user is in full control of their data, and never share user data with others without the user's consent.

安全なフォームとは全てのデータが暗号化され、安全性を保ち、認証なしのアクセスが起こらないということ。

Ensure your form is secure

できる限り少数のデータを要求するようにすることが大事。フォームで必要のない情報を聞かないこと。
常にHTTPSを使用することが大事。特にフォームが設置されているページではHTTPSを使用すること。HTTPSを使用することでクライアントサーバー間の通信が暗号化される。
フリーWi-Fiを使用しているときに通信がHTTPであれば、同じ公共のWi-Fiに接続している人にフォームの送信内容を盗聴される可能性がある。HTTPSでの通信ならばこの心配はない。
自分のサイトでは全てのHTTPリクエストがHTTPSにリダイレクトするようにすべきである。

Help users to keep their data private

GETリクエストではquery stringの中にデータが含まれる。リクエストされたURLはブラウザヒストリにquery stringとともに追加される。これは検索フォームならば何を検索したのかという履歴が残るので便利である。センシティブなデータを同じ方法で提出すると問題になる。
個人的な情報やセンシティブな情報は全てPOSTメソッドを使用するべきである。この方法を用いるとデータはバックエンドの処理でのみ見ることが可能となる。
ローカルストレージなどに個人情報を格納するときは暗号化されたデータを格納するべきである。

Ensure users can safely sign up and sign in

認証は複雑な課題である。サードパーティ製のidentity providerを使用するのが良い。
authentication

Help users access their personal data

個人情報をどのように使用するのかをユーザーに伝える。
General Data Protection Regulationが参考になる。

Ensure users can update their personal data

ユーザーが彼らの個人情報を簡単に更新できるようにするべきである。パスワードも含めて更新できるようにすべき。
また個人情報が変更されたことを知らせる必要がある。
ユーザーは簡単にアカウントを削除できるようにするべきである。
アカウントの削除に関して法的な要求がある地域がある。https://ec.europa.eu/info/law/law-topic/data-protection_en
Web Application Privacy Best Practice

Ensure all data is in good shape

フロントエンドでもバックエンドでも検証をすべきである。
ユーザーから受け付けた値を出力するにはサニタイズしなければならない。（XSS攻撃を防ぐため）

Ensure all submissions come from real people

form botからのフォームの送信を防ぐことが必要である。
これを防ぐにはreCAPTCHAなどのサービスを利用するとよい。
もしくはhoneypotを用意すると良い。honeypotとは人間には見えないフォームコントロールでありbotがその項目を埋めて提出したときはバックエンド側でその提出を弾くような仕組みである。
honypotがスクリーンリーダーから無視されるようにaria-hidden="true"とする必要がある。

Autofill

ブラウザはname属性やid属性を見て以前入力したフォームの内容を提供する。

Use the :autofill CSS pseudo-class to style form controls that the browser has autofilled. Use :autofill and the prefixed version :-webkit-autofill for best browser compatibility.

ブラウザが自動入力したフォームコントロールのスタイルは:autofill CSS 擬似クラスを使用してスタイルをつける。互換性のために:autofillと:-web-kit-autofillを使用する。

How does autofill work?

autocomplete属性を適切な値に設定することでブラウザに適切な自動入力を行わせることができる。

Ensure users can sign in fast and use secure passwords

サインアップフォームではautocomplete="new-password"を使用するとよい。これを設定するとブラウザは新しいパスワードを生成する。
SMSメッセージを受け取ったコードを自動入力するにはiOS Safari 14以降ではautocomplete="one-time-code"を使用することで実現できる。 Chrome on AndroidではWebOTP APIを使用することで実現できる。

Help users fill in their credit card information

クレジットカード情報を自動入力するautocomplete属性の値がある。

Ensure autofill works for all your fields

Using suitable values for the autocomplete attribute helps browsers offer the best autofill option, and helps users fill out forms faster.

適切なautocomplete属性の値を選ぶことでユーザーは入力作業を省略することができる。

Help browsers understand that a field shouldn't be autofilled

ワンタイムコードは毎回異なるのでautofillの必要はないことがある。autocomplete="off"を使用するとこの設定があるフォームコントロールについてブラウザは自動補完することはない。
autocomplete="off"を利用する他のケースはhoneypotを設置するとき。

How to test forms for usability

Test forms across devices and platforms

Ensure your forms works for keyboard users

tabキーによってフォームコントロールをフォーカスすることができるか確認する。
どのフォームが現在フォーカスされているのかを示すために:focus擬似クラスを用いてスタイリングする。
デフォルトの:foucsを除去したい場合はキーボード操作時のフォーカス時のみにスタイリング可能なfocus-visibleを利用するとよい。

Help users complete your form on touch devices

タッチデバイスではボタンの大きさを最低でも48px確保する。
inputやselectはタップするのに十分な大きさにする。

Ensure users get an optimized keyboard

Make sure form buttons aren't hidden

デバイスによっては提出ボタンが隠れてしまう場合がある。これを防ぐにはenv()を使用する。詳しくはensure buttons aren't obscured by device user interfaces を読むこと。

The form element in depth

常にフォームコントロールをform要素の中で使用しなければならいというわけではない。保存もしないしデータを処理しない場合はform要素の中にフォームコントロールを入れる必要はない。
逆にユーザーから受け取ったデータを保存したり、処理するほとんどの場合はform要素を使用する必要がある。

How does form submission work?

formを送信したときブラウザはformの属性を確認する。データがGETかPOSTのどちらのメソッドで送られるのかを確認する。
もしmethod属性が空ならばGETリクエストが作成される。
GETリクエストで送信されたデータはフロントエンドのJavaScriptで利用できる。またGETとPOSTで送信されたリクエストは送信先のサーバーのプログラムで利用できる。
フォームが提出されたときaction属性のURLにリクエストを送信する。Submitボタンがformaction属性を持っているならその値を使用する。
さらにブラウザはformの他の属性を調べる。例えば、フォームが検証されるべきかどうか、オートコンプリートが使用されるべきかどうか、何のエンコーディングが使用されるべきかなどを調べる。
フォームの提出ボタンの名前は動作を示す名前にする。
enterkeyhint属性を使用するとon-screenキーボードのエンターキーの表示を変化させることができる。

Enable users to submit files

ファイルを提出するにはinputのtype属性をfileにして、formのenctype属性を"multipart/form-data"にする必要がある。このエンコーディングでないのファイルをPOSTリクエストを使用して送信することができない。

Form fields in depth

textareaのリサイズを防ぐことはUX的に良くない。

Ensure users can fill in different types of data

inputmode属性を用いるとon-screenキーボードを変更することができる。
autofocus属性はユーザーを混乱させる可能性がある。特にスクリーンリーダーを使用している人にとっては混乱の元であるので使用を避けるとよい。

Styling form controls

select要素の矢印はappearanceプロパティの値をnoneにすると消える。
ラジオボタンとチェックボックスのスタイルを変更するには以下のように記述する。以下のようにするとaccessibility tree上には input要素が残る。

input[type="radio"],
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

JavaScript

Ensure users can submit a form without leaving a page

フォームの内容をページ更新を伴わずかつフォームの内容をもとにページの表示内容を即座に変更したいときは、onsubmitイベントにてevent.preventDefault()を使用し、 Fetch APIにてFormDataを送信するとよい。

Specific form types

Identity

サインアップフォームでは入力内容を確認するための確認画面を作らない。代わりに確認メールを送るとよい。
パスワードのペーストを防ぐべきではない。
平文でのパスワードの保存や送信をするのは禁止。salt and hashで暗号化する。またsalt and hashのアルゴリズムは自分で作ってはいけない。信頼できる機関が作成したアルゴリズムを使用する。
マルチファクタの認証を導入する。Web OTP APIを使用する。

google web devでフォームを学ぶ