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>Signup</title>
</head>
<body>
<form name="signup" method="post" autocomplete>
<table width="600" cellpadding="5" cellspacing="0" border="2">
<caption><h2>회원가입 양식</h2></caption>
<colgroup>
<col width="20%">
<col width="80%">
</colgroup>
<tr>
<td>
<label for="username">이름 </label>
</td>
<td>
<input type="text" name="username" id="username" size="25" required>
</td>
</tr>
<tr>
<td>
<label for="id">아이디 </label>
</td>
<td>
<input type="text" name="id" id="id" maxlength="20" placeholder="영문 소문자/숫자 5~20자" pattern="^([a-z0-9_]){5,20}$" size="25" required>
<input type="button" value="중복 확인">
</td>
</tr>
<tr>
<td>
<label for="pwd">비밀번호 </label>
</td>
<td>
<input type="password" name="pwd" id="pwd" maxlength="16" placeholder="영문 대소문자/숫자 8~16자" pattern="[a-zA-Z[0-9]]{8,16}" size="25" required>
</td>
</tr>
<tr>
<td>
<label for="pwdCheck">비밀번호 확인 </label>
</td>
<td>
<input type="password" name="pwdCheck" id="pwdCheck" pattern="[a-zA-Z[0-9]]{8,16}" size="25" required>
</td>
</tr>
<tr>
<td>
<label for="bYear">생년월일</label>
</td>
<td>
<input type="number" name="bYear" min="1920" max="2023" placeholder="년(4자)" required>
<select name="bMonth" title="생일 월">
<option value="null" selected>선택</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<input type="number" name="bDay" min="1" max="31" placeholder="일">
</td>
</tr>
<tr>
<td>
<label for="phone">연락처</label>
</td>
<td>
<input type="text" name="phone" id="phone" size="3" maxlength="3"> -
<input type="text" name="phone" id="phone" size="3" maxlength="4"> -
<input type="text" name="phone" id="phone" size="3" maxlength="4">
<input type="button" value="인증번호 받기">
</td>
</tr>
<tr>
<td>
<label for="email">이메일</label>
</td>
<td>
<!--datalist: 텍스트 입력/드롭다운 리스트 둘 다 가능 -->
<input type="text" name="email" id="email" size="6 "> @
<input list="emailList" name="emailList" size="10">
<datalist id="emailList">
<option value="naver.com">naver.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="daum.net">daum.net</option>
<option value="gmail.com">gmail.com</option>
<option value="nate.com">nate.com</option>
<option value="kakao.com">kakao.com</option>
<option value="hotmail.com">hotmail.com</option>
</datalist>
</td>
</tr>
<tr>
<td>
<label for="gender">성별</label>
</td>
<td>
<input type="radio" name="gender" id="M" value="M" checked>남성
<input type="radio" name="gender" id="F" value="F">여성
<input type="radio" name="gender" id="N" value="N" checked>비공개
</td>
</tr>
<tr>
<td>
<label for="marketing">마케팅 수신</label>
</td>
<td>
<input type="checkbox" name="marketing" value="email">이메일
<input type="checkbox" name="marketing" value="sms">문자
<input type="checkbox" name="marketing" value="tel">전화
<input type="checkbox" name="marketing" value="N">수신하지 않음
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="회원가입">
<input type="button" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
프론트엔드 개발 및 실무 프로젝트 구현과정 수료