728x90
폼태그의 동작 원리
폼 양식을 통해 클라이언트에서 입력된 데이터는 한꺼번에 웹 서버로 전송
웹 서버는 JSP 웹 컨테이너에게 전송된 데이터를 전달하여 처리 의뢰
<form action="파일 또는 URL" method="get 또는 post">
<input 속성1="값1" 속성2="값2">
<select> </select>
<textarea> </textarea>
</form>| 속성 | 의미 |
| action | 폼 데이터를 전송할 서버 쪽 스크립트 파일 또는 URL을 지정 |
| method | 폼 데이터가 전송되는 HTTP 방식(GET or POST)을 지정 |
| name | 폼을 식별하기 위한 이름을 지정 |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정 |
| enctype | 폼을 전송하는 컨텐츠의 인터넷 표준 포맷인 MIME 유형을 지정 |
| accept-charset | 폼 전송에 사용할 문자 인코딩을 지정 |
데이터 전송 방식
GET 방식 : 폼 태그 method="get"으로 선언
- GET 방식은 웹 서버로부터 정보를 조회하기 위해 설계된 메소드
- 요청할 때 필요한 데이터를 Body에 담지 않고 Header만 쿼리스트링을 통해 전송
- 쿼리스트링 : URL 주소 끝에 ?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터
- GET 전송 과정에서 요청 파라미터가 여러 개일 경우 &로 연결함
- ex) www.naver.kr/resouces?name1=value1&name2=value2
POST 방식 : 폼 태그 method="post"으로 선언
- 데이터를 HTTP 메시지의 Body에 담아 전송
- Body 영역 데이터 타입을 Header Content-Type에 명시해야 함
Content-Type:application/json; charset=UTF-8 //Header 영역
...
{ //Body 영역
"name1":"value1",
"name2":"value2",
}
input 태그 : 종료 태그 없이 단독으로 사용
| 속성 | 속성값 | 의미 |
| type | text | 기본 한 줄로 텍스트를 입력할 때 사용 |
| radio | 라디오 버튼으로 열거된 항목 중 하나만 선택할 때 사용, checked 사용 | |
| checkbox | 체크 박스로 열거된 항목 중 다중 선택할 때 사용 , checked 사용 | |
| password | 입력한 암호를 보안을 위해 대체 문자로 보여줄 때 사용 | |
| hidden | 화면에 보이지 않게 숨겨서 값을 전송할 때 사용 | |
| file | 파일 업로드를 위해 파일을 선택할 때 사용 | |
| button | 버튼을 출력할 때 사용 | |
| submit | 폼에 입력된 값을 한 번에 웹 서버로 전송할 때 사용 | |
| reset | 폼에 입력된 값을 모두 초기화할 때 사용 | |
| name | 텍스트 | 입력 양식을 식별하기 위해 이름을 설정 |
| value | 텍스트 | 입력 양식의 초기값을 설정 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 로그인 화면 </title>
</head>
<body>
Home > Login
<hr>
// action="#" : 자기자신
<form action="#" method="get">
ID : <br>
<input type="text" name="id"><br><br>
// type : 클라이언트에게 보여주는 것
// name : 서버에게 보여주는 것
PASSWORD : <br>
<input type="password" name="passwd"><br><br>
<input type="submit" value=" Login ">
<input type="reset" value=" Cancel ">
</form>
</body>
</html>
select 태그 : 폼 태그 안에서 사용되며 여러 개의 항목이 나타나는 콤보 박스를 만들 때 사용, option 태그로 선택할 값 지정
| 태그 | 속성 | 속성값 | 의미 |
| select | name | 텍스트 | 콤보 박스의 이름을 설정 |
| size | 숫자 | 한 번에 표시할 항목의 개수 설정 | |
| multiple | ctrl키를 눌러 다중 항목 선택할 수 있도록 설정 | ||
| option | value | 텍스트 | 항목의 값을 설정 |
| selected | 여러 항목 중 기본값으로 지정하려는 항목 설정 | ||
| disabled | 해당 항목을 비활성화 상태로 설정 |
<body>
Home > Language
<hr>
<form action="#" method="get">
<fieldset style="width:150px">
<legend> 언어 선택 </legend><p>
// size 설정 시 펼쳐져서 보여짐
// multiple : 다중선택
<select name="language" size=6 multiple>
<option value="choice"> === 선택 === </option>
<option value="korean" selected> 한국어 </option> // 한국어 기본 선택됨
<option value="english"> 영어 </option>
<option value="chinese"> 중국어 </option>
<option value="japanese"> 일본어 </option>
<option value="spanish"> 스페인어 </option>
</select>
</fieldset>
</form>
</body>
optgroup : 콤보 박스의 항목들을 대상으로 그룹화
<optgroup label="본인 국적">
<option value="korean"> 대한민국 </option>
<option value="USA"> 미국 </option>
</optgroup>
textarea 태그 : 여러 줄의 텍스트를 입력할 수 있는 태그, 텍스트 영역에서 사용된 태그와 띄어쓰기 등의 옵션은 모두 그대로 저장됨
<textarea cols="너비값" rows="높이값">
</textarea>
728x90
'뒤끝 (Back-End)' 카테고리의 다른 글
| [JSP] 액션 태그 (0) | 2024.10.18 |
|---|---|
| [JSP] request 내장 객체 (5) | 2024.10.16 |
| [JSP] JSP의 동작 구조 (1) | 2024.10.14 |
| [JSP] 하이퍼 링크 & 테이블 태그 (0) | 2024.10.14 |
| [JSP] 절대 경로와 상대 경로 (1) | 2024.10.09 |
