Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 태그 – 입력 필드에 미리 정의된 옵션 설정하기

HTML <datalist> 태그란?

<datalist> 태그는 <input> 태그에 미리 정의된 선택 옵션 목록을 지정할 때 사용합니다. 사용자가 입력 필드에 마우스 커서를 위치시키거나 클릭하면, 미리 정의해 둔 옵션들이 드롭다운 형태로 나타나 손쉽게 값을 선택할 수 있습니다.

<datalist>는 <select> 태그와 유사하지만, 사용자가 목록에 없는 값을 직접 입력할 수도 있다는 점이 다릅니다. 즉, 자동완성 편의성과 자유로운 입력 기능을 동시에 제공하는 요소입니다.

예제

다음은 HTML에서 <datalist> 태그를 활용한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<p>Favorite Subject</p>
<form action="" method="get">
    <input list="subject" name="subject">
    <datalist id="subject">
        <option value="Programming">
        <option value="Networking">
        <option value="Database">
        <option value="Big Data">
        <option value="Cloud">
        <option value="Framework">
    </datalist>
    <input type="submit">
</form>
</body>
</html>

실행 결과

HTML datalist 태그 – 입력 필드에 미리 정의된 옵션 설정하기

입력 상자 안에 마우스 커서를 두면 아래와 같이 미리 정의된 옵션들이 화면에 표시됩니다.

HTML datalist 태그 – 입력 필드에 미리 정의된 옵션 설정하기

코드 설명

위 예제에서는 <input> 태그의 list 속성 값과 <datalist> 태그의 id 값을 일치시켜 두 요소를 연결했습니다. 이처럼 list 속성으로 datalist의 id를 참조해야만 옵션 목록이 정상적으로 표시됩니다.

<datalist id="subject">
    <option value="Programming">
    <option value="Networking">
    <option value="Database">
    <option value="Big Data">
    <option value="Cloud">
    <option value="Framework">
</datalist>

입력 필드에 커서를 위치시키면 <datalist> 요소로 미리 정의한 다음 옵션들이 드롭다운 목록으로 나타납니다.

Programming
Networking
Database
Big Data
Cloud
Framework

정리

  • <input>의 list 속성 값과 <datalist>의 id 값이 반드시 일치해야 합니다.
  • 옵션은 <option> 태그의 value 속성으로 지정합니다.
  • 사용자는 목록에서 선택하거나, 목록에 없는 값을 직접 입력할 수도 있습니다.
  • Chrome, Firefox, Safari, Edge 등 주요 브라우저에서 모두 지원됩니다.