web-dev-qa-db-ja.com

HTMLの「無線」入力の選択を解除できないのはなぜですか?

HTMLでは、現在2つのタイプの「チェックボックス」スタイルのコントロールがあります。

  • チェックボックス:オン/オフの切り替えが可能で、複数の値を選択できます
  • Radio:グループ内の1つの値のみを選択でき、個々の入力の切り替えを許可しません

不明な点がある場合は、デモを参照してください: http://jsfiddle.net/GYU8n/

私の牛肉はradiosであり、それらを「チェック解除」することができません(これは、私の知る限り、すべてのブラウザでのデフォルトの動作です)。クライアントの1人がフォームの「該当なし」ラジオオプションを削除する必要があると主張して問題が発生しましたが、フィールドは必須ではありません。

ここに問題があります:誰かがラジオオプションを選択した場合、おそらく誤ったクリックによって、「空白」のオプションが提供されない限り、解決策はありません(不適切な表現)。空白のオプションがないドロップダウンボックスによく似ていますが、違いは ドロップダウンボックスはUIでより多くのスペースを取らない 2つのオプションまたは20があるかどうかです。ドロップダウンが必要とする余分なクリックなしで、画面上にすでに存在する値は素晴らしいです。そのため、私たちは常にラジオを使用しています。

入力をクリックしても無線タイプの入力をオフにできない理由、およびこの動作がデフォルトである理由を理解できません。別のオプションをクリックすることが現在のオプションを選択解除する唯一の方法ですが、オプションのnoneが必要または適用可能である可能性が高いため、値が選択されると、選択は「ロックイン」されます。それがどちらであるかに関係なく。


私の質問


  1. 確かにこの動作は意図的なものであり、専門家で一杯の部屋に同意する必要がありましたが、これらの理由はおそらく何でしょうか?

  2. all私が書く将来のアプリケーションに対して、デフォルトでこの動作を変更するために、粒度に逆らっていくつかのJavaScriptを書くことを考えています。してはいけない理由はありますか?

  3. 技術者以外のユーザーも持っているラジオがどのように機能するかについて期待していますか

  4. 人々がラジオオプションをもう一度クリックして選択を解除しようとし、トグルを期待し、イライラすることはありますか?



このモックアップを見てください: http://jsfiddle.net/f4vXj/1/

これを変更して、チェックボックススタイルのコントロールを使用し、emptyラジオを必要としない、すべてのオプションが表示されている状態で同じように表示されるようにするには、それ自体がラベルを必要とするお気に入り - N/AまたはI don't want to fill in this field

誰かが誤って間違ったオプションをクリックした場合、そのオプションの1つを選択するためにロックされます。

144
Wesley Murch

ラジオボタンを空白のままにすることは想定されていません。空白にすることが許可されているため、-に関する質問で述べられているようにデフォルトの設定を回避できます- デフォルトの性別の設定選択しない性別は必須フィールドですが、「言いたくない」などのオプションは残しておくことができます。ただし、これはユーザーがラジオボタンに触れないこととは異なります。フィールドが必須の場合、デフォルトを設定しないことで、非常に役立つ動作が可能になります。 ユーザーにフィールドへの入力を強制します。デフォルトを想定していません。

それは非常に重要なイエス/ノーの質問だとしましょう。ユーザーはこの[はい/いいえ]の質問に対して法的責任です。この場合、ユーザーのデフォルト設定を選択することはできません!ただし、このオプションを空白のままにすることはできません。どちらか一方にコミットする必要があります。これはどのように役立ちますか?これは検証で(できればページで)キャッチします。これにより、デフォルトを想定するのではなく、ユーザーがフィールドに入力したことを確認できます。これは非常に重要な場合があります。

追加の質問については、Webフォーム(または多くのOSフォーム)を使用している人は、ラジオボタンが非常に一般的であるため、ラジオボタンの動作に慣れています。初めてラジオボタンが表示されたときに、もう一度クリックしてチェックを外してチェックを外してもかまいませんが、すぐにわかります。さらに重要なことに、ラジオボタンは多くの 実際の物理的なボタン —のように機能します。元々は同じ機能を共有するラジオのボタンにちなんで名付けられました。

ボタンを押すと、ボタンはクリックになり、ユーザーがボタンを再度押すことができない状態で押し下げられたままになります。同じコントロールの他のボタンは、他のボタンを押します。古いカセットテーププレーヤーはこれらを使用しました。早送りまたは再生を押すと、両方の機能が同時に発生することができないため、「停止」ボタンが飛び出しました。

ボタンを使用したことがあるユーザーは、ボタンを「アンプッシュ」できないことを知っています。ラジオボタンとの違いは、一部のボタンが他のボタンを押し出すことです。

129
Ben Brocka

主な質問への回答:これは、デスクトップから残された従来の動作です。これは、デスクトップアプリケーションがWebが登場する数十年前から行われていた方法です。フォーム要素がHTMLで表示されたとき、それらはデスクトップから動作をコピーしただけです。ラジオボタンの元の設計者は、おそらくこのコントロールが長期にわたってどのように使用されるか想像できなかったでしょうし、この必要性を予期していませんでした。

あなたが求めているのは珍しいことではありません。標準的な解決策は、基本的に「選択なし」である選択肢を持つことです。

補足:ラジオボタンをハッキングした場合、多くの人がラジオボタンを「クリック解除」しようとしないだろうと思います。私はこれをしません。

追加のクレジット:しかし、あなたが好きかもしれないもう1つのハックを見ました。代わりにチェックボックスを使用しますが、ユーザーは1つのチェックボックスしか選択できないようにします。これは、ユーザーがチェックを外すことに慣れているコントロールであり、「一度に1つしかチェックできない」という混乱を回避することがよくあります。

21
Hagan Rivers

他の人が言ったように、これは完全に正常で予想される動作です。

筆者が作成する今後のすべてのアプリケーションについて、デフォルトでこの動作を変更するために、粒度に逆らってJavascriptを作成することを考えています。

本当に悪い考え。ほとんどの人が理解できるボタンを別の方法で作成します。オン/オフ機能が必要な場合は、チェックボックスを使用しますが、既存のタイプのコントロールの機能を変更すると、大きな問題が発生します。

14

W3Cによると、デフォルトコントロールがcheckedに設定されていないラジオ要素のデフォルトの動作は、undefined

http://www.w3.org/TR/html401/interact/forms.html#radio

ラジオボタンはチェックボックスに似ていますが、いくつかが同じコントロール名を共有する場合、それらは相互に排他的です。1つが「オン」に切り替えられると、同じ名前の他のすべてが「オフ」に切り替えられます。 INPUT要素は、ラジオボタンコントロールを作成するために使用されます。同じコントロール名を共有するセットのラジオボタンが最初に「オン」になっていない場合、最初に「オン」にするコントロールを選択するためのユーザーエージェントの動作は定義されていません。注意。既存の実装ではこのケースの扱いが異なるため、現在の仕様は次のように記載されているRFC 1866([RFC1866]セクション8.1.2.4)とは異なります。

常に、セット内の1つのラジオボタンのみがチェックされます。ラジオボタンのセットのどの要素も「チェック済み」を指定していない場合、ユーザーエージェントは最初にセットの最初のラジオボタンをチェックする必要があります。

ユーザーエージェントの動作は異なるため、作成者はラジオボタンの各セットで最初に「オン」になっていることを確認する必要があります。

ブラウザーは現在、ラジオコントロールをデフォルトでオフにすることを許可することに同意していますが、これは予想される動作とは見なされていません。

12
cimmanon

これに対する答えは、「ラジオボタン」と呼ばれる理由を理解しようとすることです。

昔、少なくとも世界がデジタル化する前は、ラジオにはいくつかのプリセットチャネルボタンがありました。これらは機械的なものであり、1つのボタンを押すと、前に押したボタンが「ポップアップ」し、選択が解除されます。同じ配置がアンプにも使用され、ソースデバイスが選択されました。このアプリケーションでは、何も選択しないことが実際の選択肢ではないことはさらに明白です。

この動作は、ソフトウェアUIラジオボタンのスキューモーフィズムに引き継がれました。

それが正しいかどうかは言いませんが、行動の起源はその名前に隠されています。

10
CB Du Rietz

ラジオボタンは、ユーザーが何かを選択することが絶対に必要な場合に使用するためのもので、ユーザーに入力を強制する方法です。

私がウェブ上で見たことから、ラジオボタンハックの例はありませんが、システムが複数のチェックを選択することを許可しないことに気付くチェックボックスハックの例があります。ユーザーの観点からすると、ラジオの選択を空白のままにするよりも、チェックボックスから選択できるオプションは1つだけであることを理解する方が簡単です。

10
dg3a

ラジオグループごとに小さな微妙なボタン(小さな「x」など)を使用できます。このボタンを押すと、関連するグループのラジオボタンがクリアされます。これにより、これらの余分な「n/a」ラジオボタンをすべて持つよりも混乱を減らすことができ、さらにこれらの余分なラジオボタンにラベルを付ける方法を考える必要がありません。

6
holst

他の人に反対票を投じるのではなく、私の小さな声を反対側に追加したいと思います。

異なるタスクを実行するには、両方の動作が必要です。残念ながら、デフォルトの動作の反対を行う必要があるときにこの質問に出くわしました。さて、アクセシビリティについて考えた場合、JavaScriptのデフォルトの動作を変更しようとすると、まあ、ゲームの外にいます。

ここで、「必須の入力」のイデオロギーを擁護するすべての人にとって、実際の使用例について自分の周りを見てください。たとえば、okcupid.com(これは出会い系サイトです)には、ラジオグループの制御に当てはまる質問がたくさんあります。ただし、企業として機能するように厳格かつ無理に設計されていない限り、Java脳死したマネージャーがそれを設計しました。

nm選択肢を提供できるコントロールがあった場合、ここでn <= mの場合、radio-groupは、現在のように、そのより一般的なコントロールの特定のケースとして正当化されますが、悲しいかな、そのようなコントロールはありません(チェックボックスは可変数の選択肢を許可し、選択肢の数をプログラムで制限すると、やはりアクセシビリティが損なわれます)。

3
wvxvw

実際の解決策は、noneオプションと他のすべてのオプションを組み合わせたコンボ/選択を使用するか、デフォルトでnoneオプションを選択したすべてのオプションに無線を使用することです。

ウィキペディアから:

ラジオボタンまたはオプションボタンは、ユーザーが事前定義されたセットのうちの1つのみを選択できるようにする一種のグラフィカルユーザーインターフェイス要素です。

したがって、他にコンボを使用しないオプションを提供する場合は、NONEのオプションを提供する必要があります。

3
MB34

これに関するOPに完全に同意します。 「ラジオボタンを押して2つのオプションから選択しない」という主張は完全に偽物です。

コンピューターまたはその他の電気機器を見てください。ボタンを押して何かをオンにし、同じボタンを押してオフにします。ラジオボタンの選択解除を許可しないことは、エンドユーザーにとって直感的ではありませんが、まったく逆です。

ユーザーが古いデータまたは現在のデータのみを表示することを選択する必要がある場合があります。これはバイナリ操作(表示/非表示)であるため、2つのラジオボタンは必要ありません。彼らがクリックして心を変えた場合、ページを更新することを除いて、彼らにそれをさせることはできません。なぜONEオプションを選択/選択解除できないのですか?この機能には無数のユースケースがあります。まだ1つの(true/false)値を送信しているだけなので、ロジックは壊れません。

3
RadioButtonBad

ラジオボタン=必須の単一値フィールド。

いずれかを提出のために選択する必要があります。 Noneオプションが必要な場合。最初のラジオを「なし」にします。

それ以外の場合はチェックボックスを使用します-複数選択が可能です

3
Jon Darke

純粋にUXのソリューションは、ユビキタスな赤いアスタリスク(*)を質問に単に追加することです。これは、ほとんどの人が「必須」を意味すると理解しています。

ラジオボタンの動作に関する主な問題は、jsfiddleリンクに示されているような質問で設計された質問で、「上記のいずれでもない」場合、ユーザーは何をすべきかわからないことです。最初の考えは、ボタンがトグルであることを期待してボタンを再度クリックすることです。これは、物理ボタンでは非常に一般的な機能です。

「必須」マーカーを追加すると、ユーザーがmustオプションの1つを選択することを確認できます(そして、 「上記のいずれでもない」タイプのオプションを提供しない可能性があります。)

2
DocSalvager

これは主観的なことかもしれませんが、私はこれが言われる必要があるように本当に感じました。ラジオボタンの標準的な動作方法は素晴らしいと思います。

その理由を説明します。

ユーザーについて少し考えてみましょう。ユーザーがフォームに入力するために必要なものでラジオボタンが既に選択されている場合はどうなりますか?それは素晴らしいユーザーエクスペリエンスを提供しませんか?

考えられるユーザー操作のシナリオについて考えてみましょう。

ユーザーが対処する必要のないクリック/タッチを1つ少なくすることで、間違いなくより良いユーザーエクスペリエンスが提供されます。これで、ユーザーエクスペリエンス全体が完璧になる可能性が低くなる可能性があります "選択を変更する必要はありません"エクスペリエンスですが、可能です。特にそのように設定した場合。

ラジオボタンには、最初にページにアクセスしたときに既にオプションが選択されています。繰り返しになりますが、これは非常に主観的ですが、ユーザーリサーチが適切に行われていれば、デフォルトがユーザーが選択するものの大部分である場合、ラジオボタンでタッチ/クリックの目標を達成できない可能性があります。

あなたが私に尋ねればかなり素晴らしいもの。私は、ラジオボタンの標準的で使い慣れた使用に固執するという点で他の人に同意します。

結局のところ、それは本当にあなたが取り組んでいるプロジェクトの目標にかかっていると思います。

これは、オプションがすでに選択されているという意味の非常に単純な例です:

http://www.echoecho.com/htmlforms10.htm

2
Sean

リストのラジオ項目に明確な機能を埋め込むのはかなり混乱すると思います。 「何も選択しない」。これをウェブで見たときはいつでも、なぜそうなのか理解できませんでした。直感的ではないと思います。

" clear selection "の機能は、必要に応じて別のボタンにする必要があると思います-ほぼリセットです。これは、たとえばスクロールするアイテムが多数ある場合に特に重要です。 「選択をクリア」ボタンは画面の固定領域にあるはずです。

1
Lisa Tweedie

ここで重要なのは、ラジオボタン(のグループ)がある場合、それらの1つを選択する必要があることを意味します(これにより、ラジオの動作が決まります)。 1つを選択せず​​、デフォルトのままにします。選択できないコントロールがクライアントで必要な場合は、チェックボックスを使用する必要があります。チェックボックスをオフにしないでください。ユーザーが1つだけ選択したい場合は、意図した動作ではありません。自由と多くの選択肢も。

1
ThaSaleni

私は2つの解決策を見ます:

  1. 他のどれも当てはまらない場合は、ラジオボタン「その他」を使用します。性別を選択するための「その他」も提供する必要があります。性転換者は「男性」も「女性」も感じず、別の選択肢を好むかもしれません。あなたがそれで何をするかはあなたの選択です。調査で男性の割合を知りたい場合は、「その他」を無視して、男性と女性を数えるだけです。

  2. ラジオボタングループにチェックボックスを追加し、チェックボックスがオフの場合はグループ全体をグレー表示します。上記の例では、チェックボックスに「性別を選択」という名前を付け、チェックボックスがオフのときにラジオボタン「その他」が選択されているかのように処理することができます。

1
stevenvh