消防士

昨日、私の若い同僚と非常に才能のあるデザイナーは、私たちのベースキャンプで彼の最新のモックアップを共有しました.
いつものように、それは美しかったし、バランスのとれた.私の内側のシーザーが叫んでいる間、私の心臓が突然出血し始めるまで
これは、まもなくつぶやきました.

ウィリアム・ゲラン

選択フォームフィールドの上に“選択”を持つことは、引き出しの中にあなたの靴下の上に“選択”ステッカーと木製のパネルを持つようなものです.
午前8時50分- 2014年5月22日

チャレンジ

長年にわたって、しばしばインターンや若い同僚たちに説明しなければならないことがよくわかりました.

<select>
  <option value=" ">Choose one...</option>
  <option value="foo">First choice</option>
  <option value="bar">Second choice</option>
</select>

実際には常に悪い練習であり、どのようにさまざまな状況の束でそれを避けるために.
今回は、トピックについて私の意見を一度に説明しようとしています.

なぜ1つを選ぶ悪い

次のHTMLコードを調べましょう.

<select name="icecream">
  <option value=" ">Choose one...</option>
  <option value="banana">Banana</option>
  <option value="cream">Cream</option>
  <option value="smurf">Smurf</option>
</select>

問題は、最初のオプションはオプションに適した任意の目的を持っていないことです.
その最初はオプションは、ちょうどあなたが最初の場所で選択したい実際のオプションを選択することです!

これは狂気です、そして、私はスパルタがそれを書くためによく私を蹴るつもりでないと約束しません.
「1つを選ぶ…」という意味はありませんオプションとして.
あなたが選択したい<option> , の仕事は<label> . 別でない<option> .

そしてそれを修正する方法

基礎

戦いの第一のルールはあなたはいつもそれについて話します、そして、あなたもAを使います<label> .

<label for="icecream">Choose an icecream:</label><br />
<select name="icecream" id="icecream">
  <option value="banana">Banana</option>
  <option value="cream">Cream</option>
  <option value="smurf">Smurf</option>
</select>

第二のルール:あなたは本当に、本当に“選択”の単語を使用する必要がある場合は、内部でそれを使用する<label> .
私たちが基本を知っているので、2つの異なったシナリオでそれらを行動で見ましょう、そして、それらのシナリオの各々のための適切な最初のオプションを選ぶ方法を見ましょう.

< select >のようなフィルタ

時<select> 可能な項目のリストをフィルタリングするために使用され、ほぼ常にすべてのオプションを最初に表示する必要があります.

<label for="superheroes">Show superheroes:</label><br />
<select name="superheroes" id="superheroes">
  <option value="all">All</option>
  <option value="flying">Flying</option>
  <option value="super-force">Super-force</option>
  <option value="super-sight">Super-sight</option>
</select>

注意:

それらのすべてを示す値<option> は空です.
それはあなたのバックエンドの実装とコーディングスタイルに依存します.

この例では、選択が必須であるので、最初のものとして彼らにすべてのオプションを示すことは完全に必要条件に合います.

実際に何かオプションをフィルターにかけることはしばしば良いデフォルトのものです.

選択的でない< select >のようなフィルタ

OK、私は浮気.最初の例はどちらの場合も有効です.
選択が必須であるかどうかにかかわらず、それは本当に重要でありません:あなたがフィルタのようなとき<select> , あなたはいつも恐ろしい“選択1を使用して回避することができます…”ファーストオプション.ジャストウイニングウィズ<label> + すべての最初のオプションのコンボを表示します.

単純選択1選択

時<select> あなたがいくつかの可能なオプションのうちの1つを選ぶように、フォームの中で使われます、ものは未熟なパドワナのためにトリッキーになることができます.
私たちのために私はこの非常にブログ記事を書いている!
これを考える

<label for="opponent">Choose your opponent:</label><br />
<select name="opponent" id="opponent">
  <option value="godzilla">Godzilla</option>
  <option value="optimus_prime">Optimus Prime</option>
  <option value="shaq">Shaq</option>
  <option value="batman">Batman</option>
  <option value="chuck_norris">Chuck Norris</option>
  <option value="indiana_jones">Indiana Jones</option>
</select>

場合ゴジラは、貧しい人の戦闘機は、毎回、あなたの仕事はここに行われていないデフォルトの対戦相手です.
しかし、あなたは少しより少ない悪でもありえます、そして、それらの戦士にデフォルトでインディアナジョーンズに対して彼ら自身をためさせてください－しかし、その銃に用心してください!
それより簡単な何もない.ジャストアドselected="selected" 属性selected ) 望む<option> :

<label for="opponent">Choose your opponent:</label><br />
<select name="opponent" id="opponent">
  <option value="godzilla">Godzilla</option>
  <option value="optimus_prime">Optimus Prime</option>
  <option value="shaq">Shaq</option>
  <option value="batman">Batman</option>
  <option value="chuck_norris">Chuck Norris</option>
  <option value="indiana_jones" selected="selected">Indiana Jones</option>
</select>

ET Vil il!インディは最初の対戦相手だ.

単純な選択ではなく

今、選択が必須でないならば、私がそれをスキップすることができて、誰と戦ってもなしで歩くことができるならば、どうですか?
モンティブリュースターオプションを追加し、一日を呼び出します.

時には選択は非選択であることができます-孔子.
待って、モンティブリュースターオプションは何ですか?
以下は簡単な選択です<select> ない悪い選択の代わりにモンティブリュースターオプションを使用していない必須の選択では、“1つを選択…”オプション.

<label for="opponent">Choose your opponent:</label><br />
<select name="opponent-2" id="opponent-2">
  <option value=" ">None</option>
  <option value="godzilla">Godzilla</option>
  <option value="optimus_prime">Optimus Prime</option>
  <option value="shaq">Shaq</option>
  <option value="batman">Batman</option>
  <option value="chuck_norris">Chuck Norris</option>
  <option value="indiana_jones">Indiana Jones</option>
</select>

注意:

以前のように、モンティブリュースターの値<option> あなたが望む何でもすることができます.それはあなたのバックエンドの実装とコーディングスタイルに依存します.

場合は、任意のブラウザは常にデフォルトの1つとして、希望のオプションをレンダリングすることを確認してくださいselected="selected" 属性.

閉鎖思考

私が実証したように、「1つを選ぶ…」を使用するのを避けることは常に可能ですファーストオプション<select> .
それを使用して安価で、怠惰、新来者に混乱し、今、あなたは正しいことを実装する方法については、このブログのポストを持っています.
それについてどう思いますか.
あなたは、私がカバーするのを忘れたユースケースを見つけましたか?
私に知っている、またはコメントを残してみましょう!

Originally posted here: https://www.williamghelfi.com/blog/2014-05-24-select-form-field-bad-practices-and-how-to-fix-it/