HTML form 태그

  Form Tag

▶ form tag

데이터를 전송하기 위한 태그

1) form 태그의 속성에 method,action을 설정하여 전송방식 및 전송경로를 지정해야 한다.

2) form 태그의 자식 요소에 input, select, textarea 등 데이터 입력 태그를 두고 submit을 실행하면 데이터가 전 송이 된다.

3) method 속성의 값은 post와 get으로 설정이 가능하며, post 방식은 데이터를 body에 숨겨 전송, get방식은 url로 전송을 한다.

4) action 속성의 값은 전송될 경로를 입력한다.

 

▶ form tag 종류

1. input

텍스트 등록 태그 (type 속성에 text, raido, checkbox 설정가능)

1) text, password

<input type="text" name="memberName" placeholder="아이디 입력"/>
<input type="password" name="memberName" placeholder="비밀번호입력"/>

input type="text"와 달리 input type="password"는 입력한 문자를 보이지 않게 해줌.

placeholder : 입력하기 전까지 옅은색 텍스트가 보여지지만, 입력하면 사라짐.

 

2) radio, checkbox

- radio

남 : 여 :

남 : <input type="radio" name="Gender" value="남"/>
여 : <input type="radio" name="Gender" value="여"/>

name의 값이 같다면, 그 값중 하나만 선택 가능하며, 선택시 value의 값이 전송된다.

 

- checkbox

1 2 3

<input type="checkbox" name="check" value="1"/> 1
<input type="checkbox" name="check" value="2"/> 2
<input type="checkbox" name="check" value="3"/> 3

선택값을 중복으로 선택 가능하며, 선택시 value의 값이 전송된다.

 

3) number,date

- number

나이 :

나이 : <input type="number" name="Age"/>

숫자만 입력 가능하며 버튼으로 숫자를 조절할수 있음.

 

- date

날짜 :

날짜 : <input type="date" name="Date"/>

날짜만 선택입력 가능함.

 

2. select

데이터 선택 태그

:: 선택 :: 벼니 채니

<select name="select">
    <option value="">:: 선택 ::</option>
    <option value="벼니">벼니</option>
    <option value="채니">채니</option>
</select>

나열된 옵션 중 선택함. 선택된 값의 value값이 전송됨.

 

3. textarea

장문의 텍스트 등록 태그

본문입력 :

본문입력 : <textarea name="content" style="width:300px;height:300px;"></textarea>

장문의 텍스트를 입력가능한 태그

 

4. button

이벤트 실행 및 submit

<button type="submit">전송</button>

button 클릭시 이벤트 실행. (form action 실행) - "./gdtData.jsp"파일 실행.

 

▶ form tag 속성

1) input 속성

 - type : input의 형태 지정

( text - 일반적인 텍스트 입력, radio - 같은 name 값 중 1개만 선택, checkbox - 같은 name값 중 다중 선택, password )

 - name : 서버에 전송될 key의 명칭

 - value : 서버에 name의 key값으로 전송될 값

 - placeholder : 안내글 (입력시 텍스트 사라짐)

 

2) button 속성

 - type : 이벤트 형태 지정(button - 이벤트 동작 시, submit - 데이터 전송 시

 

▶request 객체

request 객체에는 요청에 해당되는 정보를 담고 있다.

request의 getParameter라는 메소드를 활용하여 데이터를 받을 수 있다.

getParameter의 메소드의 인수값을 전송된 key의명으로 넣어 해당 key의 값을 받을 수 있다.