🐧label 태그
📌label 태그 : 입력태그의 입력촛점(InputFocus)을 제공하기 위한 태그
🌠for 속성 : 입력태그의 식별자(id 속성값)을 속성값으로 설정
→ label 태그를 클릭할 경우 입력촛점을 제공할 입력태그를 설정
📃21_label.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>label 태그</h1> <hr> <!-- label 태그 : 입력태그의 입력촛점(InputFocus)을 제공하기 위한 태그 --> <!-- label 태그를 사용하지 않은 경우 입력태그를 직접 선택해야만 입력촛점 제공 --> <h3>label 태그 미사용</h3> <p>이름 : <input type="text" name="name"></p> <p>취미 : <input type="checkbox" name="hobby" value="낚시">낚시 <input type="checkbox" name="hobby" value="등산">등산 <input type="checkbox" name="hobby" value="독서">독서 <input type="checkbox" name="hobby" value="게임">게임 </p> <hr> <!-- label 태그를 사용한 경우 label 태그를 이용하여 입력태그에 입력촛점 제공 가능 --> <h3>label 태그 사용</h3> <p><label>이름 : <input type="text" name="name"></label></p> <p>취미 : <!-- for 속성 : 입력태그의 식별자(id 속성값)을 속성값으로 설정 --> <!-- → label 태그를 클릭할 경우 입력촛점을 제공할 입력태그를 설정 --> <input type="checkbox" name="hobby" id="hobby1" value="낚시"><label for="hobby1">낚시</label> <input type="checkbox" name="hobby" id="hobby2" value="등산"><label for="hobby2">등산</label> <input type="checkbox" name="hobby" id="hobby3" value="독서"><label for="hobby3">독서</label> <input type="checkbox" name="hobby" id="hobby4" value="게임"><label for="hobby4">게임</label> </p> </body> </html>
🐧textarea 태그
📌textarea 태그 : 다수행의 문자값을 입력받기 위한 태그 - 입력태그
→ 태그내용이 입력태그의 초기값으로 설정
🌠rows 속성 : 입력태그의 행의 갯수(높이)를 속성값으로 설정
🌠cols 속성 : 입력태그의 열의 갯수(폭)를 속성값으로 설정
📃22_textarea.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>textarea 태그</h1> <hr> <!-- textarea 태그 : 다수행의 문자값을 입력받기 위한 태그 - 입력태그 --> <!-- → 태그내용이 입력태그의 초기값으로 설정 --> <!-- rows 속성 : 입력태그의 행의 갯수(높이)를 속성값으로 설정 --> <!-- cols 속성 : 입력태그의 열의 갯수(폭)를 속성값으로 설정 --> <form action="#" method="post"> <table> <tr> <td>장점</td> <td><textarea rows="5" cols="80" name="good">장점이 아주 많습니다.</textarea></td> </tr> <tr> <td>단점</td> <td><textarea rows="5" cols="80" name="bad"></textarea></td> </tr> <tr> <td colspan="2"><button type="submit">입력완료</button></td> </tr> </table> </form> </body> </html>
🐧select 태그
📌select 태그 : 목록에서 값을 선택하여 입력받기 위한 태그 - 입력태그
→ 기본적으로 단일값을 선택하여 전달 가능하지만 속성에 의해 다수값 선택 가능
→ 하위태그 : option(꼭 있어야함), optgroup🌠multiple 속성 : 다수의 목록을 선택하기 위한 속성 - 속성값 생략 가능
📌optgroup 태그 : option 태그를 하나의 그룹으로 표현하기 위한 태그
🌠label 속성 : 그룹의 이름을 속성명으로 설정
<optgroup label="공과대">
📌option 태그 : 선택 목록에 대한 값을 제공하기 위한 태그
🌠selected 속성 : 우선 선택 속성 - 속성값 생략 가능
<option value="arch">건축공학과</option> <option value="machinic">기계공학과</option> <option value="indust">산업공학과</option> <option value="computer">컴퓨터공학과</option> <option value="chemical">화학공학과</option>
📃23_select.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>select 태그</h1> <hr> <!-- select 태그 : 목록에서 값을 선택하여 입력받기 위한 태그 - 입력태그 --> <!-- → 기본적으로 단일값을 선택하여 전달 가능하지만 속성에 의해 다수값 선택 가능 --> <!-- 하위태그 : option(꼭 있어야함), optgroup --> <!-- multiple 속성 : 다수의 목록을 선택하기 위한 속성 - 속성값 생략 가능 --> <form action="#" method="post"> <label for="class">학과</label> <!--<select id="class" name="class" multiple="multiple">--> <select id="class" name="class"> <!-- optgroup 태그 : option 태그를 하나의 그룹으로 표현하기 위한 태그 --> <!-- label 속성 : 그룹의 이름을 속성명으로 설정 --> <optgroup label="공과대"> <!-- option 태그 : 선택 목록에 대한 값을 제공하기 위한 태그 --> <!-- selected 속성 : 우선 선택 속성 - 속성값 생략 가능 --> <option value="arch">건축공학과</option> <option value="machinic">기계공학과</option> <option value="indust">산업공학과</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> <button type="submit">입력완료</button> </form> </body> </html>
🐧datalist 태그
📌datalist 태그 : input 태그에 입력 가능한 값을 목록으로 제공하기 위한 태그
→ 하위태그 : option
🌠list 속성 : datalist 태그의 식별자를 속성값으로 설정
→ input 태그에 datalist 태그의 목록을 입력값으로 제공
<input type="text" name="subject" id="subject" list="subjectlist">
📃24_datalist.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>datalist 태그</h1> <hr> <!-- datalist 태그 : input 태그에 입력 가능한 값을 목록으로 제공하기 위한 태그 --> <!-- → 하위태그 : option --> <form action="#" method="post"> <label for="subject">좋아하는 과목 : </label> <!-- list 속성 : datalist 태그의 식별자를 속성값으로 설정 --> <!-- → input 태그에 datalist 태그의 목록을 입력값으로 제공 --> <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>
🐧fieldset 태그
📌fieldset 태그 : 입력태그의 영역을 구분하기 위한 태그
→ 하위태그 : legend, input, select, textarea 등
📌legend 태그 : 입력태그의 영역에 대한 제목을 제공하기 위한 태그
<legend>인증정보</legend>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style type="text/css">
fieldset, div {
width: 500px;
margin: 10px 20px;
}
li {
list-style-type: none;
margin: 10px;
}
</style>
</head>
<body>
<h1>fieldset 태그</h1>
<hr>
<!-- fieldset 태그 : 입력태그의 영역을 구분하기 위한 태그 -->
<!-- → 하위태그 : legend, input, select, textarea 등 -->
<h3>회원가입</h3>
<form action="#" method="post">
<fieldset>
<!-- legend 태그 : 입력태그의 영역에 대한 제목을 제공하기 위한 태그 -->
<legend>인증정보</legend>
<ul>
<li>아이디 : <input type="text" name="id"></li>
<li>비밀번호 : <input type="password" name="passwd"></li>
</ul>
</fieldset>
<fieldset>
<legend>개인정보</legend>
<ul>
<li>이름 : <input type="text" name="name"></li>
<li>이메일 : <input type="text" name="email"></li>
<li>전화번호 : <input type="text" name="phone"></li>
</ul>
</fieldset>
<div>
<button type="submit">회원가입</button>
<button type="reset">다시입력</button>
</div>
</form>
</body>
</html>
