티스토리 뷰
CHAPTER 6 : 폼 태그
- 폼 처리
- form 태그
- input 태그
- select 태그
- textarea 태그
- 폼 데이터 처리
form : 폼은 사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식이다.
전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지를 보여준다.
- form : 폼을 정의하는 태그로 최상위 태그
- input : 사용자가 입력할 수 있는 태그
- select : 항목을 선택할 수 있는 태그
- textarea : 여러 줄을 입력할 수 있는 태그
<form 속성1="값1" ... >
//다양한 입력 양식 태그<input>, <select>, <textarea>
</form>
# 폼 태그의 속성
- action : 폼 데이터를 받아 처리하는 웹 페이지의 url을 설정
- method : 폼 데이터가 전송되는 HTTP 방식 설정
- name : 폼을 식별하기 위한 이름
- target : 폼 처리 결과의 응답을 실행할 프레임 설정
- enctype : 폼을 전송하는 콘텐츠 MIME 유형 설정
- accept-charset : 폼 전송에 사용할 문자 인코딩 설정
## input 태그의 기능과 사용법
<input 속성1="값" ... >
- input 태그의 기본 속성
type
- text : 기본 값으로 한 줄의 텍스트 입력
- radio : 라디오 버튼으로 열거된것 중 하나만 선택
- chechbox : 다중 선택 사용할 때
- password : 암호 입력
- hidden : 보이지 않게 숨겨서 값을 전송
- file : 파일 업로드를 위한 파일을 선택할 때
- button : 버튼 모양을 출력
- reset : 폼에 입력된 값을 모두 초기화
- submit : 폼에 입력된 값을 모두 서버로 전송
name - text : 입력양식을 식별하는 이름
value - text : 입력 양식의 초깃값 설정
<%@ page contentType = "text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="#" name="member" method="post">
<p>아이디 : <input type="text" name="id"><input type="button" value="아이디 중복 검사">
<p>비밀번호 : <input type="password" name="passwd">
<p>연락처 : <input type="text" maxlength="4" size="4" name="phone1"> -
<input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone2">
<p>성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성">여성
<p>취미 : 독서<input type="checkbox" name="hobby1" checked>
운동<input type="checkbox" name="hobby2" >
영화<input type="checkbox" name="hobby3" >
<p> <input type="submit" value="가입하기">
<input type="reset" valye="다시쓰기">
</form>
</body>
</html>위 코드는 form 태그의 input 태그를 이용한 코드이다.
text / password / radio / checkbox / submit / reset 속성을 이용하였다.
## select 태그
: 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그 형식.
리스트 박스에 여러 항목을 추가 삽입하기 위해 반드시 option 태그를 포함
<select 속성="값1" ... >
<option 속성1="값1" [속성1]> 항목1</option>
<option 속성2="값2" [속성2]> 항목2</option>
</select>
#속성
- select
- name : 목록 상자의 이름 설정
- size : 한 번에 표시할 항목의 개수 설정
- multiple : 다중 선택이 가능하도록 함
- option
- value : 항목의 값을 설정
- selected : 해당 항목을 초깃값으로 선택
- disabled : 항목을 비활성화
<%@ page contentType = "text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<form action="#" method="get">
<p> <select name="city" size="4">
<optgroup label="서울시">
<option value=seocho">서초구</option>
<option value=gangnam">강남구</option>
<option value=songpa">송파구</option>
</optgroup>
<optgroup label="경기도">
<option value=seongnam">성남시</option>
<option value=suwon">수원시</option>
<option value=yongin">용인시</option>
</optgroup>
</select>
<p><input type="submit" value="전송">
</form>
</body>
</html>select 태그를 사용하여 <optgroup> 속에 <option>을 넣어서 select 태그를 활용하였다.
<optgroup> 은 label에 값을 넣어 활용,
##textarea 태그
: 여러 줄의 텍스트를 입력할 수 있는 태그
textarea 태그의 너비와 높이를 지정하기 위해 cols와 rows 속성을 설정
<textarea cols="너비 값" rows="높이 값">
</textarea>
속성
- name : 이름 설정
- cols : 열 크기 설정
- rows : 행 크기 설정
<p> <textarea name="comment" clos="30" rows="10" placeholder="가입 인사를 입력"></textarea>형식으로 사용 placeholder 안에 텍스트를 입력하면 입력상자에 미리 글이 들어가 있다.
##폼 데이터 처리하기
: 사용자가 웹 브라우저의 폼 페이지에 입력한 데이터를 서버로 전달하여 서버가 이를 처리하기 위해
스크립틀릿 태그에 request 내장 객체를 이용하여 전달된 값을 얻을 수 있다.
- 요청 파라미터 값 받기
: request 내장 객체는 웹 브라우저가 서버로 보낸 요청에 대한 다양한 정보를 담고 있어 get.Parameter() 메소드를 이용하여 값을 얻을 수 있다.
String 변수 = request.getParameter(요청 파라미터 이름);
<%@ page contentType = "text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="formdata_process.jsp" name="member" method="post">
<p>아이디 : <input type="text" name="id"><input type="button" value="아이디 중복 검사">
<p>비밀번호 : <input type="password" name="passwd">
<p>연락처 : <select name="phone1">
<option value="010">010</option>
<option value=011"">011</option>
<option value="012">012</option>
<option value="013">013</option>
<option value="014">014</option>
</select> -
<input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p>성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성">여성
<p>취미 : 독서<input type="checkbox" name="hobby1" checked>
운동<input type="checkbox" name="hobby2" >
영화<input type="checkbox" name="hobby3" >
<p> <textarea name="comment" clos="30" rows="10" placeholder="가입 인사를 입력"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
============================
<%@ page contentType = "text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String id= request.getParameter("id");
String passwd = request.getParameter("passwd");
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String sex = request.getParameter("sex");
String hobby1 = request.getParameter("hobby1");
String hobby2 = request.getParameter("hobby2");
String hobby3 = request.getParameter("hobby3");
String comment = request.getParameter("comment");
%>
<p> 아이디 : <%=id %>
<p>비밀번호 : <%=passwd %>
<p>휴대폰 : <%=phone1 %>-<%=phone2 %>-<%=phone3 %>
<p>성별 : <%=sex %>
<p>취미 : <%=hobby1 %> <%=hobby2 %> <%=hobby3 %>
<p>코멘트 : <%=comment %>
</body>#요청 파라미터의 전체 값 받기
: get.Parameter 메소드를 이용하면 서버로 보낸 요청 파라미터 값을 얻을 수 있다.
하지만 입력 데이터가 다수이거나 입력양식이 다양하면 그에 맞춰서 getParameter 메소드를 설정해야 한다.
이러한 단점을 보완하기 위해서 폼 데이터 일괄 처리 메소드가 있다.
- getParameterNames() : 모든 요청 파라미터를 Enumeration(열거형)형태로 전달받는다.
- hasMoreElements() : Enumeration 요소가 있으면 true를 반환하고, 그렇지 않으면 false를 반환
- nextElement() : Enumeration 요소를 반환
<%@ page contentType = "text/html; charset=utf-8" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="filedata1_process.jsp" name="member" method="post">
<p>아이디 : <input type="text" name="id"><input type="button" value="아이디 중복 검사">
<p>비밀번호 : <input type="password" name="passwd">
<p>연락처 : <select name="phone1">
<option value="010">010</option>
<option value=011"">011</option>
<option value="012">012</option>
<option value="013">013</option>
<option value="014">014</option>
</select> -
<input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p>성별 : <input type="radio" name="sex" value="남성" checked>남성
<input type="radio" name="sex" value="여성">여성
<p>취미 : 독서<input type="checkbox" name="hobby1" checked>
운동<input type="checkbox" name="hobby2" >
영화<input type="checkbox" name="hobby3" >
<p> <textarea name="comment" clos="30" rows="10" placeholder="가입 인사를 입력"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>
========================================
<%@ page contentType = "text/html; charset=utf-8" %>
<%@ page import="java.io.*,java.util.*" %>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<table border="1">
<tr>
<th>요청 파라미터 이름</th>
<th>요청 파라미터 값</th>
</tr>
<%
request.setCharacterEncoding("utf-8");
Enumeration paramNames = request.getParameterNames();
while(paramNames.hasMoreElements()){
String name = (String)paramNames.nextElement();
out.print("<tr><td>" + name + " </td>>\n");
String paramValue =request.getParameter(name);
out.println("<td>" + paramValue + " </td></tr>\n");
}
%>
</table>
</body>
</html>