【デザインメモ】フォームの「必須入力」をブラウザ準拠でやったときの見映えをまとめました

デザインにあたって、フォームを作る場合に必須系バリデーションのデザインをする機会は多々あります。そこで、自ら実装するのではなく、ブラウザ準拠の機能を用いて必須系バリデーションを行った場合どうなるかを紹介します。

Chrome

アイコンがついていて、フィールドにも被さらない表示のされ方。

Safari

唯一の上に表示されるタイプです。

firefox

吹き出しではなくTooltipが少しかぶるように表示されます。

edge

edgeはエンジンがChromeと一緒なので、同じ挙動をします。

サンプル

以下のコードで挙動をお試しください

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Nakamura Yuki

フロントエンドエンジニア。
受託制作会社を経てスタートアップへ参画、経営・組織づくり・事業開発・プロダクト実装と幅広く経験。のち、Gaji-Labo入社。
得意なことは何かといい具合にすることで、よしなにお願いされることが多く、度々よしなにしている。
元編集者でもあり、ドキュメントを書くことが好き。ダーツも好き。