1. Form tag
- 사용자가 입력한 데이터를 수집하기 위해 사용됨
- input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함함
Form tag attribute
| attribute | value | description |
|---|---|---|
| action | URL | 입력 데이터(form data)가 전송될 URL 지정 |
| method | get/post | 입력 데이터(form data) 전달 방식 지정 |
GET / POST
- HTTP 프로토콜을 이용하여 사용자 입력 데이터를 서버에 전달하는 방식
- HTTP request method
HTTP (Hyper Text Transfer Protocol)
- W3 (World Wide Web) 상에서 정보를 주고받을 수 있는 프로토콜
- 주로 HTML 문서를 주고 받는데 사용함
- 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜
GET
- 전송 URL을 쿼리스트링으로 보내는 방식
예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1 - 전송 URL 바로 뒤에 "?" 붙이고 Key-Value 형태의 데이터를 추가함
- 1개 이상의 전송 데이터는 "&"로 구분함
- URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있음
- 전송할 수 있는 데이터의 한계가 있음 (255자)
- REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청함
POST
- Request Body에 담아 보내는 방식
예) http://jsonplaceholder.typicode.com/posts - URL에 전송 데이터가 모두 노출되지 않음
- GET에 비해 속도가 느림
- REST API에서 POST 메소드는 특정 리소스의 생성을 요청함
<!DOCTYPE html>
<html>
<body>
<form action="jsonplaceholder.typicode.com/users" method="get">
ID: <input type="text" name="id" value="1"><br>
username: <input type="text" name="username" value="Sora"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>-submit button 클릭 -> input tag에 입력된 데이터가 form tag의 method attribute가 지정한 방식으로
action attribute에 지정된 서버측의 처리 로직에 전달됨
2. Input
- form tag 중 가장 중요한 태그
- 사용자로부터 데이터를 입력받기 위해 사용됨
- type attribute에 따라 구분됨
- form tag 내에 존재해야 입력 데이터를 전송할 수 있음
- ajax를 사용한다면 form tag 내에 존재하지 않아도 됨 - 서버에 전송되는 데이터는 name attribute를 key로 value attribute를 value로 하여 key-value 형태로 전송됨
| Type attribute | Description | HTML5 추가 | IE | FF | CR | SF | OP |
|---|---|---|---|---|---|---|---|
| button | 버튼 생성 | O | O | O | O | O | |
| checkbox | checkbox 생성 | O | O | O | O | O | |
| color | 컬러 선택 생성 | O | X | O | O | X | O |
| date | date control(년월일) 생성 | O | X | X | O | O | O |
| datetime | date & time control(년월일시분초) 생성 | O | X | X | X | X | X |
| datetime-local | 지역 date & time control(년월일시분초) 생성 | O | X | X | O | O | O |
| 이메일 입력 form 생성, submit시 자동검증 | O | O | O | O | X | O | |
| file | 파일 선택 form 생성 | O | O | O | O | O | |
| hidden | 감추어진 입력 form 생성 | O | O | O | O | O | |
| image | 이미지로 된 submit button 생성 | O | O | O | O | O | |
| month | 월 선택 form 생성 | O | X | X | O | O | O |
| number | 숫자 입력 form 생성 | O | O | O | O | O | O |
| password | password 입력 form 생성 | O | O | O | O | O | |
| radio | radio button 생성 | O | O | O | O | O | |
| range | 범위 선택 form 생성 | O | O | O | O | O | O |
| reset | 초기화 button 생성 | O | O | O | O | O | |
| search | 검색어 입력 form 생성 | O | X | X | O | O | X |
| submit | 제출 button 생성 | O | O | O | O | O | |
| tel | 전화번호 입력 form 생성 | O | X | X | X | X | X |
| text | 텍스트 입력 form 생성 | O | O | O | O | O | |
| time | 시간 선택 form 생성 | O | X | X | O | O | O |
| url | url 입력 form 생성 | O | O | O | O | X | O |
| week | 주 선택 입력 form 생성 | O | X | X | O | O | O |
<!DOCTYPE html>
<html>
<body>
<h3>button</h3>
<input type="button" value="Click me" onclick="alert('Hello World')">
<hr>
<h3>checkbox</h3>
<input type="checkbox" value="fruit1" value="apple" checked> 사과<br>
<input type="checkbox" value="fruit2" value="grape"> 표도<br>
<input type="checkbox" value="fruit3" value="peach"> 복숭아<br>
<hr>
<h3>color</h3>
<input type="color" name="mycolor">
<hr>
<h3>date</h3>
<input type="date" name="birthday">
<hr>
<h3>datetime</h3>
<input type="datetime" name="birthdaytime">
<hr>
<h3>datetime-local</h3>
<input type="datetime-local" name="birthdaytime">
<hr>
<h3>email</h3>
<input type="email" name="useremail">
<hr>
<h3>file</h3>
<input type="file" name="myfile">
<hr>
<h3>hidden</h3>
<input type="hidden" name="country" value="Korea">
Hidden filed는 사용자에게는 보이지 않는다.
<hr>
<h3>image</h3>
<input type="image" src="image/image_submit.gif" alt="Submit" width="48" height="48">
<hr>
<h3>month</h3>
<input type="month" name="birthdaymonth">
<hr>
<h3>number</h3>
<input type="number" name="quantity" min="2" max="10" step="2" value="2">
<hr>
<h3>password</h3>
<input type="password" name="pwd">
<hr>
<h3>radio</h3>
<input type="radio" name="gender" value="male" checked> 남자<br>
<input type="radio" name="gender" value="female"> 여자<br>
<hr>
<h3>range</h3>
<input type="range" name="points" min="0" max="10" step="1" value="5">
<hr>
<h3>reset</h3>
<input type="reset">
<hr>
<h3>search</h3>
<input type="search" name="goolgesearch">
<hr>
<h3>submit</h3>
<input type="submit" value="Submit">
<hr>
<h3>tel</h3>
<input type="tel" name="mytel">
<hr>
<h3>text</h3>
<input type="text" name="mytext">
<hr>
<h3>time</h3>
<input type="time" name="mytime">
<hr>
<h3>url</h3>
<input type="url" name="myurl">
<hr>
<h3>week</h3>
<input type="week" name="week_year">
</body>
</html>3. select
- 다수의 리스트에서 다수의 아이템을 선택할 때 사용
- 서버에 전송되는 데이터는 select tag의 name attribute를 key로, option tag의 value attribute를 value로 하여 key-value 형태로 전송됨
- slect tag : select form 생성
- option tag : option 생성
- optgroup : option을 그룹화함
<!DOCTYPE html>
<html>
<body>
<select name="car1">
<option value="volvo" selected>Volvo</option>
<option value="saab" disabled>Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="car2" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi" selected>Audi</option>
</select>
<select name="cars3">
<optgroup label="Swedish Cars">
<option value="Volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>4. textarea
- 여러줄의 글자를 입력할 때 사용
<!DOCTYPE html>
<html>
<body>
<textarea name="message" rows="10" cols="30">Write something here</textarea>
</body>
</html>5. button
- 클릭할 수 있는 버튼을 생성
- input tag의 button attribute는 빈 태그인 반면, button tag는 텍스트나 이미지 같은 컨텐츠를 사용할 수 있음
- type attribute(button, reset, submit)는 반드시 지정하는 것이 좋음
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World')">Click me!</button>
<input type="button" value="Click me!" onclick="alert('Hello World')">
</body>
</html>6. fieldset / legend
- fieldset tag : 관련된 입력 양식들을 그룹화할 때 사용
- legend tag : fieldset tag 내에서만 사용해야함, 그룹화된 fieldset tag의 제목을 정의
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
</fieldset>
</body>
</html>