概要 主に﹁2016年 - 2017年﹂の記事から引っ張ってきて、ただただ羅列したものです。 なので、このまとめ自体の最適化が成されてないですが、そこはご容赦ください… ユーザビリティ・アクセシビリティ 分かりやすさ 入力項目は必要最低限にする 項目名は簡潔で短く分かりやすいものにする できる限り入力フィールドの数は最小限にする 一つの項目の入力フィールドを複数に分けない 例‥姓名、電話番号、郵便番号など 必須項目は、﹁*﹂ではなく﹁必須﹂と表示する ラベルやヒント︵○文字以上必要です︶をplaceholderに設定しない フォーカスした際に消えてしまうため、入力例を入れてあげる程度にする フォーカスした際の入力フィールドのデザインを変える 入力フィールドのサイズは、入力される値に合わせる リアルタイムでチェック出来るバリデーションを実装する エラーメッセージは、上部にすべて表示するのでは
![【Tips】ただただフォーム最適化をまとめたチートシート的なもの - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/da5025f5ade8fc117198d2c74e5b432f906dd777/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwVGlwcyVFMyU4MCU5MSVFMyU4MSU5RiVFMyU4MSVBMCVFMyU4MSU5RiVFMyU4MSVBMCVFMyU4MyU5NSVFMyU4MiVBOSVFMyU4MyVCQyVFMyU4MyVBMCVFNiU5QyU4MCVFOSU4MSVBOSVFNSU4QyU5NiVFMyU4MiU5MiVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSVFMyU4MSU5RiVFMyU4MyU4MSVFMyU4MyVCQyVFMyU4MyU4OCVFMyU4MiVCNyVFMyU4MyVCQyVFMyU4MyU4OCVFNyU5QSU4NCVFMyU4MSVBQSVFMyU4MiU4MiVFMyU4MSVBRSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZDE3Y2M0NTVkM2JjNjFkNzQ0MWRmNDE0ZDJlMzBlNzI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzeV8xMjUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYxOWE0OGQyZDRhZWY4ZGU2MzU2NWU0OTA1NDEwY2Y5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df7d5fef363e5795a28541cb3bc096c9f)