html을 이용하여 회원가입 페이지를 제작 하였다.
배경 사진과 배경음악은 본인이 원하는 걸로 바꾸어 넣으면 잘 작동한다.
코드에 유효성 검사를 위해 스크립트를 가져왔지만 페이지만 제작을 원한다면 스크립트는 없애도 무방하다.
<html>
<head>
<title>
회원 가입 페이지
</title>
</head>
<body background="배경사진 주소">
<form action="mailto:iwebgenie@gmail.com>subject=안녕하세요" onsubmit="return check()"> //유효성 검사를 위해 함수 추가
<table width="620" height="450" border="1" bordercolor="skyblue" cellpadding="0" cellspacing ="0" align="center">
<th colspan="2" bgcolor="skyblue" >
회원 기본 정보
</th>
<tr bgcolor="white">
<td bgcolor="gray" align ="center"><b>아이디:</b></td>
<td>
<input type="text" id="my_id" name="my_id" size="18" maxlength="12" minlength="4">
<label for="my_id">4~12자의 영문 대소문자와 숫자로만 입력</label>
</td>
</tr>
<tr bgcolor="white">
<td width="120" bgcolor="gray" align ="center"><b>비밀번호:</b></td>
<td>
<input type="password" id="my_password" name="my_password" size="18" maxlength="12" minlength="4">
<label for="my_password">4~12자의 영문 대소문자와 숫자로만 입력</label>
</td>
</tr>
<tr bgcolor="white">
<td bgcolor="gray" align ="center"><b>비밀번호 확인:</b></td>
<td>
<input type="password" id="check_password" name="check_password" size="18" maxlength="12" minlength="4">
</td>
</tr>
<tr bgcolor="white">
<td bgcolor="gray" align ="center" ><b>메일주소:</b></td>
<td>
<input type="text" id="my_email" name="my_email" size="24">
<label for="my_email">예) id@domain.com</label>
</td>
</tr>
<tr bgcolor="white">
<td bgcolor="gray" align ="center"><b>이름:</b></td>
<td>
<input type="text" id="my_name" name="my_name" size="24">
</td>
</tr>
<th colspan="2" bgcolor="skyblue" >
개인 신상 정보
</th>
<!-- <tr bgcolor="white">
<td bgcolor="gray" align ="center"><b>주민등록 번호:</b></td>
<td>
<input type="text" id="my_number" name="my_number" maxlength="13" size="24">
<label for="my_email">예) 1234561234567</label>
</td>
</tr> -->
<tr bgcolor="white">
<td bgcolor="gray" align ="center"><b>생일:</b></td>
<td>
<input type="text" id="birth" name="birth" maxlength="4" size="5">
년
<select id="month" name="month">
<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 id="day" name="day">
<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">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 bgcolor="white">
<td bgcolor="gray" align ="center"><b>관심분야</b></td>
<td>
<input type="checkbox" name="interasting" value="컴퓨터" >컴퓨터
<input type="checkbox" name="interasting" value="인터넷" >인터넷
<input type="checkbox" name="interasting" value="여행" >여행
<input type="checkbox" name="interasting" value="영화감상" >영화감상
<input type="checkbox" name="interasting" value="음악감상" >음악감상
</td>
</tr>
<tr bgcolor="white" height="100">
<td bgcolor="gray" align ="center"><b>자기소개:</b></td>
<td>
<textarea id="my_intro" name="my_intro" cols="56" rows="6"></textarea>
</td>
</tr>
</table>
<br>
<div align="center">
<input type="submit" value="회원가입">
<input type="reset" value="다시입력">
</div>
</form>
<audio controls autoplay hidden>
<source src="배경 음악 주소" type="audio/mp3
">
Your browser does not support the audio element.
</audio>
<script src="join.js"></script> // 유효성 검사를 할 js
</body>
</html>
'웹' 카테고리의 다른 글
| 비정규식으로 유효성 검사 만들기 (0) | 2022.09.15 |
|---|---|
| 정규식을 이용한 유효성 검사 (0) | 2022.09.15 |
| HttpServlet (0) | 2022.09.15 |
| Http 에러 코드 모음 (0) | 2022.09.15 |
| Http와 Https (0) | 2022.09.15 |
