2019/12/24

Adam Silver 著

土屋一彦 監修

株式会社 Bスプラウト 翻訳

手にとった動機

formを作ってたから

Web Accessibilityにかなり配慮している

jQueryを使ってる

素のHTMLや素のJavaScriptを使った話も多いので冗長な箇所もある

form libraryを使用していたら自動で解消できるものも割とある

第1章 登録フォーム

非同期validationやってないのは微妙に思う

敢えてだった

送信後queryがキモくなるがデザインとは関係ないからどうでもいいんかな

フォームの基本的な品質とその考え方

placeholderは必ずしも有効ではない

あるマテリアルを別のマテリアルで代替すべきでない

決済フォーム|決済フローのステップごとのデザインパターンの適用

examples

1ページに付き、1つのこと

「1つのこと」っってなんやねん

絞る技術的な

フロー

航空券予約フォーム|ARIAを用いたカスタムフォームコンポーネント

到着地、日付、乗客数、座席

ログインフォーム|ユビキタスなログインフォーム

メール受信ボックス|メールの管理インターフェースからARIAパターンを学ぶ

管理画面的な

検索フォーム

フィルターフォーム|ユーザーが満足できるフィルタリング(選択、抽出ほか)

検索結果の絞り込み

zozoのサイドバーみたいなやつ

アップロードフォーム

経費申請フォーム

「更に追加」などのボタンがあってfieldを増やせるformの話

ロジックの話が多く、UXの話はほとんどない(あるにはある)

素のJSを使っているのでかなり冗長

form libraryを使ってたら気にしないで済む点も多い

fieldを削除した際に、どこをfocusするか？

p.305~

本書では、formの見出しにfocusを移動している

1回tabを押したら、一番上のfieldにfocusが移る

長くて複雑なフォーム|応用2:入力に長時間を要するフォーム

長時間ってどれぐらい？

それによる