-
HTML로 회원가입양식 메일 만들어서 보내기Dung--[CSS HTML] 2023. 4. 12. 18:19
FORM태그를 활용한 회원가입양식 메일 만들기
이번에 포스팅할 주제는 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">예)0123456789</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>회원 양식의 폼입니다. 회원가입을 누르시면 form mailto함수로 인하여 웹메일이 보내지게 됩니다.
'Dung--[CSS HTML]' 카테고리의 다른 글
CSS 적용방법과 우선순위 문법 정리 (1) 2023.04.14 기초 CSS 사용방법과 사용예시 (0) 2023.04.14 HTML에서 사용되는 input type 종류 및 활용방법 (0) 2023.04.12 간편하게 CSS 디자인 버튼 생성해 주는 사이트 (티스토리 활용가능) (0) 2023.04.07 CSS 기본에 충실히 기초 시작하기 (0) 2023.04.07