반응형
<datalist> 요소는 HTML5의 폼 요소 중 하나로, 사용자가 입력 필드에 값을 입력할 때 자동 완성 제안을 제공하는 데 사용됩니다. <input> 요소와 함께 사용되며, 사용자에게 선택할 수 있는 옵션 목록을 제시하고 선택할 수 있습니다.
<input> 요소의 list 속성을 사용하여 <datalist> 요소를 참조하며, 입력 필드와 연결된 옵션 목록이 자동으로 표시됩니다. 키보드를 사용하여 옵션 목록을 탐색하고 선택할 수 있으며, 마우스를 사용하여도 선택할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 datalist 예제</title>
<style>
/* 스타일을 지정할 요소 선택자를 사용하여 스타일링 */
#city {
width: 200px; /* 입력 필드의 너비 조정 */
padding: 10px; /* 내부 패딩 조정 */
font-size: 16px; /* 글꼴 크기 조정 */
}
#cities option {
color: blue; /* 옵션 항목의 글꼴 색상 변경 */
}
/* 선택된 값에 대한 스타일링 */
#city::-webkit-input-placeholder {
color: gray; /* 플레이스홀더 텍스트의 색상 변경 */
}
#city::-moz-placeholder {
color: gray;
}
#city:-ms-input-placeholder {
color: gray;
}
#city:-moz-placeholder {
color: gray;
}
</style>
</head>
<body>
<label for="city">도시를 선택하세요:</label>
<input list="cities" id="city" name="city" placeholder="도시 이름을 입력하세요">
<datalist id="cities">
<option value="서울" label="seoul">
<option value="부산" label="busan">
<option value="대구" label="daegu">
<option value="인천" label="incheon">
<option value="대전" label="daejeon">
<option value="광주" label="gwangju">
<option value="울산" label="ulsan">
</datalist>
</body>
</html>
반응형
'개발이야기 > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] abbr, cite 태그 사용해서 약어와 줄임말, 인용과 출처 표시하기 (0) | 2023.09.25 |
|---|---|
| [HTML&CSS] details, summary 태그로 아코디언 메뉴 만들기 (접기/펼치기) (0) | 2023.09.08 |
| [HTML&CSS] img 태그 이미지 없을 때 대체 이미지 띄우기, 안 보이게 하기 (onerror) (0) | 2023.09.08 |
| [HTML&CSS] 텍스트, 이미지 깜빡이는 애니메이션 효과 주기 (0) | 2023.07.31 |
| [HTML&CSS] 색상 선택하기 (color picker) 사용법, 예제 (1) | 2023.07.19 |
댓글