[HTML] 5일 만에 끝내는 HTML 기초 5일차

Stack/HTML

[HTML] 5일 만에 끝내는 HTML 기초 5일차

7ingout 2022. 3. 18. 09:32

1. 폼태그 복습

JOIN US 회원가입

패스워드
패스워드확인
패스워드 분실시 질문
패스워드 분실시 답변
이름	(공백없이 한글만 입력가능)
별명	한글2글자, 영문4글자 이상 입력가능합니다. 공백없이 한글, 영문, 숫자만 입력가능(한글 2자, 영문 4자이상)
이메일	E-mail주소를 입력하십시요.
성별	남성 여성
메일링 서비스	정보메일을 받겠습니다.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h2>JOIN US 회원가입</h2>
		<table border="1" cellspacing="0" cellpadding="10">
			<form action="join.php" method="get>
			<caption>회원가입 폼</caption>
			<tr>
				<td>아이디</td>
				<td><input type="text" name="userId" required/></td>
			</tr>
			<tr>
				<td>패스워드</td>
				<td><input type="password" name="userPw" required/></td>
			</tr>
			<tr>
				<td>패스워드확인</td>
				<td><input type="password" name="userPwCh" required/></td>
			</tr>
			<tr>
				<td>패스워드 분실시 질문</td>
				<td>
					<select name="pwq">
						<option value="pwq1">어릴때 살던 곳은?</option>
						<option value="pwq2">초등학교 선생님의 성함은?</option>
						<option value="pwq3">나의 가장 소중한 보물은?</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>패스워드 분실시 답변</td>
				<td><input type="text" name="pwa" /></td>
			</tr>
			<tr>
				<td>이름</td>
				<td><input type="text" name="userName" />(공백없이 한글만 입력가능)</td>
			</tr>
			<tr>
				<td>별명</td>
				<td><input type="text" name="nickname" />한글2글자, 영문4글자 이상 입력가능합니다. 
				공백없이 한글, 영문, 숫자만 입력가능(한글 2자, 영문 4자이상)</td>
			</tr>
			<tr>
				<td>이메일</td>
				<td><input type="email" name="userEmail"/>E-mail주소를 입력하십시요.</td>
			</tr>
			<tr>
				<td>성별</td>
				<td>남성<input type="radio" name="gender"value="male"/>
				여성<input type="radio" name="gender" value="female" />
				</td>
			</tr>
			<tr>
				<td>메일링 서비스</td>
				<td><input type="checkbox" name="mailok" />정보메일을 받겠습니다.</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="확인" />
					<input type="reset" value="취소" />
					<!-- <button type="submit">확인</button>
					<button type="reset">취소</button> -->
				</td>
			</tr>
			</form>   <!-- form 태그 안에 있는 것들 한번에 전송 -->
		</table>
	</body>
</html>

2. 배웠던 태그들

이 태그들만으로도 마크업 가능

3. 버튼태그

- 클릭 가능한 버튼을 나타냄