오늘은 회원가입 폼을 만들어 보겠습니다.
위 그림처럼 한 번 만들어볼까요?
웹표준으로 제작된 것이 아니기에 테이블로 전부 구성하였습니다.
요즘은 폼도 테이블로 안해도 꾸밀 수 있죠. 그런데 php 공부가 주 목적이라 웹표준화를 배제했습니다.
위 폼에 대한 소스는 아래와 같습니다.
|
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>회원가입</title>
</head>
<body>
<p>회원가입</p>
<table width="600" border="1" cellspacing="0" cellpadding="0" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF">
<form name="register" id="register" method="post" action="register_ok_old.php" onSubmit="return chkForm(this)">
<input type="hidden" name="chkId" id="chkId" value="N" />
<input type="hidden" name="chkRecommender" id="chkRecommender" value="N" />
<tr>
<td width="80" height="24" bgcolor="#EEEEEE">아이디</td>
<td colspan="3"><label for="txtId"></label>
<input name="txtId" type="text" id="txtId" tabindex="1" size="12" maxlength="12" /> <input type="button" name="btnChkId" id="btnChkId" value="ID중복확인" tabindex="2" onClick="searchId()" /></td>
</tr>
<tr>
<td height="24" bgcolor="#EEEEEE">암호</td>
<td width="220"><label for="txtPasswd"></label>
<input name="txtPasswd" type="password" id="txtPasswd" tabindex="3" size="12" maxlength="20" /></td>
<td width="80" bgcolor="#EEEEEE">암호확인</td>
<td width="220"><label for="txtPasswdConfirm"></label>
<input name="txtPasswdConfirm" type="password" id="txtPasswdConfirm" tabindex="4" size="12" maxlength="20" /></td>
</tr>
<tr>
<td height="24" bgcolor="#EEEEEE">이름</td>
<td colspan="3"><label for="txtName"></label>
<input type="text" name="txtName" id="txtName" tabindex="5" /></td>
</tr>
<tr>
<td height="24" bgcolor="#EEEEEE">연락처</td>
<td colspan="3"><label for="cboTel"></label><select name="cboTel" id="cboTel" tabindex="6" >
<option value="02" selected="selected">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="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>
-
<label for="txtTel2"></label><input name="txtTel2" type="text" id="txtTel2" size="4" maxlength="4" tabindex="7" />
-
<label for="txtTel3"></label><input name="txtTel3" type="text" id="txtTel3" size="4" maxlength="4" tabindex="8" /></td>
</tr>
<tr>
<td height="24" bgcolor="#EEEEEE">우편번호</td>
<td colspan="3"><label for="txtZipcode1"></label><input name="txtZipcode1" type="text" id="txtZipcode1" tabindex="9" size="3" maxlength="3" readonly="readonly" />
-
<label for="txtZipcode2"></label><input name="txtZipcode2" type="text" id="txtZipcode2" tabindex="10" size="3" maxlength="3" readonly="readonly" />
<input type="button" name="btnSearchZipcode" id="btnSearchZipcode" value="우편번호검색" onClick="searchZipcode()" /></td>
</tr>
<tr>
<td height="24" bgcolor="#EEEEEE">기본주소</td>
<td colspan="3"><label for="txtAddr1"></label><input name="txtAddr1" type="text" id="txtAddr1" tabindex="11" size="50" maxlength="255" readonly="readonly" /></td>
</tr>
<tr>
<td height="24" bgcolor="#EEEEEE">상세주소</td>
<td colspan="3"><label for="txtAddr2"></label><input name="txtAddr2" type="text" id="txtAddr2" size="50" maxlength="255" tabindex="12" /></td>
</tr>
<tr>
<td height="24" bgcolor="#EEEEEE">추천인ID</td>
<td colspan="3"><label for="txtRecommender"></label><input name="txtRecommender" type="text" id="txtRecommender" size="12" maxlength="255" tabindex="12" />
<input type="button" name="btnRecommender" id="btnRecommender" value="추천인조회" onClick="search_recommand()" /></td>
</tr>
<tr>
<td height="30" colspan="4" style="text-align:center;"><input type="submit" name="btnSubmit" id="btnSubmit" value="회원가입" tabindex="13" />
<input type="button" name="btnCancel" id="btnCancel" value="가입취소" tabindex="14" onClick="history.back()" /></td>
</tr>
</form>
</table>
<p> </p>
</body>
</html> |
다음 시간에는 아이디 중복확인을 알아 보겠습니다.
직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면
아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)
(회원가입을 하시면 편리한 시간에 자세히 설명해드립니다)
