Backend/HTML, CSS

HTML Eclipse 태그 연습 예제 - 회원가입 양식

쏠솔랄라 2023. 4. 5. 18:15

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>회원가입</title>
</head>


<body>

<div align="center">

<form method="post" action="#">
<table border="1" bordercolor="lightblue" cellspacing="0">

<caption><h2> 회원 가입 양식 </h2></caption>

<tr align="center">
<td colspan="2" bgcolor="#C8D7FF"><strong>회원 기본 정보</strong></td>
</tr>

<tr>
<td bgcolor="skyblue">아이디 : </td>
<td><input type="text" /><font color="gray"> 4~12자의 영문 대소문자와 숫자로만 입력</font></td>
</tr>

<tr>
<td bgcolor="skyblue">비밀번호 : </td>
<td><input type="password" /><font color="gray"> 4~12자의 영문 대소문자와 숫자로만 입력</font></td>
</tr>

<tr>
<td bgcolor="skyblue">비밀번호확인 : </td>
<td><input type="password" /></td>
</tr>

<tr>
<td bgcolor="skyblue">메일주소 : </td>
<td><input type="email" /> 예) id@domain.com</td>
</tr>

<tr>
<td bgcolor="skyblue">이름 : </td>
<td><input type="text" /></td>
</tr>

<tr align="center">
<td colspan="2" bgcolor="#C8D7FF"><strong>개인 신상 정보</strong></td>
</tr>

<tr>
<td>우편번호</td>
<td>
<input type="text">
<input type="button" value="주소검색">
</td>
</tr>

<tr>
<td>도로명주소</td>
<td>
<input type="text" size="75">
</td>
</tr>

<tr>
<td>상세주소</td>
<td>
<input type="text" size="30" /><input type="text" size="30" />
</td>
</tr>

<tr>
<td bgcolor="skyblue">주민등록번호 : </td>
<td><input type="password" /> </td>
</tr>

<tr>
<td bgcolor="skyblue">생일 : </td>
<td>
<input type="text" />년
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>월
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>일

</td>
</tr>

<tr>
<td bgcolor="skyblue">관심분야 : </td>
<td>
<label><input type="checkbox" name="interest" value="computer">컴퓨터 </label>
<label><input type="checkbox" name="interest" value="internet">인터넷 </label>
<label><input type="checkbox" name="interest" value="traveling">여행 </label>
<label><input type="checkbox" name="interest" value="movie">영화감상 </label>
<label><input type="checkbox" name="interest" value="music">음악감상 </label>  
</td>
</tr>

<tr>
<td bgcolor="skyblue">자기소개</td>
<td><textarea name="text" cols="80" rows="5" placeholder="내용을 입력하세요"></textarea></td>
</tr>

<tr align="center">
<td colspan="2">
<input type="submit" value="회원가입"></input>
<input type="reset" value="다시입력"></input>
</td>
</tr>

</table>
</form>

</div>
</body>
</html>