【デザインメモ】フォームの「必須入力」をブラウザ準拠でやったときの見映えをまとめました
デザインにあたって、フォームを作る場合に必須系バリデーションのデザインをする機会は多々あります。そこで、自ら実装するのではなく、ブラウザ準拠の機能を用いて必須系バリデーションを行った場合どうなるかを紹介します。
Chrome
アイコンがついていて、フィールドにも被さらない表示のされ方。
Safari
唯一の上に表示されるタイプです。
firefox
吹き出しではなくTooltipが少しかぶるように表示されます。
edge
edgeはエンジンがChromeと一緒なので、同じ挙動をします。
サンプル
以下のコードで挙動をお試しください
Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています
弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
React+Redux 開発の基盤部分の設計・実装を得意とするフロントエンドエンジニア募集要項
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
