06 폼 태그
01 폼 처리의 개요
폼(form)은 사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식입니다.
GET 방식과 POST 방식의 차이
구분 GET 방식 POST 방식
| 전송 형태 | 이름과 값의 형태로 URL에 포함되어 전송 | HTTP 헤더 속에 감춰서 전송 |
| 전송량 | 제한적(4,096B) | 제한 없음 |
| 속도 | 빠름 | 느림 |
| 보안 | 없음 | 있음 |
input 태그
속성 속성 값 설명
| type | text | 기본값으로 한 줄의 텍스트를 입력할 떄 사용한다. |
| type | radio | 라디오 버튼으로 열거된 것 중 하나만 선택할 때 사용한다. |
| type | checkbox | 체크 박스로 열거된 것 중 다중 선택을 할 때 사용한다. |
| type | password | 암호를 입력할 때 사용한다. |
| type | hidden | 보이지 않게 숨겨서 값을 전송할 때 사용한다. |
| type | file | 파일 업로드를 위한 파일을 선택할 때 사용한다. |
| type | button | 버튼 모양을 출력할 때 사용한다. |
| type | reset | 폼에 입력된 값을 모두 초기화할 때 사용한다. |
| type | submit | 폼에 입력된 값을 모두 서버에 전송할 때 사용한다. |
| name | 텍스트 | 입력 양식을 식별하는 이름을 설정한다. |
| value | 텍스트 | 입력 양식의 초깃값을 설정한다. |
| readonly | 입력 양식을 읽기 전용으로 설정한다. | |
| mexlength | 숫자 | 입력 양식의 최대 입력 글자 수를 설정한다. type=”text”인 경우에만 사용한다. |
| size | 숫자 | 입력 양식의 너비를 설정한다. type=”text”인 경우에만 사용한다. |
| disabled | 해당 입력 양식을 비활성화로 설정한다. | |
| checked | 기본값을 선택할 때 설정한다. type=”checkbox” 또는 type=”radio”인 경우에만 사용한다. | |
| required | 입력 양식을 필수 태그로 설정한다. 필수 태그를 입력하지 않고 <submit> 버튼을 누르면 오류 메시지가 웹 브라우저에 출력된다. | |
| autofocus | 웹 페이지가 로딩되자마자 해당 입력 양식의 포커스를 설정한다 | |
| placeholder | 텍스트 | 입력 양식의 힌트를 설정한다. |
| pattern | regexp | 정규 표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용한다. |
04 select 태그
select 태그의 속성
속성 속성값 설명
| name | 텍스트 | 목록 상자의 이름을 설정한다 |
| size | 숫자 | 한 번에 표시할 항목의 개수를 설정한다 |
| multiple | 다중 선택이 가능하도록 한다. ctrl을 눌러 목록 상자의 항목을 다중 선택한다. |
option 태그의 속성
속성 속성값 설명
| value | 텍스트 | 항목의 값을 설정한다. |
| selected | 숫자 | 해당 항목을 초기값으로 선택한다 |
| disabled | 항목을 비활성화한다. |
<optgroup> 태그 (항목을 그룹으로 만들 수 있다. label 속성으로 사용하여 그룹으로 만들 이름을 설정
05 textarea 태그
속성 속성값 설명
| name | 텍스트 | 이름을 설정한다. |
| cols | 숫자 | 입력할 텍스트 영역의 너비(열 크기)를 설정한다. |
| rows | 숫자 | 입력할 텍스트 영역의 높이(행크기)를 설정한다 |
| wrap | off | 줄 바꿈을 설정한다. 옆으로 수평 스크롤바가 생기고 계속 옆으로 문장이 입력 |
| wrap | soft | Enter를 누르지 않아도 텍스트라인 끝에서 자동으로 행이 바뀐다 |
| wrap | hard | soft와 비슷하며 실제 내용을 서버에 전송할 때 캐리지 리턴 문자를 전달한다. |
[form 코드]
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<h3>회원 가입</h3>
<form action="form_process.jsp" name="member" method="post">
<p> 아이디 : <input type="text" name="id"><input type="button" value="아이디 중복 검사">
<p> 비밀번호 : <input type="password" name="passwd">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</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> 취미 : <label for="hobby1">독서</label><input id="hobby1" type="checkbox" name="hobby" value="독서" checked>
<label for="hobby2">운동</label><input id="hobby2" type="checkbox" name="hobby" value="운동" checked>
<label for="hobby3">영화</label><input id="hobby3" type="checkbox" name="hobby" value="영화" checked>
<textarea name="comment" cols="30" rows="3" placeholder="가입 인사를 입력해주세요"></textarea>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>
[form process 코드]
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>");
String paramValue = request.getParameter(name);
out.println("<td> " + paramValue + "</td></tr>\n");
}
%>
</table>
</body>
</html>
'도서 > 프로그래밍' 카테고리의 다른 글
| [07] 쉽게 배우는 JSP 웹 프로그래밍 (0) | 2024.01.21 |
|---|---|
| [06] 쉽게 배우는 JSP 웹 프로그래밍 (0) | 2024.01.19 |
| [04] 쉽게 배우는 JSP 웹 프로그래밍 (0) | 2024.01.17 |
| [03] 쉽게 배우는 JSP 웹 프로그래밍 (0) | 2024.01.16 |
| [02] 쉽게 배우는 JSP 웹 프로그래밍 (1) | 2024.01.14 |
