[구디아카데미][IT국비지원]
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sign up</title>
</head>
<body>
<form>
<fieldset>
<legend>01 로그인 정보</legend>
<table>
<tr>
<td>
<image src="./images/point.jpg">
</td>
<td>
<label for="id">사용자 ID</label>
</td>
<td>
<input type="text" id="id" value="영문이름만사용">
<button type="button" id="id">중복확인</button> 띄어쓰기 없는 영문소문자,숫자조합
</td>
</tr>
<tr>
<td>
<image src="./images/point.jpg">
</td>
<td>
<label for="pw">비밀번호</label>
</td>
<td>
<input type="password" id="pw"> 띄어쓰기 없는 영문소문자,숫자조합
</td>
</tr>
<tr>
<td>
<image src="./images/point.jpg">
</td>
<td>
<label for="pwck">비밀번호확인</label>
</td>
<td>
<input type="password" id="pwck" name="pwck"> 비밀번호를 한번더 입력해주세요
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>02 개인 정보</legend>
<table>
<tr>
<td>
<image src="./images/point.jpg">
</td>
<td>
<label for="name">이름</label>
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="rrn">주민등록번호</label>
</td>
<td>
<input type="text" id="rrn" size="15"> -
<input type="password" id="rrn" size="15">
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="bd">생년월일</label>
</td>
<td>
<input type="text" id="bd" size="6"> 년
<input type="text" id="bd" size="6"> 월
<input type="text" id="bd" size="6"> 일
<input type="radio" id="bd" name="sl">양력
<input type="radio" id="bd" name="sl">음력
</td>
</tr>
<tr>
<td>
<image src="./images/point.jpg">
</td>
<td>
<label for="num">연락처</label>
</td>
<td>
<select id="num">
<option value="==선택==">==선택==</option>
<option value="02">02</option>
<option value="031">031</option>
</select> -
<input type="text" id="num" size="6"> -
<input type="text" id="num" size="6">
<input type="radio" id="num" name="hc">자택
<input type="radio" id="num" name="hc">직장
</td>
</tr>
<tr>
<td>
<image src="./images/point.jpg">
</td>
<td>
<label for="pn">휴대전화</label>
</td>
<td>
<input type="text" id="pn" size="6"> -
<input type="text" id="pn" size="6"> -
<input type="text" id="pn" size="6">
</td>
</tr>
<tr>
<td>
<image src="./images/point.jpg">
</td>
<td>
<label for="email">E-mail 주소</label>
</td>
<td>
<input type="text" id="email" value="example@example.com" size="43">
</td>
</tr>
<tr>
<td>
<image src="./images/point.jpg">
</td>
<td>
<label for="ad">주소</label>
</td>
<td>
<input type="text" id="ad" size="6"> -
<input type="text" id="ad" size="6">
<button type="button" id="ad">우편번호찾기</button>
<input type="radio" id="ad" name="hc2">자택
<input type="radio" id="ad" name="hc2">직장
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text" id="ad" size="43">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text" id="ad" size="43">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>03 기타정보</legend>
<table>
<tr>
<td>
</td>
<td>
<label for="job">직업</label>
</td>
<td>
<select id="job">
<option value="===선택하세요===">===선택하세요===</option>
<option value="무직">무직</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="cn">회사명(학교)</label>
</td>
<td>
<input type="text" id="cn">
<button type="button" id="cn">찾기</button>
<input type="radio" id="cn" name="hc3">자택
<input type="radio" id="cn"name="hc3">직장
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="bn">사업자번호</label>
</td>
<td>
<input type="text" id="bn">
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="department">부서명(학과)</label>
</td>
<td>
<input type="text" id="department">
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="rank">직위(학년)</label>
</td>
<td>
<input type="text" id="rank">
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="in">관심분야</label>
</td>
<td>
<select id="in">
<option value="===선택하세요===">===선택하세요===</option>
<option value="농구">농구</option>
<option value="야구">야구</option>
<option value="축구">축구</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="tp">TP웹진 수신</label>
</td>
<td>
<input type="radio" id="tp" name="ag">수신동의
<input type="radio" id="tp" name="ag">수신하지않음
(TP에서 제공하는 Webzine 서비스를 받아보시겠습니까?)
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="ha">홈페이지주소</label>
</td>
<td>
<input type="text" id="ha" size="50">
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="self">자기소개</label>
</td>
<td>
<textarea id="self"></textarea>
</td>
</tr>
</table>
</fieldset>
<br>
<fieldset>
<button type="button">가입</button>
<button type="button">취소</button>
</fieldset>
</form>
</body>
</html><fielset>태그와 <legend>태그
<fielset>으로 테두리둘러 묶고 <legend>로 이름을 부여 할 수 있다
결과화면
