html form 양식

 

 

<form> : 사용자 입력을 위한 양식 생성

 

- 서버로 값을 전송할 때 사용하는 태그

- 내부 요소들의 각 name 속성으로 값을 전달한다. (AJAX사용시 제외)

- 한 페이지 내에 여러 번 작성해도 상관 없지만 태그안에 태그는 넣지 않는다. (자주하는 실수)

- action 생략시 기본 값은 현재 페이지의 url이 되고, 실제 action 위치는 보통 서버 페이지로 지정한다.

 

 

 

Form 전송 방식

• get (자원 요청. read)

url 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식

- 요청에 길이 제한이 있는데, 브라우저마다 다르다.
- ?name1=value1&name2=value2&...형식으로 정보를 전달하고 이를 queryString이라고 부른다.
- 정보가 노출되는 형태(url+queryString)이므로 보안을 위해 중요한 정보는 다루지 않는다.
- 데이터 요청시에만 사용할 것
- 캐시 가능 : 서버에 리소스 요청시 캐시가 요청을 가로채 리소스의 복사본을 반환
                     HTTP헤더에서 cache-control헤더를 통해 캐시 옵션 지정
- 브라우저 히스토리에 남으며 북마크 될 수 있다

 

 

• post (자원 생성. create)

- 길이 제한이 없어 용량이 큰 데이터를 보낼 때 사용한다.
- 주소 표시줄에 값이 표시되지 않고, HTTP메시지 body부분에 담아 서버로 보내므로
  데이터가 외부적으로 드러나지 않아 상대적으로 get방식보다 보안상 유리하다.
   * 하지만 암호화하지 않은 경우 body에서 데이터 확인이 가능하므로 완벽한 보안은 아님
- 리소스 생성이나 업데이트를 위해 데이터를 보낼 때 사용된다.
   * body type은 Content-type 헤더정보에 따라 결정한다. (body에 담겨 보내지는 내용이 어떤 타입인지 명시 필요)

 

 

 

---

 

 

<input> : 입력 태그

 

 

속성

type (input 타입. 기본 타입은 text)

name (서버로 전달될때 항목 이름)

value (기본값 지정)

readonly(읽기전용)

disabled(입력 필드 비활성화)

size (기본보다 작게 혹은 크게 표현하고싶을때)

maxlength (입력되는 값의 글자수)

placeholder(간단한 설명 또는 샘플 값 표기)

autocomplete(자동입력 완성)

autofocus(페이지 로드될때 자동으로 포커스 받도록)

checked(입력필드가 체크된 상태. 체크박스, 라디오 버튼형식에서 사용)

required(필수 입력 항목. submit 수행시 체크함)

 

 

---

 

 

	<form action="요청보낼 서버 페이지" method="get">
		입력필드  <input type="text">  <br>
		비밀번호필드  <input type="password"> <br>
		체크박스  <input type="checkbox"> <br>
		라디오버튼  <input type="radio"> <br>
		첨부파일선택기  <input type="file"> <br>
		날짜선택기  <input type="date"> 
	</form>

 

 

 

---

 

 

	<form action="요청보낼 서버 페이지" method="get">
		이름  <input value="홍길동"> <br>
		별명  <input>	
		<input type="button" value="버튼">
		<input type="submit" >
        <input type="reset">
	</form>

 

 

 

 

 

submit은 action으로 지정해둔 페이지로 이동

 

 

제출 버튼 눌렀을때 화면

 

링크보면 ?로 끝남 -> get방식으로 값 보내기 (보내려면 name 속성이 있어야함)

 

 

 

 

reset은 값을 초기화함

홍길동 바보라고 써도 초기화버튼 누르면 홍길동(기본값)으로 다시 돌아감

 

 

 

---

 

    여자<input type="radio" name="gender" value="female" checked>
    남자<input type="radio" name="gender" value="male">

name 값이 동일하면 둘 중 하나만 선택 가능

 

 

    여자<input type="radio" name="gender1" value="female">
    남자<input type="radio" name="gender2" value="male">

name 값이 다르면 둘 다 선택 가능

 

 

---

 

 

 

	<form action="test.jsp" method="get">
		이름  <input value="홍길동" name="erum"> <br>
		별명  <input name="alias">			
		<input type="button" value="버튼">
		<input type="submit" >
		<input type="reset">
	</form>

 

action을 통해서 test.jsp 파일 페이지로 이동시킴

 

 

get방식으로 요청이 전달될 때 queryString의 형태로 전달
url?name으로 설정한 정보 = 입력양식에 입력된 값

 

 

 

---

 

< test.jsp >

    <%
        String name = request.getParameter("erum"); //홍길동
        String alias = request.getParameter("alias"); //별명	
    %>

    나의 이름은 <%= name %> <br>
    나의 별명은 <%= alias %>

 

<% 안에 자바 코드 %>

<%= 표현식 영역 %>

 

 

 

 

값 입력하고 제출 버튼 누르면

 

 

 

 

url에도 입력한 데이터값이 전달된 것을 확인할 수 있음

 

---

 

<form>내부에서는 전송 기능을 갖고있음

그래서 button을 클릭하면 페이지 이동이 있지만

 

 

	<form action="test.jsp" method="get">
		이름  <input value="홍길동" name="erum"> <br>
		별명  <input name="alias">
		<button type="button"> form안쪽 </button>
	</form>

 

 

type="button"일때는 아무 기능 없음 (이벤트를 위해서 onclick이용해서 메소드 만들어줘야함)