![[2021/12/13]국비지원-HTML5 코딩툴 기본학습 5-(3) 회원가입 양식](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FC8riU%2FbtrolTpL42R%2FAAAAAAAAAAAAAAAAAAAAAKRw7KAasvDFRxq7pY46jfBEf36yJd8NlqpHyar-6PTp%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Dlqz6zUSK0EBwripcGpXYWAmo7yA%253D)
앞에 이어서...
추가로
input type 종류,
<select>
<optgroup>
<option></option>
</select>
+
<button></button> 배웠고
역시 ol / ul 사용해서 입력하도록 함.
예제)
제출 내용)
제출 코드
제출 시 들여쓰기 중요하다 해서 들여쓰기 노가다...
<!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>회원가입양식</title>
</head>
<body>
<form action="/" method="post">
<fieldset title ="필수 입력 항목">
<legend>필수 입력 항목</legend>
<ol>
<li>
<label for="username">
<strong>*</strong> 이름:
</label>
<input type="text" id="username" autofocus required placeholder="홍길동">
</li>
<li>
<p>
<strong>주의!</strong>
아이디는 영문자와 숫자만을 사용하여 4글자이상 16글자 이하로 작성해 주세요.
</p>
<label for="userID">
<strong>*</strong> 아이디:
</label>
<input type="text" id="userID" autofocus required placeholder="">
</li>
<li>
<p>
<strong>주의!</strong>
비밀번호는 보안을 위해 영문자, 숫자 및 특수문자등을 조합하여 작성하시기 바랍니다.
<br>
<strong>주의!</strong>
비밀번호는 보안을 위해 4글자이상으로 작성해 주세요.
</p>
<label for="userPW">
<strong>*</strong> 비밀번호:
</label>
<input type="text" id="userPW" required placeholder="">
<br>
<label for="userPW">
<strong>*</strong> 비밀번호확인:
</label>
<input type="text" id="userPWConfirm" required placeholder="">
</li>
<li>
<p>
<em>안내!</em>
우편번호를 모를 경우에는 빈칸으로 두고 주소만 제대로 입력하시면 됩니다.
</p>
<label for="arianumb">
우편번호:
</label>
<input type="text" id="arianumber" placeholder="">
</li>
<li>
<p>
<strong>주의!</strong>
주소는 [시/도][시/구/군][읍/면/리][번지][건물/아파트명] 순서로 입력 해 주세요.
</p>
<label for="addr">
<strong>*</strong> 주소:
</label>
<input type="text" id="addr" required placeholder="" size="60">
<br>
<label for="phone">
<strong>*</strong> 전화번호:
</label>
<input type="tel" id="phone" title="전화번호 국번" required placeholder="" size="10" maxlength="3"> -
<input type="tel" id="phone" title="전화 앞자리 번호" required placeholder="" size="10" maxlength="4"> -
<input type="tel" id="phone" title="전화 뒷자리 번호" required placeholder="" size="10" maxlength="4">
</li>
</ol>
</fieldset>
<br>
<fieldset>
<legend>비밀번호 찾는 방법 선택</legend>
<ol>
<li>
<p>
<em>안내!</em>
비밀번호를 잊어버렸을 경우 비밀번호 수신 방법을 선택해주세요.
</p>
<span>
<strong>*</strong> 수신방법
</span>
<input type="radio" name="receivePW" value="SMS">
<label for="receivePW">휴대전화 SMS문자</label> /
<input type="radio" name="receivePW" value="email">
<label for="receivePW">자주사용하는 이메일</label>
</li>
<li>
<label for="cell"> 휴대전화번호: </label>
<select name="직접입력" id="cell">직접입력
<option value="직접입력">직접입력</option>
<option value="010">010</option>
</select>
<input type="tel" title="휴대전화 앞자리 번호" size="10" maxlength="4"> -
<input type="tel" title="휴대전화 뒷자리 번호" size="10" max="4">
</li>
<li>
<label for="email">
이메일:
</label>
<input type="url" size="60">
</li>
</ol>
</fieldset>
<br>
<fieldset>
<legend>메일링 수신여부</legend>
<span>의성군청에서 제공하는 소식을 이메일로 받아 보시겠습니까?</span>
<input type="radio" name="receivemail" value="yes"> 예 /
<input type="radio" name="receivemail" value="no"> 아니오
</fieldset>
<input type="submit" value="확인">
<input type="reset" value="취소">
</form>
</body>
</html>