-
<datalist>: 여러 데이터의 나열 중 하나를 선택
-
<datalist>에 id부여
-
<input type="text">에 list="datalist의 id" 부여
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 웹 폼</title>
<style>
body {
background-color:#fff;
}
form fieldset{
margin-bottom:25px;
}
form legend{
font-size:15px;
font-weight:600;
}
.reg {
font-size:14px;
width:110px;
color:#390;
font-weight:bold;
float:left;
text-align:right;
margin-right:10px;
}
form ul li{
list-style:none;
margin: 15px 0;
font-size:14px;
}
</style>
</head>
<body>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>
<label for="id" class="reg">학번</label>
<input type="text" id="id" autofocus>
</li>
</ul>
<ul>
<li>
<label for="name" class="reg">이름</label>
<input type="text" id="name">
</li>
</ul>
<ul>
<li>
<label for="major" class="reg">학과</label>
<select id="major">
<optgroup label="공과대학">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer">컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="history">사학과</option>
<option value="lang">어문학부</option>
<option value="philo">철학과</option>
</optgroup>
</select>
</li>
</fieldset>
<fieldset>
<legend>수강 과목을 선택하세요</legend>
<ul>
<li>
<label for="interest" class="reg">관심분야</label>
<input type="text" id="interest" list="choice">
<datalist id="choice">
<option value="grammar" label="문법"></option>
<option value="voca" label="어휘"></option>
<option value="listening" label="리스닝"></option>
<option value="news" label="뉴스청취"></option>
</datalist>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
'Learning > HTML&JavaScript' 카테고리의 다른 글
| CSS와 박스 모델 (0) | 2020.07.21 |
|---|---|
| 스타일과 스타일시트 글꼴 (0) | 2020.07.17 |
| 폼 관련 태그들 (0) | 2020.07.14 |
| 이미지와 하이퍼링크 (0) | 2020.07.14 |
| 표 제목(<caption>, <figure>, <figcaption>), 표 구조 정의(<thead>, <tbody>, <tfoot>), 열 스타일(<col>, <colgroup>) (0) | 2020.07.07 |
