web-dev-qa-db-ja.com

YES / NO / NONEのようなトリプルオプションの推奨コントロールはありますか？

ユーザーが3つの選択肢を持つユーザー意見ページを設計しています。たとえば、「適切ですか」という質問の場合。 3つのオプションは、「YES」、「NO」、または「NoIdea」です。

この場合、どのコントロールを使用すればよいですか？

使用可能なネイティブコントロールがない場合、そのコントロールで使用可能なangular-uiまたはjquery-uiプラグインはありますか？

gui-designhtmljquery
19
kriznaraj

限られた数の選択肢から1つのオプションを選択するには、 ラジオボタン入力 を選択します。

27
msp

一般に、HTMLで1対多の選択肢を設定する自然な方法は2つあります。1つはラジオボタンのセット、もう1つはselect要素です。後者は、初期サイズで表示されるオプションの数を指定するsize属性、またはデフォルトで1に設定されたsizeで使用できます。使いやすさのために、すべてのオプションを最初に表示することをお勧めします。最初にメニューを開くのではなく、ユーザーが正しいものを選択できるようにします。 <select size=3 ...>で作成されたリストボックスの代わりに、これが通常の方法であり、ユーザーがそれに慣れているため、これはラジオボタンで行うのが最適です。ただし、場合によってはスペースを節約する必要があり、selectエレメントをデフォルトのsizeで使用する必要があります。

通常、ユーザーはnotを最初に選択されたとおりに設定する必要があります。これは、ユーザーがまったく応答しない場合は、「アイデアなし」の応答とは異なる方法で処理される可能性があるためです。回答がないと見落としになる可能性があります（ユーザーが質問を逃した）。

5
Jukka K. Korpela

他の回答にも同意します。3つの選択肢がある入力には、ラジオボタンが最適です。 GNOME開発者によると、次の理由により、問題に適しています。

ラジオボタンは、相互に排他的なオプションのセットから選択するためにグループで使用されます。

https://developer.gnome.org/hig/stable/radio-buttons.html.en

ラジオボタンまたはリストは、利用可能なすべてのオプションを一度に表示するので、ドロップダウンリストよりも好まれます。

https://developer.gnome.org/hig/stable/drop-down-lists.html.en

残念ながら、ラジオボタンのデフォルトのスタイルは退屈ですが、 .btn-group class from Bootstrap は、ラジオボタンのスタイルを改善するのに役立ちます。

YES NO No Idea （または） YES NO No Idea

JSFiddleデモ：

欠点は、jQuery、Bootstrap CSSおよびJSが必要です（これらのJSFiddleリンクのExternal Resourcesタブを参照） CDN URL）。

HTMLコードは次のとおりです。

<div class="btn-group" data-toggle="buttons">
    <label data-value="yes" class="control-label btn btn-default" for="button_1">
        <input id="button_1" name="opinion" required="required" value="yes" checked="checked" type="radio"/>
        YES
    </label>
    <label data-value="no" class="control-label btn btn-default" for="button_0">
        <input id="button_0" name="opinion" required="required" value="no" type="radio"/>
        NO
    </label>
    <label data-value="no_idea" class="control-label btn btn-default" for="button_void">
        <input id="button_0" name="opinion" required="required" value="no_idea" type="radio" />
        No Idea
    </label>
</div>
5
A.L

私は通常ラジオボタンを好みますが、-実験とテストのオプションとして-スライダーを使用できます。例：

はい
 _ 
：
：
▲
いいえ意見
▼
：
    ：
    _
   番号

テストでは、上/下および左/右の偏見/傾向を考慮するように注意してください。アップは「良い」、ダウンは「悪い」傾向があります。そして、左右は政治と政治哲学に密接に絡み合っています。

2
Mayo

ユースケースに従って、この場合はラジオボタンが最適です。すべてのオプションを1行に配置することも、上下に配置することもできます。これで問題が解決することを願っています。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

0
NB4