이번 포스팅은 HTML을 활용한 회원가입 양식에다가 SUBMIT버튼을 누르면 전자메일도 구현되는 기능을 한번 구현해보도록 하겠습니다. 전자메일 기능은 폼 태그에서 mailto 함수를 걸어서 처리하였고, 회원가입 양식은 html으로 제작하였습니다.
Form태그 회원가입양식 메일 보내기
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>메일 보내기</title>
</head>
<body>
<form action="MAILTO:wjdxo513@naver.com" method="post" enctype="text/plain">
<table align="center" width="700pt" border="1" cellspacing="0" cellpadding="0"><tr>
<td colspan="2" align="center" bgcolor="red" height="40" style="color:white"><b>회원 기본 정보</b></td>
</tr>
<tr>
<td bgcolor="pink">아이디 :</td>
<td><input type="text"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="pink" style="height: 24px;">비밀번호 :</td>
<td style="height: 24px;"><input type="password"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="pink">비밀번호확인 :</td>
<td><input type="password"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="pink">메일주소 :</td>
<td><input type="text"> 예)id@domain.com</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="red" height="40" style="color:white"><b>개인 신상 정보</b></td>
</tr>
<tr>
<td bgcolor="pink">주민등록번호 :</td>
<td><input type="text">예)1234561234567</td>
</tr>
<tr>
<td bgcolor="pink">생일 :</td>
<td><input type="text">년
<select name="월">
<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 name="일">
<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="pink">관심분야 :</td>
<td>
<input type="checkbox" name="like" value="computer">컴퓨터
<input type="checkbox" name="like" value="internet">인터넷
<input type="checkbox" name="like" value="trv">여행
<input type="checkbox" name="like" value="movie">영화감상
<input type="checkbox" name="like" value="music">음악감상
</td>
</tr>
<tr>
<td bgcolor="pink">자기소개 :</td>
<td><textarea cols="85" rows="10"></textarea></td>
</tr>
</table>
<br/>
<center>
<input type="submit" value="회원 가입">
<input type="reset" value="다시 입력">
</center>
</form>
</body>
</html>
회원 양식 폼입니다. 여기서 회원가입(submit)을 누르면 form mailto함수로 인해 웹메일이 보내지게 됩니다.
회원가입 버튼을 눌렀을 경우
위와 같은 메시지가 뜨고
확인을 누르면
전자메일이 실행됩니다.
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태) (2) | 2018.06.16 |
|---|---|
| [Html] 수평선 긋기 HR태그 사용법 (1) | 2018.06.15 |
| [Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등 (1) | 2018.06.14 |
| [Html] input type 종류 & 예제 총정리 (2) | 2017.10.12 |