노력이 좋아서
<step12> 'html_div/ form/ select/ input'
zoaseo
2022. 4. 5. 15:20
1) div.html
<!DOCTYPE html>
<html lang="ko">
<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>
<!--
* ID, CLASS속성
div#idname : id값이 idname인 div태그
div.classname : class값이 classname인 div태그
* 요소 복제
li*3 : <li></li><li></li><li></li>
* 넘버링 - $ 위치에 값이 1부터 1씩 증가(1,2,3,4...)
li.list$*3
* 텍스트 {}
p{text} : <p>text</p>
* 그룹핑
div>(div>h1+ul)+h2
* 커스텀 속성
a[href="http:naver.com"]
-->
<div id="wrap">
<div id="header">
<h1>그린컴퓨터 아카데미</h1>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
<div id="container">
<div class="inner_container">영역1</div>
<div class="inner_container">영역2</div>
<div class="inner_container">영역3</div>
<div class="inner_container">영역4</div>
<div class="inner_container">영역5</div>
</div>
<div id="footer">
<ul>
<li><a href="#">하단menu1</a></li>
<li><a href="#">하단menu2</a></li>
<li><a href="#">하단menu3</a></li>
<li><a href="#">하단menu4</a></li>
</ul>
</div>
</div>
</body>
</html>
2) form.html
<!DOCTYPE html>
<html lang="ko">
<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>
<div id="wrap">
<h1>폼태그</h1>
<form action="join.php" method="get">
<input type="text" name="userId">
<input type="password" name="userPass">
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>
<form action="">
<input type="text">
</form>
</div>
</body>
</html>
3) select.html
<!DOCTYPE html>
<html lang="ko">
<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>
<h1>select태그와 input버튼</h1>
<form method="get" action="form_app.js">
<p>
<input type="text" placeholder="이름">
</p>
<p>
회원여부 :
<input type="radio" name="member" value="yes" checked>회원
<input type="radio" name="member" value="no">비회원
</p>
<p>
취미 :
<input type="checkbox" name="hobby" value="read">독서
<input type="checkbox" name="hobby" value="movie">영화
<input type="checkbox" name="hobby" value="music">음악
</p>
<p>
사진 :
<input type="file" name="photo">
</p>
<p>
하고싶은말 :
<textarea name="msg" id="msg" cols="30" rows="5"></textarea>
</p>
<P>
직업 :
<select name="job" id="job">
<option value="student">학생</option>
<option value="company">회사원</option>
<option value="teacher">교사</option>
</select>
</P>
<p>
<input type="submit" value="전송하기">
<input type="reset" value="초기화">
<input type="button" value="확인하기">
</p>
</form>
</body>
</html>
4) join.html
<!DOCTYPE html>
<html lang="ko">
<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>
<div id="wrap">
<h1>개인정보 입력</h1>
<form action="">
<ul>
<li>
<input type="text" name="userEmail1" placeholder="이메일">@
<input type="text" name="userEmail2">
<select name="userEmail3" id="">
<option value="">직접입력</option>
<option value="hanmail.co.kr">한메일</option>
<option value="naver.com">네이버</option>
<option value="gmail.com">지메일</option>
</select>
<input type="button" value="인증">
</li>
<li>
<input type="text" name="userName" placeholder="이름">
</li>
<li>
<input type="password" name="userPass" placeholder="비밀번호">
</li>
<li>
<input type="password" name="userPassCh" placeholder="비밀번호확인">
</li>
</ul>
<ul>
<li>
<select name="phoneNum1" id="phoneNum1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
</select>
-<input type="text" name="phoneNum2">-<input type="text" name="phoneNum3">
</li>
<li>
성별 남 <input type="radio" name="gender" value="male"> 여 <input type="radio" name="gender" value="female">
</li>
<li>
<input type="text" name="userYear">년 <input type="text" name="userMonth">월 <input type="text" name="userDay">일
</li>
</ul>
</form>
</div>
</body>
</html>
5) 예제1
<!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>
<div>
<h1>회원정보입력</h1>
<h3>회원가입 절차에 따라 아래의 항목을 정확하게 입력해 주세요.<br>(*)표시는 필수로 입력해야하는 항목입니다.</h3>
</div>
<div>
<form action="">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th><label for="userName">* 이름</label></th>
<td>
<input type="text" name="userName" id="userName">
</td>
</tr>
<tr>
<th><label for="phoneNum">* 휴대폰 번호</label></th>
<td>
<input type="text" name="phoneNum1" id="phoneNum"> -
<input type="text" name="phoneNum2" id="phoneNum"> -
<input type="text" name="phoneNum3" id="phoneNum"> <strong>[휴대폰 번호 중복확인]</strong>
</td>
</tr>
<tr>
<th><label for="checkNum">* 인증번호 입력</label></th>
<td>
<input type="text" name="checkNum" id="checkNum">
<input type="button" value="인증번호 받기">
</td>
</tr>
<tr>
<th><label for="userPass">* 비밀번호</label></th>
<td>
<input type="password" name="userPass" id="userPass">
</td>
</tr>
<tr>
<th><label for="userPassCheck">* 비밀번호 확인</label></th>
<td>
<input type="password" name="userPassCheck" id="userPassCheck">
</td>
</tr>
<tr>
<th><label for="YearMonthDay">* 생년월일</label></th>
<td>
<input type="text" name="Year" id="YearMonthDay">년
<input type="text" name="Month" id="YearMonthDay">월
<input type="text" name="Day" id="YearMonthDay">일
</td>
</tr>
<tr>
<th><label for="gender">* 성별</label></th>
<td>
<input type="radio" name="gender" id="gender" value="male" checked>남
<input type="radio" name="gender" id="gender" value="female">여
</td>
</tr>
<tr>
<th><label for="userAdress">* 주소</label></th>
<td>
<input type="text" id="userAdress">
<input type="button" id="userAdress" value="우편번호 찾기"><br>
<input type="text" name="userAdress" id="userAdress" placeholder="상세주소 입력">
</td>
</tr>
<tr>
<th><label for="userEmail">이메일</label></th>
<td>
<input type="text" name="userEmail1" id="userEmail">@
<input type="text" name="userEmail2" id="userEmail">
<select name="userEmail3" id="userEmail">
<option value="naver.com">naver.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="chol.com">chol.com</option>
<option value="dreamwiz.com">dreamwiz.com</option>
<option value="gmail.com">gmail.com</option>
</select>
</td>
</tr>
<tr>
<th><label for="smsCheck">SMS 수신</label></th>
<td>
<input type="radio" name="smsCheck" id="smsCheck" value="yes" checked>예
<input type="radio" name="smsCheck" id="smsCheck" value="no">아니오<br>
( 선호장르 선택에 따라 기획공연 및 문화강좌 정보를 제공 받을 수 있습니다.)
</td>
</tr>
<tr>
<th><label for="favorite">선호 장르 선택</label></th>
<td>
<input type="checkbox" name="favorite" id="favorite" value="classic">클래식
<input type="checkbox" name="favorite" id="favorite" value="koreamusic">국악
<input type="checkbox" name="favorite" id="favorite" value="concert">대중콘서트
<input type="checkbox" name="favorite" id="favorite" value="opera">오페라<br>
<input type="checkbox" name="favorite" id="favorite" value="musical">뮤지컬
<input type="checkbox" name="favorite" id="favorite" value="act">연극
<input type="checkbox" name="favorite" id="favorite" value="ballet">무용(발레)
<input type="checkbox" name="favorite" id="favorite" value="childshow">어린이공연<br>
<input type="checkbox" name="favorite" id="favorite" value="else">기타<br><hr>
<input type="checkbox" name="favorite" id="favorite" value="culture">문화강좌
</td>
</tr>
</table>
</form>
</div>
</body>
</html>