이 문서에서는 HTML의 데이터 목록에 대한 개요를 제공합니다. Datalist는 HTML5에서 사용할 수 있는 태그로, 사용자에게 입력 값을 자동 제안하는 데 사용됩니다. 이 태그는 입력 요소를 보다 대화형으로 만들고 사용자 인터페이스를 직관적으로 만드는 HTML5 기능입니다. <데이터 목록> 태그는 입력 요소 태그와 함께 사용됩니다. 입력 상자에 입력하는 동안 가능한 값을 표시하는 데 사용됩니다. 사용자는 입력 상자에 어떤 값이든 자유롭게 입력할 수 있습니다. datalist 태그만 자동 제안 값을 제공합니다. 따라서 사용자는 더 유연하고 쉽게 값을 입력할 수 있습니다.
구문:
<input list = "xyz" name = "input name" > <datalist id = "xyz" > <option value = " . . . " > <option value = " . . . " > <option value = " . . . " > <option value = " . . . " > </datalist>
여기에는 두 가지 주요 태그가 있습니다. 하나는 태그이고 두 번째는
옵션 태그는 선택 태그와 함께 사용되는 태그와 동일합니다. select 태그와 datalist 태그의 차이점에 유의하세요. select 태그를 사용하면 사용 가능한 옵션 중에서만 값을 선택할 수 있는 반면, datalist 태그는 목록에서 값을 제안할 뿐입니다. name 속성은 예시에서 입력 요소를 식별하는 데에만 사용됩니다.
속성:
다음은 예시입니다.
다음과 같이 자동 제안 옵션이 포함된 간단한 입력 필드를 디자인해 보겠습니다.
코드:
<! DOCTYPE html> <html> <body> <label> Car Brand: </label> <input list = "car_brands" name = "car brand" > <datalist id = "car_brands" > <option value = "Honda " > <option value = "Hyundai " > <option value = "Toyota " > <option value = "Volkswagen " > <option value = "Ford " > <option value = "Mazda " > <option value = "Chevrolet " > <option value = "Kia " > </datalist> </body> </html>
여기에는 자동차 브랜드로서의 입력 요소가 있습니다. 표시되는 자동 제안에서는 옵션 태그에 나열되어 있습니다. datalist 태그의 경우 ID를 car_brands로 할당하고 동일한 내용이 입력 요소에 전달됩니다. 사용자가 사용자 상자를 클릭하거나 입력을 시작하면 위와 같이 자동 제안 값이 포함된 HTML이 자동으로 팝업됩니다.
출력:
출력에서 입력창을 클릭하면 위와 같이 자동차 브랜드 목록이 나옵니다.
datalist 태그는 양식 제출 시 주로 사용됩니다. 양식이 포함된 예를 살펴보겠습니다.
코드:
<!DOCTYPE html> <html> <body> <form action = "#" method = "get" > <label> Car Brand: </label> <input list = "car_brands" name = "car brand" > <datalist id = "car_brands" > <option value = "Honda " > <option value = "Hyundai " > <option value = "Toyota " > <option value = "Volkswagen " > <option value = "Ford " > <option value = "Mazda " > <option value = "Chevrolet " > <option value = "Kia " > </datalist> <input type = "submit" > </form> </body> </html>
출력:
여기서는 출력 노트에서 입력 요소를 양식 요소로 이동하고 제출 버튼을 추가했습니다.
데이터 목록 자동 제안은 가능한 한 가장 일치하는 항목을 표시하려고 노력합니다. 사용자가 입력을 시작하면 사용자가 입력한 값에 따라 제안 사항이 필터링됩니다. 입력 요소의 일부 스타일과 함께 이 기능을 표시하도록 첫 번째 예를 수정해 보겠습니다.
코드:
<!DOCTYPE html>
<html>
<head>
<style>
.cars {
height: 110px;
background-color: cadetblue;
width: 100%;
}
</style>
</head>
<body>
<div class = "cars" >
<label style = "font-size: x-large; font-weight: 500; margin-left: 20px " > Car Brand: </label >
<input list = "car_brands" name = "car brand" style = "margin-top: 40px; " >
<datalist id = "car_brands" >
<option value = "Aston Martin " >
<option value = "Audi " >
<option value = "Cadillac " >
<option value = "Chevrolet " >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Chrysler " >
<option value = "Kia " >
</datalist>
</div>
</body>
</html>사용자 입력 없이 출력:
사용자가 입력을 시작할 때 출력:
여기서 사용자가 입력 상자에 'c' 값을 입력하면 HTML은 문자 'c'로 시작하는 모든 자동 제안 값을 표시합니다. 또한 알파벳에 따라 자동 제안되는 기능을 표시하도록 옵션 요소를 수정했습니다.
참고: Internet Explorer 9 및 Safari 12.0과 그 이전 버전을 제외한 거의 모든 브라우저는 데이터 목록 태그를 지원합니다. datalist 태그를 사용하는 동안 이 점을 명심하십시오.사용자 입력을 받을 때 자동 제안 기능은 HTML5에서 제공하는 기능입니다. datalist 태그는 이 기능을 구현하는 데 사용됩니다. datalist 태그는 일반적으로 input 태그와 함께 사용됩니다.
위 내용은 HTML의 데이터 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
