* 해당 포스트는 연습을 작성자의 연습을 위한 것이므로 코드에 대한 조언은 환영합니다.
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function getSelectValue(frm) {
frm.mail_text.value =
frm.mail_select.options[frm.mail_select.selectedIndex].value;
}
function openZipSearch() {
new daum.Postcode({
oncomplete: function (data) {
$("[name=zip]").val(data.zonecode);
$("[name=addr1]").val(data.address);
},
}).open();
}
</script>
<style>
div {
width: 800px;
}
.fill_out {
text-align: right;
}
fieldset {
width: 800px;
border: 3px solid #e5e5e5;
}
legend {
font-size: 20px;
font-weight: bold;
}
.null {
background-color: #e5e5e5;
height: 20px;
}
th {
background-color: #fafafa;
width: 180px;
text-align: left;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
}
td {
width: 700px;
}
.btn_overlap {
vertical-align: middle;
}
.buttons {
text-align: center;
}
.btn_confirm {
background-image: url(images/btn_confirm.gif);
background-repeat: no-repeat;
width: 40px;
height: 23px;
border: 0px;
cursor: pointer;
outline: 0;
}
.btn_cancel {
background-image: url(images/btn_cancel.gif);
background-repeat: no-repeat;
width: 40px;
height: 23px;
border: 0px;
cursor: pointer;
outline: 0;
}
</style>
</head>
<body>
<form name="form1">
<div>
<input
type="image"
src="images/member_info_title.gif"
alt="회원정보입력"
/><br />
회원정보는 개인정보튀급방침에 따라 안전하게 보호되며 회원님의 명백한
동의 없이 공개 또는 제3자에게 제공되지 않습니다.
>개인정보취급방침</a
>
</div>
<div class="fill_out">
<input type="image" src="images/bullet_checked.gif" alt="V" />표시는
필수입력사항
</div>
<fieldset>
<legend>회원 기본 정보</legend>
<br /><br />
<table>
<tr>
<td colspan="2" class="null"></td>
</tr>
<tr>
<th><img src="images/bullet_checked.gif" alt="V" /> 이름</th>
<td>
<input type="text" name="name" maxlength="8" size="20" required />
</td>
</tr>
<td colspan="2" class="null"></td>
<tr>
<th><img src="images/bullet_checked.gif" alt="V" /> 아이디</th>
<td>
<input type="text" name="id" maxlength="12" size="20" required />
<input
type="image"
class="btn_overlap"
src="images/btn_overlap.gif"
alt="중복확인"
/>
</td>
</tr>
<td colspan="2" class="null"></td>
<tr>
<th><img src="images/bullet_checked.gif" alt="V" /> 비밀번호</th>
<td>
<input
type="password"
name="pass"
maxlength="15"
size="20"
required
/>
</td>
</tr>
<td colspan="2" class="null"></td>
<tr>
<th>
<img src="images/bullet_checked.gif" alt="V" /> 비밀번호 확인
</th>
<td>
<input
type="password"
name="checkedPass"
maxlength="15"
size="20"
required
/>
</td>
</tr>
<td colspan="2" class="null"></td>
<tr>
<th><img src="images/bullet_checked.gif" alt="V" /> 이메일</th>
<td>
<input type="text" name="mail_id" size="15" required />
@<input type="text" name="mail_text" size="15" required />
<select
name="mail_select"
id="email_select"
onChange="getSelectValue(this.form);"
>
<option value="1" selected hidden>-선택 하세요-</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="kakao.com">kakao.com</option>
<option value="hanmail.com">hanmail.com</option>
<option value="">직접입력</option>
</select>
</td>
</tr>
<td colspan="2" class="null"></td>
</table>
</fieldset>
<br />
<fieldset>
<legend>회원 신상정보</legend>
<br /><br />
<table>
<tr>
<td colspan="2" class="null"></td>
</tr>
<tr>
<th><img src="images/bullet_checked.gif" alt="V" /> 주소</th>
<td>
<input type="text" name="post" maxlength="5" size="8" required />
<button type="button" onclick="openZipSearch()">
우편번호 찾기</button
><br />
<input type="text" name="addr1" size="60" />
</td>
</tr>
<tr>
<td colspan="2" class="null"></td>
</tr>
<tr>
<th><img src="images/bullet_checked.gif" alt="V" /> 휴대폰</th>
<td>
<select id="phone">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
-<input
type="text"
name="middleNumber"
maxlength="5"
size="5"
required
/>
-<input
type="text"
name="middleNumber"
maxlength="5"
size="5"
required
/>
</td>
</tr>
<tr>
<td colspan="2" class="null"></td>
</tr>
<tr>
<th>직업</th>
<td>
<select id="job">
<option hidden>직업을 선택하세요</option>
<option value="회사원">회사원</option>
<option value="공무원">공무원</option>
<option value="사업가">사업가</option>
<option value="학생">학생</option>
<option value="기타">기타</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" class="null"></td>
</tr>
<tr>
<th>취미</th>
<td>
<label
><input
type="checkbox"
name="hobby"
value="movies"
/>영화감상</label
>
<label
><input type="checkbox" name="hobby" value="books" />독서</label
>
<label
><input type="checkbox" name="hobby" value="golf" />골프</label
>
<label
><input
type="checkbox"
name="hobby"
value="fishing"
/>낚시</label
>
<label
><input type="checkbox" name="hobby" value="trip" />여행</label
>
<label
><input type="checkbox" name="hobby" value="etc" />기타</label
>
</td>
</tr>
<tr>
<td colspan="2" class="null"></td>
</tr>
<tr>
<th>가입경로</th>
<td>
<label><input type="radio" name="root" value="TV" />TV</label>
<label
><input
type="radio"
name="root"
value="신문/잡지"
/>신문/잡지</label
>
<label
><input type="radio" name="root" value="인터넷" />인터넷</label
>
<label><input type="radio" name="root" value="지인" />지인</label>
<label><input type="radio" name="root" value="기타" />기타</label>
</td>
</tr>
<tr>
<td colspan="2" class="null"></td>
</tr>
</table>
</fieldset>
<br />
<div class="buttons">
<input type="submit" class="btn_confirm" alt="확인" value="" />
<input type="reset" class="btn_cancel" alt="취소" value="" />
</div>
</form>
</body>
</html>
'코딩연습 > HTML CSS' 카테고리의 다른 글
| HTML연습 포스터 만들기 (0) | 2023.07.26 |
|---|---|
| HTML연습 자바도서 목차 만들기 (0) | 2023.07.25 |
| HTML연습 회원정보입력폼 만들기 (0) | 2023.07.25 |
| HTML연습 택배요금표 만들기 (0) | 2023.07.25 |
| HTML 연습 회원가입폼 만들기 (0) | 2023.07.25 |