폼(Form) 관련 태그 폼 문서(회원가입 창) 만들기

사용자에게서 정보를 입력받고 그에 따른 처리를 할 때 사용하는 것이 폼 문서입니다.

사용자에게서 정보를 입력받을 때는 입력상자, 목록상자, 체크 버튼 등 다양한 방법을 사용합니다.

인터넷에서 쉽게 볼 수 있는 회원가입창 입니다.

이러한 회원가입, 게시판 글쓰기, 자료 검색 등의 구현은 밑의 순서로 이루어 집니다.

1. HTML로 폼 양식 만들기

폼 태그로 입력상자, 목록상자, 버튼을 삽입하여 폼 문서를 만듭니다.

2. CSS로 폼 양식 꾸미기

입력상자를 얇은 테두리로 꾸미기, 버튼에 색상 입히기, 스크롤바 색상 바꾸기 등 폼 양식을 좀더 꾸밉니다.

3. 자바스크립트 문서 검증하기

입력상자에 값이 입력 되었는지, 비밀번호는 일치하는지, 주민등록번호가 형식에 맞는지 등을 검증하여 잘못된 값을 입력받을 경우 오류 메세지를 띄웁니다.

4. 웹 프로그램 실행하기

ASP, PHP와 같은 웹 프로그램을 실행하여 실제로 회원 정보를 서버에 전달합니다.

결국, 회원가입등을 제공하기 위한 목적으로 폼 문서를 만듭니다.

이번에는 폼 문서를 만들기 위해 필요한 폼 태그를 알아보겠습니다.

태그명	결과	설명
<form>..</form>	안보임	폼 양식의 시작과 끝
<input type=text>		한 줄 입력상자
<input type=password>		*로 표시되는 비밀번호 입력상자
<input type=radio>	돌마	라디오 버튼
<input type=checkbox>	돌돌마	체크상자
<input type=button>		일반 버튼
<input type=submit>		전송 버튼
<input type=reset>		초기화 버튼
<input type=image>	이미지 불러옴	이미지 업로드
<input type=file>		파일 업로드
<input type=hidden>	안보임	빈 필드 표시
<textarea>  <textarea>	http://dolma.tistory.com	여러 줄 입력상자
<select>...</select>	010011016017	목록의 시작과 끝
<option>010</option>	010011016017	목록상자에서  목록들을 표시

<form>태그 관련 속성

속성	표현	설명
name	<form name=...>	폼 이름을 설정한다.
method	<form method=post> <form method=get>	폼 전송 방식을 POST 방식으로 한다. 폼 전송 방식을 GET 방식으로 한다.
action	<form action="member.php">	폼 내용이 member.php에 의해서 전달된다.
target	<form target=..>	..창에 폼 실행 결과를 보여준다.

(예제)

<form name=frm1>

<table align=center border=1 bordercolor=white bordercolorlight=gray cellspacing=0 cellpadding=2>

<tr bgcolor=#ececec align=center>

<td colspan=2>폼 양식 만들기</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>아이디</td>

<td>

<input type=text name=id size=12 maxlength=12>

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>패스워드</td>

<td><input type=password name=pw size=12 maxlength=8></td>

</tr>

<tr>

<td bgcolor=#ececec align=center>성별</td>

<td>

<input type=radio name=sex value=1>남

<input type=radio name=sex value=2 checked>여

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>국적</td>

<td>

<input type=text value=대한민국 readonly>

    <input type=button value=국적변경 disabled>

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>휴대폰</td>

<td>

<select name=phone1>

<option value=1 SELECTED>011</option>

<option value=2>016</option>

<option value=3>017</option>

<option value=4>018</option>

<option value=5>019</option>

</select>

-

<input type=text name=phone2 size=4 maxlength=4>

-

<input type=text name=phone3 size=4 maxlength=4>

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>가족사항</td>

<td>

<input type=checkbox name=familly1 value=1>조부모

<input type=checkbox name=familly2 value=2 checked>부모

<input type=checkbox name=familly3 value=3>형제자매

<input type=checkbox name=familly4 value=4>배우자

<input type=checkbox name=familly5 value=5>자식

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>소개글</td>

<td>

<textarea cols=50 rows=5 name=memo>관심분야에 대해 쓰세요</textarea>

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>증명사진</td>

<td><input type=file size=40></td>

</tr>

<tr>

<td bgcolor=#ececec colspan=2 align=center>

<input type=submit value=가입하기>

<input type=reset value=다시작성>

</td>

</tr>

</table>

</form>

실행결과

폼 양식 만들기
아이디
패스워드
성별	남 여
국적
휴대폰	011 016 017 018 019 - -
가족사항	조부모 부모 형제자매 배우자 자식
소개글	관심분야에 대해 쓰세요
증명사진