점화기

어제 나의 젊은 동료이자 재능이 넘치는 디자이너가 우리의 본영에서 그의 최신 모델을 공유했다.
여느 때와 마찬가지로 그것은 아름답고 균형적이다...내 마음은 갑자기 피를 흘리기 시작했고, 내 마음속의 개사는 비명을 질렀다. "Et tu, 짐승?"
이것은 내가 얼마 후 트위터에 올린 내용이다.

윌리엄 게르피

폼 필드를 선택하는 맨 위에'Choose'가 있습니다. 마치 서랍 안의 양말 맨 위에'Choose'라벨이 있는 널빤지가 있는 것과 같습니다.
2014년 5월 22일 오전 08:50

도전을 받아들이다

여러 해 동안 나는 실습생과 젊은 동료들에게 왜 이러는지 설명해야 한다는 것을 자주 발견했다.

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

사실상, 이것은 항상 좋지 않은 방법이다. 어떻게 일련의 다른 상황에서 그것을 피할 수 있겠는가.
이번에 나는 이 화제에 대한 나의 견해를 영원히 설명하려고 했다. 정말 최종적으로 편리한 링크를 가지고 필요할 때 사람들에게 방향을 가리키기를 바랄 뿐이다.

왜 "하나를 선택..."야단났어

다음 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>

문제는 첫 번째 옵션은 옵션에 적합한 목적이 없다는 것이다.
첫 번째 "하나 선택..."옵션의 존재는 처음부터 선택하고 싶은 실제 옵션을 선택하기 위한 것입니다!

이것은 너무 미친 짓이다. 스파르타 사람들이 내가 이 글을 썼다고 해서 나를 우물에 빠뜨리지 않을 것이라고 나는 너에게 보증한다.
'하나 선택'은 의미가 없어요.일종의 선택으로
하나 <option> 를 선택하라는 것은 <label> 의 일이다.다른 것이 아니다<option>.

그리고 어떻게 복구하는지

기초 지식

전투의 첫 번째 규칙은'하나를 선택하는 것이다...'미친 클럽은 네가 자주 그것을 이야기하고, 너도 사용한다<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>

두 번째 규칙은 만약 당신이 정말로 단어'Choose'를 사용해야 한다면 <label>에서 그것을 사용하십시오.
이제 우리는 기본 지식을 이해하고 두 개의 서로 다른 장면에서의 작용을 살펴보며 각 장면에 대한 적당한 선택 옵션을 어떻게 선택하는지 살펴본다.

1.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>

메모:

showthemall<option>의 값은 비어 있습니다.
이것은 백엔드의 실현과 인코딩 스타일에 달려 있다.

본 예에서 선택은 강제적이기 때문에 showthemall 옵션을 첫 번째 옵션으로 요구에 부합합니다.

실제로 어떤 내용도 필터링하지 않는 옵션은 보통 좋은 기본 옵션입니다.

2.select 같은 필터는 강제 선택이 아니다

좋아, 내가 부정행위를 했어.첫 번째 예는 이 두 가지 상황에서 모두 효과가 있다.
강제 여부를 선택하는 것은 중요하지 않다. <select> 같은 필터가 있을 때, 무서운 하나를 선택하는 것을 피할 수 있다.첫 번째 선택.이기기만 하면 <label> + 그들에게 모든 첫 번째 옵션 조합을 보여 준다.

3. 간단한 선택, 강제 선택

폼에서 <select> 을 사용하여 가능한 옵션 중 하나를 선택하면 경험이 없는 견습생에게 까다로울 수 있습니다.
좋아, 나는 지금 이 블로그 글을 쓰고 있어!
생각해 보자:

<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>

잠깐만!인디는 첫 번째 상대다.

4. 강제 선택 대신 간단한 선택

지금 만약 이 선택이 강제적이지 않다면, 내가 그것을 뛰어넘고, 누구와도 싸우지 않고 떠날 수 있다면?
Monty Brewster 옵션을 추가하여 하루를 끝냈습니다.

때로는 선택이 비선택일 수도 있다. 공자.
잠깐만, 몬티 브루스터의 선택은 무엇입니까?
다음은 간단한 choose one<select>입니다. 비강제 옵션이 있습니다. 나쁜 "choose one..."대신 Monty-Brewster 옵션을 사용합니다.옵션

<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>의 가치는 당신이 원하는 무엇이든 될 수 있다.이것은 백엔드의 실현과 인코딩 스타일에 달려 있다.

브라우저가 항상 필요한 옵션을 기본 옵션으로 표시하는지 확인하려면 selected="selected" 속성을 추가하십시오.

생각을 끝내다

내가 이미 증명한 바와 같이 "하나를 선택하라..."를 사용하지 않기를 바란다a<select>의 첫 번째 옵션입니다.
그것을 사용하는 것은 값이 싸고 게으르며 초보자들을 곤혹스럽게 한다. 이제 이 블로그 글이 생겼는데, 그 중에는 올바른 일을 어떻게 실현하는지에 대한 예시가 있다.
어떻게 생각하세요?
너는 내가 소개하는 용례를 잊어버린 것을 찾았니?
나에게 알려주거나 댓글을 남겨라!

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