[html]기초 마무리 문제(회원가입창 모양새만들기)
- 웹/html
- 2020. 8. 23.
지금까지 html 배운것을 활용해서 회원가입창을 만들어 보자.
우선 사진 부터 올린다.
당연히 회원가입은 되지 않고 모양새만 저럴 뿐이다. 단 약간의 조건이 있다.
1. 아이디와 비밀번호는 4~12자까지만 입력가능하게 할것.
2. 모든 정보를 입력하고 회원 가입버튼을 누르면 내 블로그 로 이동되도록 할것.
3. 다시입력을 누르면 내용이 초기화가 될것.
우선 앞서 배운 테이블을 활용해 디자인을 먼저 한후에
두 가지 조건을 어떻게 만족시킬지 생각을 해본다.
사실 답을 몰랐을땐 머리가 안돌아갔지만 알고나니 허무할 정도로 간단한 문제였다.
코드
<html>
<head>
<title> 회원가입 </title>
</head>
<body >
//코드를 form으로 묶어줌 , 회원가입 버튼 누르면 action기능 수행
<form method="post" action="https://itjy2.tistory.com">
//table 위치 가운대로
<table align="center" border>
<tr bgcolor="#2EFEC8" align="center"><td colspan="5" >회원 기본 정보</td></tr>
<tr>
<td>아이디:<td>
<input type="text" name="my_id" size="12" minlength="4">
4~12자의영문 대소문자와 숫자로만 입력
</td></td>
<tr><td>비밀번호:<td>
<input type="password" name="my_pass" size="12" minlength="4">
4~12자의영문 대소문자와 숫자로만 입력
</td></td></tr>
<tr><td>비밀번호확인:<td>
<input type="password" name="my_passre" size="12" minlength="4">
</td></td></tr>
<tr><td>메일주소:<td>
<input type="text" name="my_mail" size="12" minlength="4">
</td></td></tr>
<tr><td>이름:<td>
<input type="text" name="my_name" size="12" minlength="4">
</td></td></tr>
</tr>
<tr bgcolor="#2EFEC8" align="center"><td colspan="5" >개인 신상 정보</td></tr>
<td>주민등록번호:<td>
<input type="password" name="my_reg" size="12" maxlength="13">
예)9912311234567
</td></td>
<tr><td>생일:</td>
<td>
<input type="text" name="my_birth" size="4">년
//드롭박스
<select 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>
//힘들어서 20일까지만
<select 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">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>
</select>
</td>
//체크박스
<tr><td>취미:</td>
<td>
<input type="checkbox" name="my_hoppy" value="컴퓨터" checked>컴퓨터
<input type="checkbox" name="my_hoppy" value="인터넷" checked>인터넷
<input type="checkbox" name="my_hoppy" value="여행" checked>여향
<input type="checkbox" name="my_hoppy" value="영화감상" checked>영화감상
<input type="checkbox" name="my_hoppy" value="음악감상" checked>음악감상
//textarea
<tr><td>자기소개:</td>
<td>
<textarea name="my_intro" clos="50" rows="5"></textarea>
</select>
</table>
//div를 사용해서 영역지정 (버튼두개)
<div align="center">
<input type="submit" value="회원가입">
<input type="reset" value="다시입력">
</div></form>
//맨 위에서 지정햇던 폼끝
</body>
</html>
'웹 > html' 카테고리의 다른 글
| html 기초 마무리 (0) | 2020.08.23 |
|---|---|
| html 테이블만들기 (0) | 2020.08.23 |
| html 기초 (0) | 2020.08.23 |