03Form 태그 요소_Input

Form 요소

· 사용자에게 데이터를 입력받기 위한 태그

· 서버에 데이터를 전달하기 위한 요소

- action 속성 : 양식을 전달 할 경로

- name 속성 : 양식의 명칭

- method 속성 : 양식 전달 방식 (GET, POST 방식)

GET 방식

1. 노출되는 웹주소로 요청하는 방식

2. 전달하는 데이터로 주소에 노출

3. 검색

POST 방식

1. 전달되는 데이터는 노출되지 않는다.(BODY 저장)

2. 저장, 수정(프로세스 용도)

실습1

전송 경로 : myData.jsp

전송 될 데이터 : 회원명, 회원 나이, 회원 주소, 회원 아이디

<form action="myData.jsp" method="post"> 
			<input type="text" name="userName" value="김문영"/>
			<input type="number" name="userAge"/>
			<input type="text" name="userAddress"/>
			<input type="name" name="userId"/>
			<button type="submit">전송</button>
		</form>

​

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String userName=request.getParameter("userName");
	String userAge=request.getParameter("userAge");
	String userAddress=request.getParameter("userAddress");
	String userId=request.getParameter("userId");
%>
<%=userName%><br/>
<%=userAge%><br/>
<%=userAddress%><br/>
<%=userId%><br/>

 

Form 요소 공통속성

name	서버에 전송될 데이터의 명칭
value	서버에 전송될 데이터
readonly	사용자가 입력 및 선택을 못하게 막는 속성, 서버에 데이터 전달 가능
disabled	사용자가 입력 및 선택을 못하게 막는 속성, 서버에 데이터 전달 불가능

 

Input

-패스워드, 날짜, 숫자, 텍스트, 선택, 다중선택 기능을 가지고 있다.

-각 기능을 type 속성에 값으로 지정 할 수 있다.

-단일 태그

 

Type="text"

-사용자에게 한줄의 텍스트의 데이터를 받을 때 쓰이는 태그

-placeholder : 데이터 입력 받기 전 알림문구

<input type="text" name="userName" placeholder="회원명">
<input type="text" name="userName" value="김문영">
<input type="text" name="userName" value="김문영" readonly>//서버에전달됨
<input type="text" name="userName" value="김문영" disabled>//전송안됨사용자보기용

Type="password"

-사용자에게 암호(비밀번호) 데이터를 받을 때 쓰이는 태그

-placeholder : 데이터 입력 받기 전 알림문구

<input type="password" name="userPw" placehoder="패스워드">

Type="hidden"

-사용자에게 노출이 안됨

-사용자에게 노출은 안되지만 서버에 데이터 전달 용도

<input type="hidden" name="userKey" value="123">

​

Type="radio"

-여러 데이터 중 택 1

-name의 속성값 기준으로 name의 속성값 같은 것 중 1개 선택

-사용자가 입력이 아닌 선택임으로 value 속성에 값은 명시가 되어있어야 한다.

<input type="radio" name="userGender" value="남"> 남
<input type="radio" name="userGender" value="여"> 여
<input type="radio" name="userGender" value="1" readonly> 1
<input type="radio" name="userGender" value="2" disabled> 2 //선택 안됨

checked 속성 : 기본 선택

<input type="radio" name="userGender" value="3" checked> 3

​

Type="Checkbox"

-여러 데이터 중 다중 선택

-사용자가 입력이 아닌 선택임으로 value 속성에 값은 명시가 되어있어야 한다.

-checked 속성 : 기본 선택

-같은 분류여서 name에 값이 "userAddr"로 동일

-다중 선택 된 대상들은 name 속성의 명칭으로 데이터가 그룹핑되어 전달(배열)

<input type="checkbox" name="userAddr" value="전주"> 전주
<input type="checkbox" name="userAddr" value="군산"> 군산
<input type="checkbox" name="userAddr" value="익산"> 익산

 

Type="number"_html5

-사용자에게 숫자만 입력 받을 수 있는 기능

-readonly

disabled

placeholder 적용 가능

<input type="number" name="userName">
<input type="number" name="userName" placeholder="숫자입력">

Type="date"_html5

-사용자에게 날짜를 입력 받을 수 있는 기능

-readonly

disabled

placeholder 적용 가능

<input type="date" name="userDate" placeholder="날짜선택">

​