<form></form>태그

form

 - 문서 양식을 전송하기 위하여 쓰이는 태그
 - 사용자에게 데이터를 입력받고 서버에 데이터를 전달하기 위해 쓰인다.
 - form tag로 form 요소를 그룹핑하여 서버에 전달한다.
 - form 하위 요소에는 input, select, textarea 등이 있다.

*form

 -속성
  action   : 데이터를 전송시킬 경로를 기입(상대경로, 절대경로)
  method : post(눈에 보이지 않는 데이터를 전송), get(주소에 데이터를 기입하여 전송)

 

  form 요소 공통 속성
- readonly : 입력 혹은 선택은 불가능하나, 데이터는 서버에 전송 가능
- disabled : 입력 혹은 선택도 불가능하며, 데이터도 서버에 전송 불가
- name : 서버에 전송될 데이터의 명
- value : 서버에 전송될 데이터명의 값
* name과 value는 한쌍 -> key와 value

 

<form action="send.jsp" method="post">
	<input type="text" name = "userName">
	<button type="submit">전송</button>
</form>

input

 - 단일 태그로 닫기 태그가 없다
 - 사용자에게 단문 데이터 혹은 체크하는 형태로 데이터 받을 경우 사용한다
 - type이라는 속성의 값으로 사용 용도를 바꿀 수 있다
  (텍스트, 패스워드, 이메일, 숫자, 날짜, 선택, 다중선택 등등)

<input type = "text" name = "userName1" placeholder="사용자명"><br>
<input type = "text" name = "userName1" value = "홍길동"><br>
<input type = "text" name = "userName1" value = "홍길동" readonly><br>
<input type = "text" name = "userName1" value = "홍길동" disabled><br>

 

label

 - form 요소와 1:1 매칭
 - form 요소의 명칭을 표현할 때 
 - label의 속성 for와 form요소의 id와 동일한 값을 기입하여 연결(맵핑)
 - 모든 html요소의 속성 id값은 유일한값을 가져야한다.

 

<form action = "loginProcess.jsp" method = "post">
	<label>
		<input type = "text" name = "userId" placeholder="아이디">
	</label>
	<br>
	<label>
		<input type = "password" name = "userPw" placeholder="비밀번호">
	</label>
	<br>
	<button type="submit">전송</button>
</form>

type = "checkbox"

- 다수 중 다중선택 가능하게 도와주는 태그
- checked 속성 : 강제 체크
- 사용자가 값을 입력을 하는 타입이 아님으로 value 속성값은 있어야한다

<label>
	전주 <input type = "checkbox" name = "userGender" value = "전주" checked>
</label>
<label>
	국산 <input type = "checkbox" name = "userGender" value = "국산">
</label>
<label>
	익산 <input type = "checkbox" name = "userGender" value = "익산">
</label>

 

select

- 다수 중 1개 택일
- 선택시 목록을 볼 수 있다
- select와 option 태그로 이뤄어져 있다
- select 에 name 속성
- option 에 value 속성
- option 에 selected 속성을 부여 할 경우 선택을 활성화
- select 에 multiple 속성 존재시 다중 선택 가능

 

<select name = "choiceType">
	<option value = ""> :: 선택 :: </option>
	<option value = "a">a</option>
	<option value = "b" selected>b</option>
	<option value = "c">c</option>
</select>

 

textarea
- 사용자에게 장문의 데이터를 받아야 할 때 사용
- value 속성은 없다 -> 태그와 태그 사이의 문자열이 value이다
- 태그와 태그사이에 입력된 공백 및 개행 등을 인식한다

 

<textarea name = "userContents1"></textarea>