반응형
⚫datalist 태그 : input 태그에 입력 가능한 값을 제공하기 위한 태그
=> 하위태그 : option 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>datalist 태그</h1>
<hr>
<form method="post">
<label for="subject">좋아하는 과목 : </label>
<!-- list 속성 : datalist 태그의 식별자(id 속성값)를 속성값으로 설정 -->
<input type="text" name="subject" id="subject" list="subjectlist">
<datalist id="subjectlist">
<option>JAVA</option>
<option>JSP</option>
<option>SPRING</option>
</datalist>
<button type="submit">제출</button>
</form>
</body>
</html>
실행결과⬇️
아래와 같이 직접 입력할 수 있음.
옆에 화살표를 클릭하면 옵션으로 달아놓은 리스트가 뜨고 선택할 수도 있음.
반응형
'Frontend > HTML' 카테고리의 다른 글
| [HTML] <p> <div> <span> 차이점 (0) | 2023.12.26 |
|---|---|
| [HTML]19_fieldset 태그 (0) | 2023.12.26 |
| [HTML]17_select 태그 (0) | 2023.12.26 |
| [HTML]16_label 태그 (0) | 2023.12.26 |
| [HTML]15_label 태그 (1) | 2023.12.26 |
