Wulin.com의 기사 소개 (www.vevb.com) : Datalist는 일반적으로 혼자 가지 않으므로 레이블 태그 및 입력 태그와 같이 입력 태그와 함께 사용해야합니다. 입력 태그와 함께 사용 되므로이 두 태그 사이에 "특별한 관계"가 있어야합니다. 그렇지 않으면 입력과 데이터리스트가 서로를 인식하지 못합니다. 그렇다면 어떻게이 관계를 확립 할 수 있습니까? 현재 우리는 필요합니다
참고 : 다른 튜토리얼 또는 자료에서 Datalist 태그를 드롭 다운 목록이라고합니다. 이 이름이 충분히 정확하지 않다고 생각 하며이 태그를 한 번에 이해할 수 없습니다. 예를 들어, 얼마 전 : 친구가 Datalist가 스타일을 사용자 정의 할 수있는 선택인지 물었습니다. , 나중에 일부 책이나 튜토리얼은 드롭 다운 목록을 호출하여 초보자의 오해로 이어진다는 것을 알게되었습니다. 그렇다면이 태그는 어떻게 적절하다고 부릅니까? 다음 사례를 읽은 후에는 다음을 설명하겠습니다.Datalist 태그 :
Datalist 소개 :
Datalist는 일반적으로 혼자 가지 않으며 레이블 태그 및 입력 태그와 마찬가지로 입력 태그와 함께 사용해야합니다. 입력 태그와 함께 사용 되므로이 두 태그 사이에 특별한 관계가 있어야합니다. 그렇지 않으면 입력과 데이터리스트가 서로 인식하지 못합니다. 그렇다면 어떻게이 관계를 확립 할 수 있습니까? 현재 새 속성 목록이 필요합니다 (참고). 목록은 동일합니다. 목록 값은 양식 요소의 ID로 설정되어 자동 연관됩니다.
Chrome 은이 태그를 지원하지 않으며 Firefox 및 Opera는 잘 지원할 수 있습니다.
Datalist 기능 :
우리는 종종 검색 상자에서 문자를 입력 할 때 입력 한 키워드가 아래 그림과 같이 Google 또는 Baidu 검색과 같은 입력 상자 아래에 자동으로 나열됩니다.
이 효과는 HTML5 Datalist 기술로 구현되지 않습니다
Datalist 사례 :
Datalist 설명 :
나는 개인적으로 Datalist를 드롭 다운 목록이 아니기 때문에 Datalist를 자동 완료 목록으로 호출하는 것이 더 적절하다고 생각합니다.