HTML의 데이터 목록-HTML 튜토리얼-php.cn

HTML의 Datalist 태그 예

예시 #3

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML의 데이터 목록

PHPz

Sep 04, 2024 pm 04:22 PM

html html5 HTML Tutorial HTML Properties HTML tags

이 문서에서는 HTML의 데이터 목록에 대한 개요를 제공합니다. Datalist는 HTML5에서 사용할 수 있는 태그로, 사용자에게 입력 값을 자동 제안하는 데 사용됩니다. 이 태그는 입력 요소를 보다 대화형으로 만들고 사용자 인터페이스를 직관적으로 만드는 HTML5 기능입니다. <데이터 목록> 태그는 입력 요소 태그와 함께 사용됩니다. 입력 상자에 입력하는 동안 가능한 값을 표시하는 데 사용됩니다. 사용자는 입력 상자에 어떤 값이든 자유롭게 입력할 수 있습니다. datalist 태그만 자동 제안 값을 제공합니다. 따라서 사용자는 더 유연하고 쉽게 값을 입력할 수 있습니다.

구문:

<input list = "xyz" name = "input name" >
<datalist id = "xyz" >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
</datalist>

로그인 후 복사

여기에는 두 가지 주요 태그가 있습니다. 하나는 태그이고 두 번째는 꼬리표. datalist 태그는 시작 태그 로 시작합니다. 종료 태그 로 끝납니다. 모든 옵션은 datalist 태그 사이에 포함됩니다. datalist 태그(여기서는 xyz)에 ID를 할당했으며 이 동일한 id 값이 입력 태그의 list 속성에 전달됩니다. 따라서 두 태그는 모두 동일한 ID로 연결됩니다. 이제 연결되었으므로 값 목록을 표시하거나 자동 제안하려고 합니다. 그런 다음

옵션 태그는 선택 태그와 함께 사용되는 태그와 동일합니다. select 태그와 datalist 태그의 차이점에 유의하세요. select 태그를 사용하면 사용 가능한 옵션 중에서만 값을 선택할 수 있는 반면, datalist 태그는 목록에서 값을 제안할 뿐입니다. name 속성은 예시에서 입력 요소를 식별하는 데에만 사용됩니다.

속성:

에 사용할 수 있는 특별한 속성은 없습니다. 꼬리표; 기본적으로 전역적으로 사용 가능한 이벤트 및 HTML 속성을 지원합니다.

HTML의 Datalist 태그 예

다음은 예시입니다.

예시 #1

다음과 같이 자동 제안 옵션이 포함된 간단한 입력 필드를 디자인해 보겠습니다.

코드:

<! 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이 자동으로 팝업됩니다.

출력:

HTML의 데이터 목록

출력에서 입력창을 클릭하면 위와 같이 자동차 브랜드 목록이 나옵니다.

예시 #2

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>

로그인 후 복사

출력:

HTML의 데이터 목록

여기서는 출력 노트에서 입력 요소를 양식 요소로 이동하고 제출 버튼을 추가했습니다.

예시 #3

데이터 목록 자동 제안은 가능한 한 가장 일치하는 항목을 표시하려고 노력합니다. 사용자가 입력을 시작하면 사용자가 입력한 값에 따라 제안 사항이 필터링됩니다. 입력 요소의 일부 스타일과 함께 이 기능을 표시하도록 첫 번째 예를 수정해 보겠습니다.

코드:

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

로그인 후 복사

사용자 입력 없이 출력:

HTML의 데이터 목록