본문 바로가기

태그및 css

Form태그 회원가입양식 메일보내기

HTML을 활용한 회원가입양식에다가 SUBMIT버튼을 누르면 전자메일도 구현되는 기능을 한번 구현. 전자메일기능은 폼태그에서 mailto 함수를 걸어서 처리하였고, 회원가입 양식은 html으로 제작.

 

<form action="MAILTO:wjdxo513@naver.com" method="post" enctype="text/plain"> //폼태그 액션에 MAILTO 경로를 써준다.
<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>

회원가입양식

여기서 회원가입(submit)을 누르면 form mailto함수로 인해 웹메일이 보내지게 됩니다.



회원가입 버튼을 눌렀을경우

메일보내기

위와같은 메시지가 뜨고확인을 누르면

메일보내기

전자메일이 실행됩니다.

'태그및 css' 카테고리의 다른 글

<span>태그 사용법  (0) 2019.02.15
HR태그  (0) 2019.02.15
input type  (0) 2019.02.15
UL 태그, OL태그, DL태그, LI태그 사용법  (0) 2019.02.15
문단을 나누는 P태그 사용법  (0) 2019.02.15