FORM 태그
HTML에서 사용자로부터 일정한 형식의 정보를 입력받기 위해서는 <FORM> 태그를 사용해야 한다. 이 태그는 반드시 </FORM> 태그와 쌍을 이룬다. <FORM> 태그는 단독으로 사용할 수 없으며 <INPUT />, <SELECT> ~ </SELECT>, <TEXTAREA> ~ </TEXTAREA> 등과 같은 각종 입력 태그들을 조합하여 사용해야 한다. 다음 프로그램 "formTag.html"은 <FORM> 태그의 기본적인 사용 예를 보여준다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<FORM ACTION="action.jsp" METHOD="GET" NAME="myform">
이름 : <INPUT TYPE="TEXT" NAME="name" /><BR/>
비밀번호 : <INPUT TYPE="PASSWORD" NAME="pass" /><BR/>
<INPUT TYPE="SUBMIT" VALUE="로그인" />
</FORM>
</body>
</html>
formTag.html 실행결과
위 예를 보면 <FORM> 태그에 ACTION과 METHOD 속성을 볼 수 있다. ACTION 속성에는 입력된 자료를 전달받아 실행할 프로그램 이름을 지정해 준다. 이 예에서는 "action.jsp" 프로그램을 실행하도록 지정되었다. 다음으로 METHOD 속성에는 GET 또는 POST 값을 지정할 수 있다. METHOD 속성은 HTML 폼으로부터 입력된 데이터를 ACTION 속성에 정의된 프로그램으로 전달할 때 어떻게 전달할 것인가 그 방법을 정의해주는 속성이다. GET과 POST의 차이점은 다음 표를 참조하기 바란다.
|
METHOD |
특징 |
| GET |
- Query String 형태로 데이터가 전달되므로 전달 내용을 사용자가 확인할 수 있다.
- 전달되는 내용의 크기에 한계를 가지므로 대용량의 데이터를 전달할 수 없다. |
| POST |
- 표준 입출력을 통해 데이터가 전달되므로 사용자가 확인할 수 없다. 따라서 로그인과 같이 보안을 유지할 필요가 있을 때 사용할 수 있다.
- 전달되는 내용의 크기에 한계가 없으므로 파일 업로드 등의 경우에도 사용할 수 있다. |
NAME 속성은 하나의 HTML 내부에 여러 개의 FORM 태그가 사용됐을 경우 각각을 구분하기 위해 사용되는 속성으로 그 값은 사용자가 임의로 줄 수 있다. 그러면 FORM 태그와 함께 사용되는 각종 입력 태그들에 대해서 살펴보자.
INPUT 태그
<INPUT> 태그는 <FORM> 태그와 함께 사용되는 태그 중 가장 기본이 되는 태그로 </INPUT> 태그 없이 단독으로 사용된다. <INPUT> 태그에는 다양한 속성이 있다. 먼저 NAME 속성에 대하여 살펴보자. NAME 속성은 입력폼을 구성하는 각 요소들을 구분하기 위한 속성으로 프로그램 실행 시 중요한 역할을 하는 속성이다. 이 속성의 값은 사용자에의해 정의된다. 또 다른 속성으로 TYPE 속성이 있다. 이 속성은 각 요소들의 형태을 지정해주는 속성으로 그 내용은 다음 표와 같다.
| Type |
특징 |
| TEXT |
한 줄짜리 입력창을 표시한다. |
| PASSWORD |
TEXT와 유사하지만 입력되는 내용을 화면에 '*'로 표시한다. |
| RADIO |
원형 모양의 창에 점이 찍히는 라디오버튼을 표시한다. |
| CHECKBOX |
사각형 모양의 창에 체크 표시가 되는 체크박스를 표시한다. |
| BUTTON |
버튼을 표시한다. |
| SUBMIT |
각각의 폼에 입력된 데이터를 가지고 Action 속성에 지정된 프로그램을 실행하도록 하는 버튼을 표시한다. |
| RESET |
클릭하면 폼에 입력된 값을 초기화 하는 버튼을 표시한다. |
| FILE |
파일 업로드를 위한 입력창과 파일검색 버튼을 표시한다. |
또한 <INPUT> 태그에는 SIZE, MAXLENGTH, VALUE, CHECKED 등의 속성이 있다. SIZE
속성과 MAXLENGTH 속성은 TYPE 속성의 값이 TEXT, PASSWORD 인 경우 함께 사용되며 각각 입력창의 크기와
입력 가능한 최대 글자수를 지정한다. 또한 VALUE 속성은 TEXT, PASSWORD, BUTTON, SUBMIT,
RESET와 함께 사용되며 TEXT, PASSWORD에서는 창에 표시될 초기값을 지정하고 출력하며, BUTTON, SUBMIT,
RESET에서는 버튼 위에 표시될 문자를 지정한다. 마지막으로 CHECKED 속성은 RADIO, CHECKBOX와 함께 사용되며
라디오버튼 또는 체크박스가 기본적으로 선택된 상태가 되도록 하기위해 사용된다.
| 속성 |
관련 Type |
의미 |
| Size |
Text, Password
|
표시 가능한 문자의 개수로 창의 크기 지정 |
| Maxlength |
창에 입력 가능한 최대 문자 |
Value
|
Text, Password |
창에 표시될 초기값 지정 |
| Button, Submit, Reset |
버튼 위에 표시될 문자 지정 |
| Radio, Checkbox |
각 항목에 대해 프로그램으로 전달될 실제 값 지정 |
| Checked |
Radio, Checkbox |
기본적으로 선택된 상태 지정 |
| Name |
|
HTML의 모든 태그를 구분하기 위한 고유 값을 지정하며 JSP 프로그램에서 파라메터로 처리 |
다음 프로그램 "inputTag.html"은 다양한 <INPUT> 태그의 예를 보여주고 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>입력 폼</title>
</head>
<body>
<form name="form" method="get" action="exam7-2.php">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="80">
<p align="right">
<font size="2">아이디</font>
</p>
</td>
<td width="195">
<p><font size="2">
<input type="text" name="id" maxlength="20" value="아이디를 입력하세요" /> </font>
</p>
</td>
</tr>
<tr>
<td width="80">
<p align="right"><font size="2">비밀번호</font></p>
</td>
<td width="195">
<p><font size="2">
<input type="password" name="pass" maxlength="20" /> </font>
</p>
</td>
</tr>
<tr>
<td width="80">
<p align="right"><font size="2">성별</font></p>
</td>
<td width="195">
<p><font size="2">
<input type="radio" name="gender" checked />남자
<input type="radio" name="gender" />여자
</font>
</p>
</td>
</tr>
<tr>
<td width="80">
<p align="right"><font size="2">취미</font></p>
</td>
<td width="195">
<p><font size="2">
<input type="checkbox" name="hobby" checked />여행
<input type="checkbox" name="hobby" />독서
</font>
</p>
</td>
</tr>
<tr>
<td width="80">
<p> </p>
</td>
<td width="195">
<p><font size="2">
<input type="submit" value="저장" /> <input type="reset" value="취소" /> <input type="button" value="버튼" /> </font>
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
inputTag.html 실행결과
TEXTAREA 태그
<TEXTAREA> 태그는 게시판 글올리기에서와 같이 여러줄을 입력할 수 있는 입력창을 표시한다. <TEXTAREA> 태그는 </TEXTAREA> 태그와 함께 사용되며 두 태그 사이에 위치한 내용을 화면에 표시한다. <TEXTAREA> 태그 역시 다양한 속성을 가지고 있으며 그 중 몇가지 속성에 대해 살펴보겠다. 먼저 입력창의 크기를 지정하는 ROWS, COLS 속성이 있다. ROWS 속성은 입력창의 높이를 지정하며 COLS는 폭을 지정한다. 또한 이 태그 역시 NAME 속성을 가지며 이 속성의 의미는 <INPUT> 태그의 그것과 같다.
다음 프로그램 "textareaTag.html"은 <TEXTAREA> 속성의 예를 보여준다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>입력 폼</title>
</head>
<body>
<form name="form" method="get">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="80">
<p align="right">
<font size="2">아이디</font>
</p>
</td>
<td width="195">
<p><font size="2">
<input type="text" name="id" maxlength="20"
value="아이디를 입력하세요"/>
</font>
</p>
</td>
</tr>
<tr>
<td width="80">
<p align="right"><font size="2">메세지</font></p>
</td>
<td width="195">
<p><font size="2">
<textarea name="msg" cols="25" rows="3">메세지 영역</textarea> </font>
</p>
</td>
</tr>
<tr>
<td width="80">
<p> </p>
</td>
<td width="195">
<p><font size="2">
<input type="submit" value="저장"/>
<input type="reset" value="취소"/>
<input type="button" value="버튼"/>
</font>
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
textareaTag.jap 실행결과
프로그램에서 "<textarea name="msg" cols="25" rows="3">메세지 영역</textarea>"의 내용에 의해 가로 25 자 세로 3 줄 짜리 텍스트 영역이 만들어 졌으며 이 영역에 "메세지 영역"이라는 내용을 기본으로 출력하고 있다.
SELECT 태그
<SELECT> 태그는 펼침목록 또는 리스트 형태의 입력폼을 표시한다. 이 태그는 </SELECT> 태그와 함께 사용되어야 한다. 이 태그 역시 다른 태그들과 마찬가지로 NAME 속성을 가진다. 또한 SIZE 속성을 가지는데 값이 1이면 펼침목록 형태로 출력되며 값이 2 이상이면 리스트박스 형태로 출력된다. <SELECT> 태그는 단독으로 사용될 수 없으며 <SELECT> 태그와 </SELECT> 태그 사이에 열거하려는 각각의 목록을 <OPTION> ~ </OPTION> 태그 사이에 써 줘야한다. <OPTION> 태그는 VALUE 속성과 SELECTED 속성을 가진다. VALUE 속성은 해당 목록이 선택됐을 때 프로그램으로 전달할 값을 지정해 주며, SELECT 속성은 라디오버튼 및 체크박스에서의 CHECKED 와 같은 의미를 가진다.
다음 프로그램 "selectTag.html"은 <SELECT> 태그를 사용한 예를 보여주고 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>SELECT</title>
</head>
<body>
<form name="form" method="get">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="55">
<p align="right"><font size="2">직업</font></p>
</td>
<td width="150">
<p><font size="2">
<select name="job"> <option value="1">회사원</option> <option selected value="2">학생</option> <option value="3">자영업</option> <option value="4">주부</option> <option value="5">무직</option> </select> <input type="submit" value="확인"/>
</font>
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
selectTag.html 실행결과
프로그램의 실행결과를 살펴보면 <option>~</option> 태그에 열거된 내용들이 펼침목록에 표시되었으며 "SELECTED" 된 항목인 "학생"이 기본적으로 선택되었다.
