초보개발자의 성장블로그
HTML 27 <select>와 <option> 태그 (Multiple속성, <optgroup> 태그, <datalist> 태그추가)
프론트엔드/HTML2021. 3. 19. 13:32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
이메일 : <input type="text"> @
<select>
<option>선택</option>
<option>naver.com</option>
<option>gmail.com</option>
<option>hanmail.net</option>
<option>직접입력</option>
</select>
</form>
</body>
</html>
관심있는학습주제를모두선택하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>관심있는학습주제를모두선택하세요.</h3>
<form>
<select name="subjects"size="4"multiple>
<option value="1"selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
<option value="4"selected>Jquery</option>
</select>
<p></p>
<input type="submit"value="제출">
<input type="reset"value="다시작성">
</form>
</body>
</html>
그룹별선택항목을제공합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>그룹별선택항목을제공합니다.</h3>
<form>
<label>전공분야를선택하세요.
<select name="major">
<optgroup label="computer">
<option>Software</option>
<option>Robot</option>
<option>System</option>
</optgroup>
<optgroup label="language">
<optionselected>Korea</option>
<option>English</option>
<option>China</option>
<option>Germany</option>
</optgroup>
<optgroup label="business">
<option>Service</option>
<option>Education</option>
<option>Communication</option>
<option>Marketing</option>
</optgroup>
</select>
<p></p>
<input type="submit"value="선택">
<input type="reset"value="다시선택">
</label>
</form>
</body>
</html>
선택사항을직접입력하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>선택사항을직접입력하세요.</h3>
<form>
<label>전공분야를입력하세요.
<input type="text"list="majorlist"name="major">
<datalist id="majorlist">
<option value="Software">소프트웨어</option>
<option value="Robot">로봇</option>
<option value="System">시스템</option>
<option value="Service">서비스</option>
<option value="Education">교육</option>
</datalist>
<p></p>
<input type="submit"value="완료">
<input type="reset"value="다시작성">
</label>
</form>
</body>
</html>'프론트엔드 > HTML' 카테고리의 다른 글
| HTML 29 <input type="file> 태그로 파일 선택 창 만들기 (1) | 2021.04.03 |
|---|---|
| HTML 28 <button> 태그로 세 가지 형태의 버튼 만들기 (0) | 2021.03.19 |
| HTML 26 <input type="checkbox"> 태그로 체크 박스 만들기 (0) | 2021.03.19 |
| HTML 25 <input type="radio"> 태그로 라디오 버튼 만들기 (0) | 2021.03.19 |
| HTML 24 <input type="password"> 태그로 비밀번호 입력 창 만들기 (0) | 2021.03.19 |
댓글()