03(https://qdgbjsdnb.tistory.com/131)에서 사용한 로그인과 회원가입에 적절한 노드들을 사용해보자.
완성된 결과물은 다음과 같다.
02-03의 게시물의 예제와 input을 통해 위의 사진과 같이 만들어보자
-정답-
로그인
<html>
<head>
<meta charset="UTF-8">
<title>로그인 박스</title>
<style>
th{
width: 50px;
}
td{
width: 50px;
}
</style>
</head>
<body>
<fieldset>
<table>
<tr><!--행(row)선언-->
<th ><b>ID</b></th>
<th><input type="text" name = "UserID" value=""placeholder = "아이디를 입력 해주세요."/></th>
<th rowspan="2"><input type="submit" value="로그인"/></th>
</tr>
<tr><!--행(row)선언-->
<th><b>PW</b></th>
<th><input type="password" name = "UserPW" value=""placeholder = "비밀번호를 입력 해주세요."/></th>
</tr>
<tr><!--행(row)선언-->
<th colspan="3"><input type="button" value="회원가입"/> <input type="button" value="아이디/비번 찾기"></th>
</tr>
</table>
</fieldset>
</body>
</html>
회원가입
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
<style>
td{
width: 300px;
}
</style>
</head>
<body>
<fieldset>
<h2>회원가입</h2>
<hr/>
<table>
<tr>
<th>아이디</th>
<td><input type="text" name = "UserID" value=""/></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="text" name = "UserPW" value=""/></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="text" name = "ReUserPW" value=""/></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" name = "Name" value=""/></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="email" name="mail" required/></td>
</tr>
<tr>
<th>생년월일</th>
<td>
<select name="year">
<option value="1995">1995</option>
<option value="1996"d>1996</option>
<option value="1997" selected>1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<select name="month">
<option value="01" selected>01</option>
</select>
<select name="day">
<option value="01" selected>01</option>
</select>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="male"/> 남자
<input type="radio" name="gender" value="female"/> 여자
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="checkbox" name="hobby" value="드라이브"/>드라이브
<input type="checkbox" name="hobby" value="스포츠"/>스포츠
<input type="checkbox" name="hobby" value="게임"/>게임
<input type="checkbox" name="hobby" value="낚시"/>낚시
</td>
</tr>
<tr>
<th>나이</th>
<td><input type="number" name="age" min="1" max="200" value="20"/></td>
</tr>
<tr>
<th>보안등급</th>
<td><input type="range" name="security" min="0" max="100" value="0" step="20"/></td>
</tr>
</table>
</fieldset>
</body>
</html>
selected의 값은 많기 때문에 귀찮아서 쓰다가 패스....
'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글
| [HTML]02-09.form을 이용한 정보 전송, 전달 + 예제 (0) | 2018.10.16 |
|---|---|
| [HTML]02-07.link(페이지 아이콘 이미지 추가),Input(버튼, 텍스트박스 등 다양한 노드 생성), fieldset(프레임 만들기) (0) | 2018.10.15 |
| [HTML]02-06.iframe, 다른 사이트 참조 + 예제 (0) | 2018.10.15 |
| [HTML]02-05.리스트, li, ul, ol, dl(dl, dt, dd) (0) | 2018.10.15 |
| [HTML]02-04.이미지, 하이퍼링크 태그(img, a) (0) | 2018.10.15 |