💡Form
Form은 입력양식 즉, 입력 컨트롤을 의미한다.
클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)를 통해서 데이터를 입력받는 역할을 한다.
입력 데이터를 서버로 전송하며, 이를 업무에 활용하거나 데이터베이스에 저장하는 등의 일을 하게 된다.
예로 들어 텍스트 박스, 버튼, 체크 박스, 라디오 버튼 등이 있다.
<form> 태그의 사용
<form> + <form>의 자식 태그들을 사용하여 구현한다.
폼 태그 자체는 렌더링 하는 결과가 없어서 화면에 보이지 않는다.
<form>은 비주얼 한 요소라기보다는 기능을 구현하는 요소이다.
브라우저가 값을 받아서 사용할 수 있는 서버를 연결해 주어야 한다.
html 파일과 JSP 파일을 생성하여 나이를 입력받아서 출력하는 프로그램을 작성해 보도록 하자.
html 파일 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>데이터 입력</h1>
<form method="POST" action="ex18_server.jsp">
나이: <input type="text" name="age">
<br>
<input type="submit" value="보내기">
</form>
</body>
</html>
JSP 파일 생성
<%@ 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>
<h1>서버 페이지</h1>
<%
//자바 영역
String txtAge = request.getParameter("age");
%>
<p>나이: <%= txtAge %></p>
</body>
</html>HTML 같지만 JSP는 자바 클래스 파일이다. 여기에 자바 프로그램을 만들 수 있다.
이런 페이지를 서버에서 돌아간다고 해서 서버 페이지라고 부른다.
데이터만 보내는 게 아니라 데이터를 구분할 수 있도록 데이터에 이름을 붙여서 보낸다.
request.getParameter("age")는 수신 명령어이고, txtAge는 출력 명령어이다. 따라서 위 코드에서는 age를 수신하여 출력하게 된다.
나이를 입력하고 '보내기'를 하면 서버 페이지로 나이가 전송되는 것을 확인할 수 있다.
<form> 요약
모든 입력 컨트롤을 감싸는 컨테이너이다.
스스로는 렌더링 결과가 없다.
입력한 값을 서버로 전송하는 역할을 한다.
📌<form> 태그 속성
form.method
- 데이터를 전송하는 방식
method는 택배(일반 우편 | 등기 우편)로 예를 들면, method로 데이터를 보내는 건 같은데, 일반 우편과 등기 우편의 관계같이 데이터를 보내는 방식이 다른 것이다.
1. POST
http://localhost:8090/client/html/ex18_server.jsp
POST는 JSP 까지만 주소에 붙는다.
POST 방식은 데이터를 상자 안에 담아서 전송하므로 눈에 보이지 않는다.
데이터가 노출되지 않으므로 보안상 GET 방식보다는 좋지만, 패킷이 탈취되어 꺼내는 방식으로 해킹을 당할 수도 있으므로 주소창에 노출되지 않을 뿐, 아주 안전한 것은 아니다.
전송하는 데이터의 최대 길이 제한이 없다.
2. GET
http://localhost:8090/client/html/ex18_server.jsp?age=23
GET에는 내가 보낸 데이터의 값이 주소에 붙는다.
GET 방식은 데이터를 받는 사람 주소 뒤에 붙여서 보내기 때문에 눈에 보인다.
전송되는 데이터가 주소창에 노출되어 보안상에 좋지 않다.
전송하는 데이터의 최대 길이는 제한이 있다. 시대에 따라서 달라져 왔으며, 현재는 8,000바이트까지 전송이 가능하다. 따라서 아주 긴 데이터는 전송할 수 없다.
브라우저 히스토리
지속적으로 이 페이지가 한 번이라도 간 적이 있는지를 관리를 하는데, 이를 관리하는 곳이 브라우저 히스토리라고 한다.
GET 방식으로 데이터를 전달하면 브라우저는 http://localhost:8090/client/html/ex18_server.jsp?age=23 전체를 URL이라고 생각한다.
이를 통째로 브라우저가 기억을 하기 때문에 GET 방식은 보안에 하나도 좋지 않다.
만약 GET 방식으로 데이터를 전송한다면 이 데이터는 누구나 봐도 괜찮은 데이터라는 것을 의미한다.
form.action
- 데이터를 수신하는 서버측 URL
action은 받는 사람의 주소를 의미한다.
서버 측에서 동작하고 있는 프로그램의 주소를 입력하며, JSP, Servlet, Spring 등의 주소를 넣게 된다.
💡<input>
<input> 태그는 인라인 태그이고, 단독 태그로 사용한다.
- input.type: 입력 컨트롤 종류 지정
- input.name: 식별자 (HTML에서 서버 측과 연동할 때 사용)
- input.id: 식별자 (CSS, JavaScript에서 사용)
- input.class: 식별자 (CSS, JavaScript에서 사용)
- input.size: 길이 (글자 수)
- input.maxlength: 최대 입력 길이 (글자 수) + 유효성 검사에 사용
- input.value: 컨트롤의 입력값 (현재 입력 값)
- input.readonly: 읽기전용 (전원 ON)
- input.disabled: 비활성화 (전원 OFF)
- input.accesskey: 바로 가기 (Alt + 조합키)
- input.autofocus: 자동 포커스
- autocomplete: 자동 완성 끄기
input.type
<input> 태그에 type으로 입력할 수 있는 컨트롤 종류에는 20개 정도 있다.
input.size
size는 절대적으로 길이라고 생각해서는 안 된다.
size를 30이라고 해도 한글 또는 영어에 따라 25자까지만 입력할 수 있는 경우도 있기 때문이다.
readonly와 disabled
readonly와 disabled는 둘 다 수정을 못 하지만 readonly는 전송 버튼을 누르면 서버로 전송이 되며, disabled는 서버로 전송이 되지 않는다는 차이가 있다.
accesskey
accesskey="s"
alt + s 단축키이다. 이를 바로가기 키로 사용할 수 있다.
autocomplete
autocomplete="off"브라우저가 관리하는 자동 완성 기능을 끌 수 있다.
대부분의 포털에서는 오히려 자동 완성 기능이 불편하기 때문에 꺼놓는 편이다.
단일 라인 텍스트 박스
<h1>폼 컨트롤</h1>
<form>
텍스트 박스(단일 라인):
<input type="text">
<br>
체크 박스:
<input type="checkbox">
</form>
단일 라인 텍스트 박스는 Enter를 입력해도 개행이 되지 않는다.
암호 상자
암호 상자(Password Box, Masked Text Box)는 모든 속성이 텍스트 박스와 동일하다.
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
텍스트 박스(암호):
<input type="password">
<hr>
<input type="submit" value="보내기">
</form>
<input>의 type을 password로 지정하면 마스킹하여 입력받을 수 있다.
암호 박스에 value 속성(기본값)은 절대 사용하지 않도록 한다.
<textarea>
<textarea> 태그는 쌍태그이며, 대부분의 속성은 텍스트 박스와 유사하다.
그러나 많은 양의 텍스트를 입력받을 수 있도록 만들어 두었기 때문에 maxlength 속성이 없다.
value 속성 대신에 <textarea>초기값</textarea> 사이에 PCDATA로 초기값을 작성한다.
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
텍스트 박스(다중 라인):
<textarea>초기값</textarea>
<hr>
<input type="submit" value="보내기">
</form>
다중 라인에 초기값으로 작성하는 내용은 입력하는 그대로 출력이 된다.
크기 지정
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
텍스트 박스(다중 라인):
<textarea cols="50" rows="5" style="resize:none;">아
이
작</textarea>
<hr>
<input type="submit" value="보내기">
</form>
크기를 지정할 때에는 cols와 rows를 사용한다.
css의 기능이기는 하지만 style="resize:none;"으로 다중 라인 박스의 크기를 조절하지 못하게 할 수 있다.
체크박스
선택을 했느냐 안 했느냐의 논리값을 입력할 때 사용한다.
다중 선택 컨트롤이다.
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
체크박스:
<input type="checkbox">
<h3>취미 선택</h3>
<input type="checkbox" id="cb1"> <label for="cb1"> 독서 </label>
<input type="checkbox" id="cb2"> <label for="cb2"> 달리기 </label>
<input type="checkbox"> 영화보기
<hr>
<input type="submit" value="보내기">
</form>
라디오 버튼
체크 박스와 유사하지만, 단일 선택만 가능하다.
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
<input type="radio" name="rbGender"> 남자
<input type="radio" name="rbGender"> 여자
<input type="radio" name="rbGender" checked> 선택안함
<hr>
<input type="submit" value="보내기">
</form>
check 속성을 쓰면 미리 선택된 상태로 만들 수 있다.
셀렉트 박스
콤보(Combo) 박스 또는 드랍 다운 리스트(Drop Down List)라고도 부른다.
제시되는 항목 중에 하나를 선택하게 할 수도, 여러 개를 선택하게 할 수도 있다.
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
셀렉트 박스:
<select>
<option>강아지</option>
<option>고양이</option>
<option>병아리</option>
</select>
<hr>
<input type="submit" value="보내기">
</form>
이 박스.. size를 지정하면 어떨까?
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
셀렉트 박스:
<select size="5" multiple>
<option>강아지</option>
<option>고양이</option>
<option>병아리</option>
</select>
<hr>
<input type="submit" value="보내기">
</form>
size를 지정하면 한 번에 몇 개를 보여줄지 지정해 줄 수 있다.
multiple을 지정하면 Ctrl 또는 Shift를 이용해 여러 개를 선택할 수 있다.
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
셀렉트 박스:
<select>
<optgroup label="자바">
<option>클래스</option>
<option>메소드</option>
<option>배열</option>
</optgroup>
<optgroup label="오라클">
<option>테이블</option>
<option>서브쿼리</option>
<option>조인</option>
<option>프로시터</option>
</optgroup>
<optgroup label="HTML">
<option>태그</option>
<option>엔티티</option>
<option>PCDATA</option>
</optgroup>
</select>
<hr>
<input type="submit" value="보내기">
</form>
optgroup으로 선택 항목들을 묶어줄 수 있다.
파일 선택
히든 태그
히든 태그는 눈에 보이지 않는다.
개발자용으로 사용한다.
서버로 보낼 데이터가 있는데 이를 사용자에게 보이고 싶지 않은 경우에 사용한다.
눈에 보이지 않는 텍스트 박스 정도로 생각하면 된다.
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
히든 태그:
<input type="hidden" name="txtName" value="Isaac">
<hr>
<input type="submit" value="보내기">
</form>
버튼들
<h1>폼 컨트롤</h1>
<form method="POST" action="ex18_server.jsp">
전송 버튼: <input type="submit" value="전송하기">
<br>
취소 버튼: <input type="reset" value="초기화">
<br>
이미지 버튼(전송 버튼): <input type="image" src="images/chromi.png" width="30" height="30">
<br>
버튼: <input type="button" value="단독 태그 버튼">
<br>
버튼: <button><img src="images/chromi.png" width="30" height="30">쌍태그 버튼</button>
</form>
전송 버튼은 데이터를 서버로 전송하는 역할을 한다.
취소 버튼은 데이터 중에 잘못 입력된 게 있을 때 새로고침 대신에 초기화하여 입력된 상태를 초기화하는 역할을 한다.
이미지 버튼은 전송 버튼의 모양을 직접 그림으로 만들 때 사용할 수 있다.
버튼은 JavaScript로 직접 버튼의 기능을 만들어서 사용할 수 있다. 이중 input type으로 만든 버튼은 단독 태그이고, button type으로 만든 버튼은 쌍태그라는 차이점이 있다.
input type으로 만든 버튼에는 글자만 넣을 수 있지만 button type으로 만든 버튼에는 태그를 넣을 수 있으므로 이미지를 넣는 것도 가능하다.
