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

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>

---

I noticed that there is no selected feature in datalist. It only gives you choice but can't have a default option. You can't show the selected option on the next page either.

---

To specifically answer a part of your question "Is there any situation in which it would be better to use one or the other?", consider a form with repeating sections. If the repeating section contains many select tags, then the options must be rendered for each select, for every row.

In such a case, I would consider using datalist with input, because the same datalist can be used for any number of inputs. This could potentially save a large amount of rendering time on the server, and would scale much better to any number of rows.

---

There is another important difference between select and datalist. Here comes the browser support factor.

select is widely supported by browsers compared to datalist. Please take a look at this page for complete browser support of datalist--

Datalist browser support

Where as select is supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

---

Its similar to select, But datalist has additional functionalities like auto suggest. You can even type and see suggestions as and when you type.

User will also be able to write items which is not there in list.

참고URL : https://stackoverflow.com/questions/6865943/html-form-select-option-vs-datalist-option