4CSoft Html&Design Guide

봉사단체 등록신청
*아이디	(6~12자 영문 혹은 숫자)
*비밀번호
*비밀번호 확인
*성별	남 여
*전화번호	- -
*휴대폰 번호	- -
*이메일	@
*주소	-
홈페이지
가입동기	지역사회 복지기여 자기발전 사회적 경험 종교적 신념 불우이웃에 봉사 전문기술 훈련실습 보람된 여가선용 규정된 봉사시간 이수 기타


<p class="ex_table">* 는 필수입력 항목입니다.</p>
<table class="bbs_view appTable">
	<caption>봉사단체 등록신청</caption>
	<colgroup>
	<col class="subject">
	<col class="cont_l">
	</colgroup>
	<tbody>
	<tr>
		<th scope="row"><em>*</em><label for="userId">아이디</label></th>
		<td>
			<input type="text" id="userId" class="intext">
			<span class="bbs_small"><button type="button">중복확인</button></span>
			<span class="text">(6~12자 영문 혹은 숫자)</span>
		</td>
	</tr>
	<tr>
		<th scope="row"><em>*</em><label for="userPw">비밀번호</label></th>
		<td><input type="password" id="userPw" class="intext"></td>
	</tr>
	<tr>
		<th scope="row"><em>*</em><label for="userPwRe">비밀번호 확인</label></th>
		<td><input type="password" id="userPwRe" class="intext"></td>
	</tr>	
	<tr>
		<th scope="row"><em>*</em>성별</th>
		<td class="sexual">
			<input type="radio" id="male" class="mid">
			<label for="male" class="radio">남</label>
			<input type="radio" id="female" class="mid">
			<label for="female" class="radio">여</label>
		</td>
	</tr>	
	<tr>
		<th scope="row"><em>*</em><label for="tel1">전화번호</label></th>
		<td>
			<select id="tel1" title="지역번호 선택">
				<option value="02" >02 </option>
				<option value="031">031</option>
				<option value="032">032</option>
				<option value="033">033</option>
				<option value="041">041</option>
				<option value="042">042</option>
				<option value="043">043</option>
				<option value="051">051</option>
				<option value="052">052</option>
				<option value="053">053</option>
				<option value="054">054</option>
				<option value="055">055</option>
				<option value="061">061</option>
				<option value="062">062</option>
				<option value="063">063</option>
				<option value="064">064</option>
				<option value="064">070</option> 
			</select> - 
			<input type="text" id="tel2" class="intext tel" maxlength="4" title="전화번호 국번 입력"> - 
			<input type="text" id="tel3" class="intext tel" maxlength="4" title="전화번호 뒷자리 입력">
		</td>
	</tr>
	<tr>
		<th scope="row"><em>*</em><label for="mobile01">휴대폰 번호</label></th>
		<td>
			<select id="mobile01" title="통신사 선택">
				<option value="010" >010</option>
				<option value="011">011</option>
				<option value="016">016</option>
				<option value="017">017</option>
				<option value="018">018</option>
				<option value="019">019</option>
			</select> - 
			<input type="text" id="mobile02" class="intext tel" maxlength="4" title="휴대전화 국번 입력"> - 
			<input type="text" id="mobile03" class="intext tel" maxlength="4" title="휴대전화 뒷자리 입력">
		</td>
	</tr>
	<tr>
		<th scope="row"><em>*</em><label for="userEmail">이메일</label></th>
		<td>
			<input type="text" id="userEmail" class="intext">
			@
			<input type="text" class="intext" title="이메일 도메인 주소"/ >
			<select title="이메일 도메인주소 선택">
				<option>선택</option>
				<option>gmail.com</option>
			</select>
		</td>
	</tr>
	<tr>
		<th scope="row"><em>*</em><label for="zipcode1">주소</label></th>
		<td>
			<input type="text" id="zipcode1" class="intext zipcode" maxlength="3" title="우편번호 앞자리"> - 
			<input type="text" id="zipcode2" class="intext zipcode" maxlength="3" title="우편번호 뒷자리">
			<span class="bbs_small"><button type="button">우편번호 찾기</button></span>
			<div>
				<input type="text" class="intext address" title="주소 앞자리-시군구까지">
				<input type="text" class="intext address" title="동 이하 상세주소">
			</div>
		</td>
	</tr>
	<tr>
		<th scope="row"><label for="cite">홈페이지</label></th>
		<td>
			<input type="text" id="cite" class="intext cite"> 
		</td>
	</tr>		
	<tr>
		<th scope="row">가입동기</th>
		<td colspan="3" class="radio_group">
			<div>
			<input type="radio" id="appReason01" class="mid">
			<label for="appReason01">지역사회 복지기여</label>
			<input type="radio" id="appReason02" class="mid">
			<label for="appReason02">자기발전</label>
			<input type="radio" id="appReason03" class="mid">
			<label for="appReason03">사회적 경험</label>
			</div>
			<div>
			<input type="radio" id="appReason04" class="mid">
			<label for="appReason04">종교적 신념</label>
			<input type="radio" id="appReason05" class="mid">
			<label for="appReason05">불우이웃에 봉사</label>
			<input type="radio" id="appReason06" class="mid">
			<label for="appReason06">전문기술 훈련실습</label>
			</div>
			<div>
			<input type="radio" id="appReason07" class="mid">
			<label for="appReason07">보람된 여가선용</label>
			<input type="radio" id="appReason08" class="mid">
			<label for="appReason08">규정된 봉사시간 이수</label>
			</div>
			<input type="radio" id="appReason09" class="mid etc">
			<label for="appReason09" class="etc">기타</label>
			<input type="text" class="intext reason" title="기타 사유 입력">
		</td>
	</tr>
	</tbody>		
</table>		
<p class="btn_center">
	<span class="submit"><button type="button">등록</button></span>
	<span class="submit"><button type="reset">취소</button></span>
</p>


/* default css */
button::-moz-focus-inner {padding: 0; border: 0}
button {position:relative; padding:0; border:none}
input.mid {width:13px; height:13px; margin-right:4px; border:none; vertical-align:middle; overflow:hidden;padding:0;}
input.intext {height:18px; border:1px solid #dedede; vertical-align:middle; }
label {font-weight:200; vertical-align:middle}
/* default css */

p.ex_table {margin-bottom:7px; color:#d95d01; font-size:11px; text-align:right}
table.bbs_view {width:100%; margin-bottom:5px; border-collapse:collapse; border-spacing:0; border-top:2px solid #2b8fc8}
table.bbs_view col.subject {width:15%}
table.bbs_view col.cont {width:35%}
table.bbs_view col.cont_l {width:85%}
table.bbs_view th {padding:10px 5px 8px 15px;border-bottom:1px solid #ddd; background:url(../images/bg/bg_th_div.gif) right center no-repeat; font-size:11px;text-align:left; vertical-align:middle; line-height:1.3em}
table.bbs_view th em {padding:0 4px 0 0; margin-left:-10px; color:#db913e}
table.bbs_view td {padding:8px 8px 8px 18px;border-bottom:solid 1px #ddd;font-size:12px;color:#777;text-align:left; vertical-align:middle}
table.bbs_view td span.text {margin-left:5px; font-size:11px; vertical-align:middle}
table.bbs_view td img {vertical-align:middle}

/* input 사이즈 조절 */
table.bbs_view input.intext.tel {width:50px}
table.bbs_view input.intext.address {width:250px; margin-top:4px}
table.bbs_view input.intext.cite {width:250px}

/* 가입동기 radio 정렬 */
table.bbs_view td.radio_group div {height:25px}
table.bbs_view td.radio_group label {float:left; width:150px}
table.bbs_view td.radio_group label.etc {width:35px}
table.bbs_view td.radio_group input.reason {width:350px; margin-top:-3px}
table.bbs_view td.radio_group input {float:left}

/* 버튼 */
p.btn_center {margin:10px; text-align:center}
span.bbs_small,
span.bbs_small button { position:relative; margin:0; display:inline-block; text-decoration:none !important; border:0; height:19px; font-size:11px; line-height:19px; font-family:Dotum; white-space:nowrap; background:url(../images/button/bg_bbs_small.gif) no-repeat; vertical-align:middle; color:#5aa19d;}
span.bbs_small {display:inline-block; padding:0; margin-right:2px; background-position:left top; }
span.bbs_small button {display:block; left:2px; overflow:visible; padding:0 6px 0 4px; background-position:right top; cursor:pointer; _vertical-align:top; }
			
span.submit,
span.submit button { position:relative; margin:0; display:inline-block; text-decoration:none !important; border:0; height:25px; font-size:12px; line-height:25px; font-family:Dotum; font-weight:900; white-space:nowrap; background:url(../images/button/bg_btn_large.gif) no-repeat; vertical-align:middle; color:#333;}
span.submit { padding:0; margin-right:10px; background-position:left top; }
span.submit button { left:10px; overflow:visible; padding:0 10px 0 8px; background-position:right top; cursor:pointer; _vertical-align:top; }

회원가입 타입

코드 전체끄기

Html Code

Css Code

jQuery Code