HTML 기초 정리(24) - <datalist> 데이터리스트 본문
HTML 기초 정리(24) - <datalist> 데이터리스트
- 2024. 12. 13. 23:02
728x90
정의 및 사용법
태그 <datalist>는 <input> 요소에 대한 미리 정의된 옵션 목록을 지정합니다.
태그 <datalist>는 <input> 요소에 대한 "자동완성" 기능을 제공하는 데 사용됩니다.
사용자는 데이터를 입력할 때 미리 정의된 옵션의 드롭다운 목록을 보게 됩니다.
요소 <datalist>의 id 속성은 <input> 요소의 list 속성과 같아야 합니다(이렇게 하면 두 속성이 결합됩니다).
예시
<!DOCTYPE html>
<html>
<body>
<h1>The datalist element</h1>
<form action="/action_page.php" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
</body>
</html>
반응형
'프로그램 > HTML' 카테고리의 다른 글
| HTML 기초 정리(26) - <del> 취소글 (0) | 2024.12.17 |
|---|---|
| HTML 기초 정리(25) - <dd> 용어설명 (0) | 2024.12.16 |
| HTML 기초 정리(23) - <data> 데이터 (0) | 2024.12.11 |
| HTML 기초 정리(22) - <colgroup> 열집합 (0) | 2024.12.10 |
| HTML 기초 정리(21) - <col> 열요소 (0) | 2024.12.08 |
프로그램/HTML Related Articles
-
HTML 기초 정리(26) - <del> 취소글
-
HTML 기초 정리(25) - <dd> 용어설명
-
HTML 기초 정리(23) - <data> 데이터
-
HTML 기초 정리(22) - <colgroup> 열집합
RECENT COMMENT