사용자 입력, form 태그에 대해

 

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며,
input, textarea, button 등의 입력 양식 태그를 포함한다.

form 태그의 속성
action 속성 : 입력 데이터가 전송될 url 지정
method 속성 : get / post 입력 데이터 전달 방식 지정

 

GET, POST 는 HTTP 프로토콜을 이용하여 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며,

이를 HTTP request method 라고 한다.

GET

• url에 입력 데이터를 쿼리 스트링으로 보내는 방식
• 전송 url 바로 뒤에 ?를 통해 데이터의 시작을 알려주고 key-value 형태의 데이터를 추가한다.
• 1개 이상 데이터를 전송할 때는 &로 구분한다.
• url에 전송 데이터가 모두 노출되기 때문에 보안상 문제가 있으며 전송할 수 있는 데이터의 한계가 있다 -> 최대 255자
• REST API 에서 GET 메서드는 모든 또는 특정 리소스의 조회를 요청한다.

POST

• request body에 담아 보내는 방식
• url에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.
• REST API에서 POST 메서드는 특정 리소스의 생성을 요청한다.

 

 

input

form 태그 중 가장 중요한 태그로 사용자로부터 데이터를 입력 받기 위해 사용된다.

 

type 속성에 의해 종류가 구분되고

name 속성을 키로

value 속성을 값으로 하여 

key=value (name=value) 형태로 전송된다.

 

type	desc
text	텍스트 입력
button	버튼 생성
checkbox	체크박스 생성
color	컬러 선택 생성
date	년월일 생성
datetime	년월일 시분초 생성
datetime-local	지역 년월일 시분초 생성
email	이메일 입력 생성 -> submit 할 때 자동 검증한다.
file	파일 선택
hidden	감추어진 입력창
image	이미지로된 submit button 생성
month	월 선택
number	숫자 입력
password	패스워드 입력
radio	라디오버튼 입력
reset	초기화 버튼
range	범위 선택
search	검색어 입력
submit	제출 버튼
tel	전화번호 입력
time	시간 선택
url	url 입력
week	주 선택 입력

 

<input type="image" src="img/img_submit.gif" alt="Submit" width="48" height="48">

<input type="number" name="quantity" min="2" max="10" step="2" value="2">

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

<input type="range" name="points" min="0" max="10" step="1" value="5">

input 태그와 button 태그

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<input type="button" value="Click Me!" onclick="alert('Hello world!')">
// 동일한 결과

 

 

select

복수 개의 리스트에서 복수 개의 아이템을 선택할 때 사용

 

select 요소의 name 속성을 키로,

option 요소의 value 속성을 값으로하여

key=value (select.name=option.value) 형태로 전송한다.

 

<select name="cars1">
      <option value="volvo" selected>Volvo</option>
      <option value="saab" disabled>Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
</select>

 

 

textarea

여러 줄의 글자를 입력할 때 사용

<textarea name="message" rows="10" cols="30">Write something here</textarea>

크기는 rows 와 cols 속성의 크기를 지정해서 정한다.

 

 

 

fieldset / legend

fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다.

legend 태그는 fieldset 태그 안에서 사용되어야하며 그룹화된 fieldset 의 제목을 정의한다.

 

<fieldset>
    <legend>Login</legend>
    Username <input type="text" name="username">
    Password <input type="text" name="password">
</fieldset>