HTML 양식 : 선택 옵션과 데이터 목록 옵션

Select-Option과 Datalist-Option의 차이점이 무엇인지 궁금합니다. 둘 중 하나를 사용하는 것이 더 좋은 상황이 있습니까? 각각의 예는 다음과 같습니다.

선택 옵션

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

데이터리스트 옵션

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

요구 사항과 제안의 차이점으로 생각하십시오. 위해 select요소, 사용자는 사용자가 제공 한 옵션 중 하나를 선택해야합니다. 위해 datalist요소, 사용자는 주어진 한 옵션 중 하나를 선택하는 것이 좋습니다,하지만 그는 실제로 자신이 입력에 원하는 것을 입력 할 수 있습니다.

편집 1 : 사용하는 것은 요구 사항에 따라 다릅니다. 사용자 가 선택 사항 중 하나를 입력 해야하는 경우 select요소를 사용하십시오 . 사용이 입력 할 수 있다면 무엇이든, 사용 datalist요소를.

편집 2 : HTML Living Standard 에서이 tidbit를 찾았습니다 . "datalist 요소의 자손 인 각 옵션 요소는 제안을 나타냅니다."

기술적 인 관점에서 보면 완전히 다릅니다. <datalist>다른 요소에 대한 옵션의 추상 컨테이너입니다. 귀하의 경우에는 함께 사용 <input type="text"했지만 범위, 색상, 날짜 등과 함께 사용할 수도 있습니다. http://demo.agektmr.com/datalist/

자동 완성 유형으로 텍스트 입력과 함께 사용하는 경우 실제로 문제는 다음과 같습니다. 자유로운 텍스트 입력 또는 미리 결정된 옵션 목록을 사용하는 것이 더 낫습니까? 이 경우 대답이 조금 더 분명하다고 생각합니다.

<datalist>텍스트 필드의 옵션 목록으로 사용하는 데 중점을두면 다음과 선택 상자의 차이점이 있습니다.

• <datalist>공급 텍스트 상자가 표시 레이블 및 제출 모두를위한 하나의 문자열이 있습니다. 선택 상자는 제출 값과 표시 레이블이 다를 수 있습니다 <option value='ie'>Internet Explorer</option>.
• <datalist>공급 텍스트 상자가 지원하지 않는 <optgroup>디스플레이를 구성하는 태그를.
• 당신은에서 옵션 목록에 사용자를 제한 할 수 없습니다 <datalist>당신은 때와 수처럼 <select>.
• onchange를 이벤트가 다르게 작동합니다. 켜짐 <select>과 반면 요소 onchange를 이벤트 변경 즉시 소성 <input type="text"요소가 포커스를 잃을 또는 사용자가 Enter 키를 누를 후에 이벤트가 발생된다.
• <datalist>브라우저 전반에 걸쳐 드문 드문 지원이 있습니다. 사용 가능한 모든 옵션을 표시하는 방법이 일치하지 않으며 상황이 악화 될뿐입니다.

마지막 요점은 실제로 제 생각에는 큰 것입니다. 보다 보편적 인 자동 완성 대체를해야하므로을 구성하는 데 어려움을 겪을 이유가 거의 없습니다 <datalist>. 또한 적절한 자동 완성 플러그를 사용하면 옵션 표시 스타일을 지정할 수 있습니다 <datalist>. 만약 <datalist>허용 <li>하면, 그것은 정말 좋은했을 원하는 그러나 당신이 조작 할 수 있다는 요소! 하지만.

또한 내가 알 수있는 한, <datalist>검색은 문자열의 시작 부분과 정확히 일치합니다. 따라서 <option value="internet explorer">'탐색기'를 검색하고 검색하면 결과가 없습니다. 대부분의 자동 완성 플러그인은 텍스트의 아무 곳이나 검색합니다.

<datalist>사용자가 최신 Chrome 또는 Firefox를 보유하고 있다는 사실을 100 % 확실하게 알고 있으며 가짜 값을 제출하려고 시도하지 않는 일부 내부 페이지의 빠르고 게으른 편의 도우미 로만 사용 했습니다. 다른 경우에는 <datalist>브라우저 지원이 매우 좋지 않아 사용을 권장하기가 어렵습니다 .

데이터 목록에는 자동 완성 및 제안이 기본적으로 포함되어 있으며 사용자가 제안에 정의되지 않은 값을 입력 할 수도 있습니다.

선택은 사용자가 선택해야하는 사전 정의 된 옵션 만 제공합니다.

데이터 목록은 HTML5 지원 브라우저의 새로운 HTML 태그입니다. 옵션 목록이있는 텍스트 상자로 렌더링됩니다. 예를 들어 성별 텍스트 상자의 경우 텍스트 상자에 'M'또는 'F'를 입력하면 남성 여성 옵션이 제공됩니다.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

"하나를 사용하는 것이 더 좋은 상황이 있습니까?"라는 질문의 일부에 구체적으로 대답하려면 반복되는 섹션이있는 양식을 고려하십시오. 반복 섹션에 많은 select태그 가 포함 option된 경우 모든 행에 대해 선택마다 s를 렌더링해야합니다.

이러한 경우에, 나는 사용을 고려할 것 datalist과 input동일하기 때문에, datalist임의의 수에 사용할 수 input의. 이로 인해 서버에서 많은 렌더링 시간이 절약 될 수 있으며 여러 행으로 확장 될 수 있습니다.

데이터 목록에 선택된 기능이 없습니다. 선택의 여지가 있지만 기본 옵션을 가질 수는 없습니다. 다음 페이지에서도 선택한 옵션을 표시 할 수 없습니다.

select와 사이에는 또 다른 중요한 차이점이 datalist있습니다. 다음은 브라우저 지원 요소입니다.

select는 datalist와 비교하여 브라우저에서 널리 지원됩니다. datalist에 대한 완벽한 브라우저 지원은이 페이지를 참조하십시오.

데이터리스트 브라우저 지원

IE6 이상, Firefox 2 이상, Chrome 1 이상 등 모든 브라우저에서 효과적으로 select가 지원되는 경우

선택과 유사하지만 데이터 목록에는 자동 제안과 같은 추가 기능이 있습니다. 입력 할 때와 입력 할 때 제안을 입력하고 볼 수도 있습니다.

사용자는 목록에없는 항목을 쓸 수도 있습니다.