HTML의 데이터 목록

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

구문:

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

여기에는 두 가지 주요 태그가 있습니다. 하나는 태그이고 두 번째는

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

속성:

HTML의 Datalist 태그 예

다음은 예시입니다.

예시 #1

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

코드:

<label> Car Brand: </label>
<input list="car_brands" name="car brand">
<datalist id="car_brands">
<option value="Honda ">
</option>
<option value="Hyundai ">
</option>
<option value="Toyota ">
</option>
<option value="Volkswagen ">
</option>
<option value="Ford ">
</option>
<option value="Mazda ">
</option>
<option value="Chevrolet ">
</option>
<option value="Kia ">
</option></datalist>

여기에는 자동차 브랜드로서의 입력 요소가 있습니다. 표시되는 자동 제안에서는 옵션 태그에 나열되어 있습니다. datalist 태그의 경우 ID를 car_brands로 할당하고 동일한 내용이 입력 요소에 전달됩니다. 사용자가 사용자 상자를 클릭하거나 입력을 시작하면 위와 같이 자동 제안 값이 포함된 HTML이 자동으로 팝업됩니다.

출력:

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

예시 #2

datalist 태그는 양식 제출 시 주로 사용됩니다. 양식이 포함된 예를 살펴보겠습니다.

코드:

Car Brand:

출력:

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

예시 #3

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

코드:

<style>
.cars {
height: 110px;
background-color: cadetblue;
width: 100%;
}
</style>


<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>
<option value="Audi ">
</option>
<option value="Cadillac ">
</option>
<option value="Chevrolet ">
</option>
<option value="Honda ">
</option>
<option value="Hyundai ">
</option>
<option value="Chrysler ">
</option>
<option value="Kia ">
</option></datalist>
</div>

사용자 입력 없이 출력:

사용자가 입력을 시작할 때 출력:

여기서 사용자가 입력 상자에 'c' 값을 입력하면 HTML은 문자 'c'로 시작하는 모든 자동 제안 값을 표시합니다. 또한 알파벳에 따라 자동 제안되는 기능을 표시하도록 옵션 요소를 수정했습니다.

참고: Internet Explorer 9 및 Safari 12.0과 그 이전 버전을 제외한 거의 모든 브라우저는 데이터 목록 태그를 지원합니다. datalist 태그를 사용하는 동안 이 점을 명심하십시오.

결론

사용자 입력을 받을 때 자동 제안 기능은 HTML5에서 제공하는 기능입니다. datalist 태그는 이 기능을 구현하는 데 사용됩니다. datalist 태그는 일반적으로 input 태그와 함께 사용됩니다.

위 내용은 HTML의 데이터 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!