폼(form)
- 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식
- 사용자와 웹 애플리케이션이 상호 작용하느 중요한 기술
폼을 구성하는 일부분의 태그
form : 폼을 정의하는 태그 최상위 태그임
select : 항목을 선택할 수 있는 태그
input : 사용자가 입력할 수 있는 태그
textarea : 여러 줄을 입력할 수 있는 태그
method
Get 방식 : 데이터가 외부에 노출되어 보안 취약 전송량 8k
Post 방식 : 개인정보 등을 보호해야 할 때는 post방식 사용 전송량 2g
ex)
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원가입</h3>
<form action="#" name="member" method="post">
<!-- action을로 데이터를 받아 처리하는 웹페이지 URL 설정 -->
<!-- name으로 식별하기위한 이름 설정 -->
<!-- method로 데이터가 전송되는 HTTP 방식 설정 -->
<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복검사">
<p> 비밀번호 : <input type="password" name="passwd">
<p> 이름 : <input type="text" maxlength ="10" size = "10" name="name">
<p> 연락처 : <input type="text" maxlength="4" size="4" name="phone1">
<!-- maxlength로 최대 입력 글자 수 설정 size로 양식의 너비를 설정 -->
- <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> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>
select 태그
- 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그
- optgroup 태그로 항목을 그룹으로 만들 수 있음( <optgroup label ="서울특별시"> )
ex)
<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">
textarea 태그
- 여러 줄의 텍스트를 입력할 수 있는 태그
- 너비와 높이를 지정하기 위해 cols 와 rows 속성을 설정
쉽게 배우는 JSP 웹 프로그래밍
송미영 지음 한빛 아카데미