티스토리 뷰
반응형
* 회원가입 폼 만들기
HTML의 기본기를 익힌 후 회원가입 폼을 만들어보자. 필자는 체크박스 체크여부를 자바스크립트를 이용하여 중복체크 없이 하나씩만 체크 하도록 하였다. 자바스크립트 내용은 다음 포스팅에 쓰도록 하겠다. HTML의 폼을 만들기위한 목적이라면 자바스크립트를 굳이 넣지 않아도 된다.
호환을 위해 internet explorer보다 chrome으로 연결하여 실행시키는 것을 추천한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157 |
<!DOCTYPE html>
<html>
<head>
<title>회원 가입</title>
<script type="text/javascript">
function check_only(chk){
var obj = document.getElementsByName("chk");
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
</script>
<style type="text/css">
</div>
</style>
</head>
<body>
<p>
<h1 align="center">회원 가입</h1>
</p>
<div align="legt">          
          
          
          
          
          
만든이 : jerry</div><br>
<FORM action="mailto:jerry495@naver.com?subject=안녕하세요" method="post" enctype="text/plain">
<table width="50%" height="80" border="1" align="center"
cellpadding="5" cellspacing="0" bordercolor="#9999FF">
<tr align="center">
<td colspan="2" align="cener" bgcolor="skyblue">
<div style="font-weight: bold; font-size: 18px">회원 기본 정보
</div></td>
</tr>
<tr>
<td bgcolor="pink" align="center">
<div style="font-weight: bold;">아이디:
</div></td>
<td> <input type="text" name="my_id" size="12" maxlength="12">
 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="pink" align="center"><div style="font-weight: bold;">
비밀번호:</div></td>
<td> <input type="password" name="my_pwd" size="12" maxlength="12">
 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="pink" align="center"><div style="font-weight: bold;">
비밀번호 확인:</div></td>
<td> <input type="password" name="my_pwd2" size="12" maxlength="12"></td>
</tr>
<tr>
<td bgcolor="pink" align="center"><div style="font-weight: bold;">
메일주소:</div></td>
<td> <input type="text" name="my_mail" size="30" maxlength="30">
 예)id@domain.com</td>
</tr>
<tr>
<td bgcolor="pink" align="center"><div style="font-weight: bold;">
이름:</div></td>
<td> <input type="text" name="my_name" size="10" maxlength="10"></td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="skyblue">
<div style="font-weight: bold; font-size: 18px">
개인 신상 정보
</div></td>
</tr>
<tr>
<td bgcolor="pink" align="center"><div style="font-weight: bold;">
주민등록번호:</div></td>
<td> <input type="text" name="my_num1" size="6" maxlength="6">
  -  <input type="password" name="my_num2" size="7" maxlength="7">
 예)123456-1234567</td>
</tr>
<tr>
<td bgcolor="pink" align="center"><div style="font-weight: bold;">
생일:</div></td>
<td> <input type="text" name="my_birth" size="4" maxlength="4">년
 
<select name="월">
<option value="1" selected="selected">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" selected="selected">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" align="center"><div style="font-weight: bold;">관심분야:</div></td>
<td><FORM name=chkForm action="" method=post >
<input type="checkbox" name="chk" value="COMPUTER" onclick="check_only(this)">컴퓨터
<input type="checkbox" name="chk" value="INTERNET" onclick="check_only(this)">인터넷
<input type="checkbox" name="chk" value="TRABLE" onclick="check_only(this)">여행
<input type="checkbox" name="chk" value="MOVIE" onclick="check_only(this)">영화감상
<input type="checkbox" name="chk" value="MUSIC" onclick="check_only(this)">음악감상</FORM>
</td>
</tr>
<tr>
<td bgcolor="pink" align="center"><div style="font-weight: bold;">자기소개:</div></td>
<td><textarea name="my_intro" cols="70" rows="5"></textarea></td>
</tr>
</table>
<p align="center">
<input type="submit" value="회원 가입">
<input type="reset" value="다시 입력">
</FORM>
</p>
</body>
</html> |
cs |
* 완성 모습
반응형
'Web > HTML & CSS' 카테고리의 다른 글
| [HTML] 이미지, 테이블, 라디오 버튼, 체크박스 (0) | 2018.04.04 |
|---|---|
| [HTML]HTML의 이해 (0) | 2018.04.04 |
댓글
공지사항