web-dev-qa-db-ja.com

「複数のフィールド、少なくとも1つは必須」の共通パターン

明らかに、アスタリスクは、無条件に必要なフィールドを識別するための一般的なWeb標準です。

しかし、複数のフィールドのうち1つのフィールドが必要な場合はどうでしょうか。たとえば、自宅の電話、職場の電話、携帯電話用の別々のフィールドがあります。あらゆる種類の電話番号が少なくとも1つ必要です。

通常、ページ内の指示を使用してこれを示すだけですか?指示はあまりエレガントではありませんが、アスタリスクのバリエーション(ハチェット、クロスなど)は通常、人々を混乱させるだけのようです。より良い解決策はありますか?

15
Baa

私は従来のより良い解決策を知りません。このような状況では、代替フィールドを視覚的にグループ化し、グループタイトルの横にアスタリスクを配置して、次のようなことを試みます。

enter image description here

うまくいくこともあれば、それほどでもないこともあります。

また、インライン検証を使用することは常に良い考えですが、ここでは二重に役立ちます。

11

@Rainの回答とLKMの解説を説明するために、これは私が長い間使用してきたソリューションであり、すばらしい結果が得られます。

At least one field required

15
Danita

また、質問を言い換えて、次のような多少変わった「少なくとも1つは必要な」構成を回避することもできます。

Phone Number Type Example

これは少し不格好ですが、ほとんどの人がこれまでに見たことのないフォームタイプをユーザーに提示するという問題を回避します。

11
Rain

自宅、オフィス、携帯電話などの例では、フィールドセットと凡例のHTMLタグを使用してオプションをグループ化する傾向があります(これがすべての目的です)。次に、凡例は「少なくとも1つの電話番号を提供する*」のようなものを言うことができます-簡単に認識できるように末尾に従来のアスタリスクが付いています。フィールドセットは、3つの電話番号の入力をラップします。

これは、視覚に訴えるユーザーへの適切な視覚的意味と手がかり、およびスクリーンリーダーなどにアクセス可能なWeb標準に準拠した技術を伝えます。

0
Glen Finch