[SIST] Web_HTML_days05/06_form(양식) 태그와 jsp 맛보기+select, textarea, input 태그

1. form 태그와 jsp 처리 맛보기

- 사용자 입력 처리를 하기 위해 사용하는 태그들..(사용자 입력 처리 -> 서버 전송 처리)

  자바서버페이지 서버 처리 -> 응답

   ㄴ java server page == jsp

 

 

<결과>

 

<jsp 코딩>

 

<결과>

 

---

2. form 태그

1) form 태그는 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 한다.

 

2) 단순히 텍스트 내용만 보여주는 페이지말고 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 태그 요소이다.

 

3) action 속성은 폼을 전송할 서버 쪽 스크립트 파일을 지정한다. 즉, form 태그에서 작성된 데이터를 어떤 jsp 파일로 정할지 action 속성에 값을 지정해준다.

 

4) name 속성은 form 태그를 식별하기 위한 이름을 지정하는 속성이다.

 

5) method 속성은 form을 서버에 전송할 http 메소드를 정하는 속성으로 2가지가 있다.

(1) get

      파일명.jsp?이름=값&name속성값=값

  - 위의 값처럼 url에 key와 value가 보여지는 방식을 get 방식이라한다.

  - url의 길이 제한이 있기 때문에(2048자) 전송하는데 제한적이고

  - url에 딸려서 데이터를 가져가기 때문에 보안에 취약하다.

  - method 속성의 기본 값이다.

 

(2) post

- http 내부에서 전송하기 때문에 보안에 안정적이다.

- 보내고자 하는 값의 길이 제한이 없다.

- 파일을 서버에 전송하는 것은 업로드, 가져오는 것은 다운로드라고 하며, 이러한 작업을 할 때 post 방식을 반드시 사용한다.

 

6) 1개의 html 파일에 여러 개의 form 태그가 있어도 상관없다.

 

7) 해당하는 form에 대해서만 서버에 전송된다.

 

8) action 속성값이 생략되어지면 자기 자신의 url을 호출한다  ***

---

3. input 태그

- 입력용 태그

 

- type 속성

* 예제 코드 및 결과는 github의 3번 참고

https://github.com/Yelin-park/TIL/blob/main/HTML/HTML.md

GitHub - Yelin-park/TIL

---

4. select 태그

- 여러 개의 항목 중에 하나를 선택할 때 select 태그 사용

 

- select 태그 안에 option 태그를 사용하여 value를 설정

 

- multiple 속성은 여러 개를 선택할 때 사용(다중 선택)

 

- 내가 선택한 갯수만큼 url에 key와 value가 나온다.

ex) cars=BMW&cars=VOLVO

 

- option의 value 속성 값을 설정하지 않으면 text 값으로 자동 설정된다.

 

- selected="selected" 속성을 주면 디폴트 값으로 설정되어진다.

 

 

<코드>

 

<결과>

---

5. textarea 태그

- 여러 라인의 메시지를 입력 받고 싶을 때 textarea 태그 사용

 

- textarea 태그는 value 속성이 없다. (value 속성은 input 태그만 있는 속성)

 

<코드>

 

<결과>

 

jsp 코딩에서 \r\n 개행하는 코드를 <br>로 바꿔야 필드에 엔터쳐서 입력한 값이 원하는 대로 잘 나올 수 있다. jsp는 맛보기 하는 중이라 jsp 수업 때 상세히 배우면 다시 정리하도록 하겠다.

---

6. datalist 태그

- input 태그와 함께 사용되어지며, 사용자가 입력할 값을 추천해줄 때 사용한다.

 

- datalist 태그는 option 이라는 자식 태그를 1개 이상 가져야 한다.

 

<코드>

 <input list="deptlist">        => datalist의 id 값을 참조하겠다.
 <datalist id="deptlist">

<form action="">
 * name : <input type="text" autofocus="autofocus">
 <br>
 * title : <input type="text" autofocus="autofocus" required="required">
 <br>
 <input list="deptlist"> <!-- datalist의 id 값을 참조하겠다. -->
 <datalist id="deptlist"> <!-- datalist는 option 이라는 자식 태그를 1개 이상 가져야 한다. -->
 	 <option value="ACCOUNTING"></option>
	 <option value="RESEARCH"></option>
	 <option value="SALES"></option>
	 <option value="OPERATIONS"></option>
 </datalist>
 <!-- submit 기능이 있음 -->
 <input type="image" src="../images/img_submit.gif" width="48" height="48">

 

<결과>