HTML 미리 정의된 입력 옵션

소개

HTML datalist 태그는 사용자가 입력 필드에 입력할 때 나타나는 미리 정의된 옵션 목록을 제공하는 데 사용됩니다. 이 랩에서는 datalist 태그를 사용하여 양식에서 자동 완성 기능을 활성화하는 방법을 배웁니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

입력 필드 추가

"index.html"이라는 HTML 파일을 생성합니다.

<input> 태그를 사용하여 HTML 파일에 입력 필드를 추가합니다.

<input type="text" id="car-brand" />

Datalist 생성

<datalist> 태그와 id 속성을 사용하여 datalist 를 생성합니다.

<datalist id="car-brands"> </datalist>

Datalist 에 옵션 추가

<option> 태그를 사용하여 datalist 에 몇 가지 옵션을 추가합니다.

<datalist id="car-brands">
  <option value="Toyota"></option>
  <option value="Honda"></option>
  <option value="BMW"></option>
  <option value="Ford"></option>
  <option value="Tesla"></option>
</datalist>

입력 필드를 Datalist 에 연결

list 속성을 사용하고 해당 값을 datalist 의 ID 로 설정하여 입력 필드를 datalist 에 연결합니다.

<input type="text" id="car-brand" list="car-brands" />

변경 사항을 저장하고 여러 자동차 브랜드가 있는 양식에서 자동 완성 기능을 테스트합니다.

요약

이 간단한 단계를 따르면 HTML 코드에서 datalist 태그를 구현하여 양식에서 자동 완성 기능을 제공할 수 있습니다. datalist 태그를 사용하면 사용자가 미리 정의된 옵션 목록에서 선택할 수 있으며, 필요에 따라 미리 정의된 옵션 외의 값을 입력할 수도 있습니다.