1. 가장 상단에 폼 태그를 입력하고
값을 전달할 방식, 페이지가 넘어갔을때 출력할 파일명을 지정한다.
지금은 폼만 만들지만, 추후 자바스크립트나 제이쿼리에서 각 기능을 추가할 예정이다.
<form method="post" action="member.jsp">
내용
</form>
2. 이제 폼 태그 사이의 내용을 입력해본다.
레이아웃을 쉽게 제어하기 위해 테이블 태그를 사용해서 그 안에 양식들을 넣을 계획이다.
테이블은 꼭 써야 하는 것은 아니다.
먼저 아이디 입력란과 중복검사 버튼을 만들었다.
이 때, 중복검사 버튼은 submit이 아닌 button으로 생성한다.
submit은 무조건 값을 넘겨버리기 때문이다.
기능은 추후 만들고, 지금은 중복검사 버튼만 생성해본다.
ID
<input type="text" name="id" id="id" autofocus>
<input type="button" value="중복검사">
3. 비밀번호와 성명란을 생성한다.
비밀번호
<input type="password" name="passwd" id="passwd">
성명
<input type="text" name="name" id="name">
4. 주민번호를 입력받아야 한다.
이 때, 입력란이 두 개 여야 하는데
앞자리는 6자리로 제한, 뒷자리는 7자리로 제한한다.
또, 7자리는 노출되면 안된다.
주민번호
<input type="text" size=6 maxlength=6 name="jumin1" id="jumin1">
-
<input type="password" size=7 maxlength=7 name="jumin2" id="jumin2">
5-1) 이메일 양식 란을 생성한다.
두 칸을 생성해 앞 쪽은 아이디, 뒤쪽은 도메인을 입력 받는다.
E-mail
<input type="text" size=10 name="mailid" id="mailid">
@
<input type="text" size=15 name="domain" id="domain">
5-2) 이메일 양식 란을 생성하는데,
아이디는 사용자가 직접 입력을 하도록 하고,
도메인은 직접 입력하지 않고 선택지를 고를 수 있도록 한다.
E-mail
<input type="text" size=10 name="mailid" id="mailid">
@
<select>
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="naver.com">네이트</option>
<option value="gmail.com">지메일</option>
</select>
6. 전화번호 / 휴대폰
여기에는 숫자만 입력받을 수 있게 하는 기능을 넣어야 하는데,
숫자/문자 판별은 추후 기능을 넣는다.
select 옵션의 항목 중 하나에 select="selected" 를 넣는다면
처음 화면이 로딩되자마자 그 항목이 기본값으로 선택되어 있다.
전화번호
<input type=tel1 size=4 maxlength=4 name="tel1" id="tel1">
-
<input type=tel2 size=4 maxlength=4 name="tel2" id="tel2">
-
<input type=tel3 size=4 maxlength=4 name="tel3" id="tel3">
휴대폰
<select name="phone1" id="phone1">
<option value="">번호선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
</select>
-
<input type=phone2 size=4 maxlength=4 name="phone2" id="phone2">
-
<input type=phone3 size=4 maxlength=4 name="phone3" id="phone3">
7. 우편번호, 우편번호 검색 버튼, 주소를 입력 받는다.
우편번호 검색은 추후 기능을 넣을 예정이니 button 타입을 사용한다.
주소 또한 자동으로 입력 되도록 할 예정
우편번호
<input type="text" size=5 maxlength=5 name="post" id="post">
<input type="button" value="우편번호 찾기">
주소
<input type="text" size=70 name="address" id="address">
8. 성별을 선택할 수 있도록 한다.
양자택일이기 때문에 라디오 버튼을 생성하여 입력 받는다.
그런데 하나만 선택할 수 있도록 해야 하는데 다음과 같이 입력하면 다중 선택이 되기 때문에
제 기능을 할 수 없다.
성별
<input type="radio"> 남자
<input type="radio"> 여자
이 때, name 값으로 두 라디오 버튼을 하나의 네임값으로 묶어 준다면,
단일 선택이 가능해진다.
성별
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자
9. 취미 선택란을 생성한다.
역시 같은 카테고리로 묶여야 하기 때문에 하나의 네임값으로 묶어준다.
그리고 성별란의 단일 선택을 하는 라디오 버튼과는 달리
체크 박스는 다중 선택이 가능하다.
여기에 check="checked" 라는 속성을 추가해주면
처음 실행될때부터 자동으로 체크되도록 해준다.
취미
<input type="checkbox" name="hobby" value="공부">공부
<input type="checkbox" name="hobby" value="영화">영화
<input type="checkbox" name="hobby" value="그림">그림
<input type="checkbox" name="hobby" value="음악">음악
<input type="checkbox" name="hobby" value="고양이">고양이
10. 자개소개란을 생성한다.
text 란이 아닌 textarea를 생성한다.
자기소개
<textarea rows="5" cols="70" name="intro" id="intro" placeholder="자기소개를 입력해주세요."></textarea>
11. 마지막으로 회원가입 버튼과 취소 버튼을 생성한다.
<input type="submit" value="회원가입">
<input type="reset" value="취소">
전체 코드
<form method="post" action="member.jsp">
<table border=0 width=700 align=center>
<caption>회원가입 폼</caption>
<tr>
<th>ID</th>
<td>
<input type="text" name="id" id="id" autofocus>
<input type="button" value="중복검사"> </td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" id="passwd"></td>
</tr>
<tr>
<th>성명</th>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<th>주민번호</th>
<td><input type="text" size=6 maxlength=6 name="jumin1" id="jumin1">
-
<input type="password" size=7 maxlength=7 name="jumin2" id="jumin2"></td>
</tr>
<tr>
<th>E-mail</th>
<td><input type="text" size=10 name="mailid" id="mailid">
@
<select>
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="naver.com">네이트</option>
<option value="gmail.com">지메일</option>
</select></td>
</tr>
<tr>
<th>전화번호</th>
<td><input type=tel1 size=4 maxlength=4 name="tel1" id="tel1">
-
<input type=tel2 size=4 maxlength=4 name="tel2" id="tel2">
-
<input type=tel3 size=4 maxlength=4 name="tel3" id="tel3"></td>
</tr>
<tr>
<th>휴대폰</th>
<td>
<select name="phone1" id="phone1">
<option value="">번호선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
</select>
-
<input type=phone2 size=4 maxlength=4 name="phone2" id="phone2">
-
<input type=phone3 size=4 maxlength=4 name="phone3" id="phone3"></td>
</tr>
<tr>
<th>우편번호</th>
<td><input type="text" size=5 maxlength=5 name="post" id="post">
<input type="button" value="우편번호 찾기"></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" size=70 name="address" id="address"></td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="checkbox" name="hobby" value="공부" checked="checked">공부
<input type="checkbox" name="hobby" value="영화">영화
<input type="checkbox" name="hobby" value="그림">그림
<input type="checkbox" name="hobby" value="음악">음악
<input type="checkbox" name="hobby" value="고양이">고양이
</td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea rows="5" cols="70" name="intro" id="intro"
placeholder="자기소개를 입력해주세요."></textarea>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
추후 자바스크립트와 제이쿼리를 배우게 되면 그 때 이 폼에 기능을 추가할 예정이다.
'웹표준 > HTML5' 카테고리의 다른 글
| meta 태그를 이용한 이동 (0) | 2022.08.16 |
|---|---|
| 입력 양식 - Hidden (0) | 2022.08.05 |
| 입력 양식 - 게시판 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼의 login.jsp 생성, GET방식과 POST방식 (0) | 2022.08.05 |
| 입력 양식 - 로그인 폼 (0) | 2022.08.04 |