1. form
- 사용자가 입력한 데이터를 수집하기 위해 사용
- input, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있음
<form>
...
form elements (input, checkbox, radio button, submit button...)
...
</form>| attribute | 값 | 의미 |
| action | URL | 입력 데이터가 전송될 URL 지정 |
| method | get / post | 입력 데이터 전달 방식 지정 |
GET, POST는 HTTP 프로토콜을 이용하여 사용자 입력 데이터를 서버에 전달하는 방식 (HTTP request method)
*HTTP 프로토콜
- HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다.
- 애플리케이션 레벨의 프로토콜로 TCP/IP(인터넷) 위에서 작동한다.
*애플리케이션 레벨 프로토콜
- 인터넷(일반적으로 TCP/IP 네트워크)은 애플리케이션 계층에 2개의 전송 프로토콜, TCP(Transmission Control Protocol)과 UDP(User Datagram Protocol)을 제공한다. (TCP, UDP는 한 단계 아래 레벨의 전송 계층)
GET
- GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다.
- URL 바로 뒤에 '?'를 통해 데이터의 시작을 알려주며, key=value 형태의 데이터를 추가한다. (1개 이상이라면 '&'로 구분)
- 전송 데이터가 모두 노출되므로 보안에 문제가 있으며, 전송할 수 있는 데이터의 한계가 있다.(최대 255자)
- REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.
*쿼리스트링
- URL 주소 뒤에 입력 데이터를 함께 제공하는 방법 ex) http://jsonplaceholder.typicode.com/posts?userId=1&id=1
그런데 전송할 수 있는 데이터의 한계가 최대 255자인 이유가 궁금하여 더 찾아보았더니, GET 방식의 글자 수 제한은 http 1 버전 시대에서 잘못 내려온 속설(?)이라고 한다.
(http 1은 96년도에 발표되었으며, 현재에서는 http 2.0을 지원하고 있다!)
POST
- POST 방식은 Request Body에 담아 보내는 방식이다.
- URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.
- REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.
*Request Body
- 클라이언트가 전송하는 Http 요청의 Body 내용을 Java Object로 변환시켜주는 역할을 한다.
<!DOCTYPE html>
<html>
<body>
<form action="http://jsonplaceholder.typicode.com/users" method="get">
ID: <input type="text" name="id" value="1"><br>
username: <input type="text" name="username" value="Bret"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Submit 버튼을 클릭하면 input 태그에 입력된 데이터가 form 태그의 method 어트리뷰트 방식으로 action 어트리뷰트에 지정된 서버 측의 처리 로직에 전달된다.
2. input
- form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.
- input 태그는 type 어트리뷰트에 의해 구분된다.
- form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나, ajax를 사용하면 form 태그 내에 존재하지 않아도 된다.
- 서버에 전송되는 데이터는 name 어트리뷰트를 key로, value 어트리뷰트를 값으로 하여 key=value의 형태로 전송된다.
3. select
- 복수개의 리스트에서 복수개의 아이템을 선택할 때 사용한다.
<!DOCTYPE html>
<html>
<body>
<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>
<select name="cars2" 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
- textarea 태그는 여러 줄의 글자를 입력할 때 사용한다.
<!DOCTYPE html>
<html>
<body>
<textarea name="message" rows="10" cols="30">Write something here</textarea>
</body>
</html>
5. button
- 클릭할 수 있는 버튼을 생성한다.
- <input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않다.
- button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
- button 태그는 input 태그와 달리 문자열과 HTML 요소를 받을 수도 있다.
|
type 속성 |
의미 |
|
button |
클릭할 수 있는 기능 |
|
reset |
입력 칸의 데이터를 리셋할 수 있는 기능 |
|
submit |
데이터를 전송할 수 있는 기능 |
<button type="submit" name="myButton" value="foo">Click me</button>위 예제의 경우, IE6, IE7에는 'foo' 대신 'Click me'를 서버로 전송한다.
6. fieldset / legend
- fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다.
- legend 태그는 fieldset 태그 내에서 그룹화된 fieldset의 제목을 정의한다.
<!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>
출처
웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
poiemaweb.com
the-brain-of-sic2.tistory.com/49
[인터넷:원리] 애플리케이션 계층이란?: Application Layer: 네트워크 프로토콜
네트워크 프로토콜 인터넷은 아주 복잡하고 거대한 구조이다. 이 복잡함과 거대함이란 특성 때문에 네트워크 설계자는 인터넷을 계층화하여 설계했다. 이것이 네트워크 프로토콜 계층이다. 왜
the-brain-of-sic2.tistory.com
ysoh.tistory.com/entry/Query-String
쿼리스트링(Query String)
쿼리스트링은 사용자가 웹프로그램으로 입력 데이터를 전달하는 가장 단순하고 또한 널리 사용되는 방법이다. 이 방법은 URL 주소 뒤에 입력 데이터를 함께 제공하는 방법으로 다음과 같은 형식
ysoh.tistory.com
get 방식의 글자 256자 제한은 잘못된 상식
사실 아는 사람들은 알겠지만 get방식의 글자수 제한이 256자 라는것은 거짓말이다. http 1 버전 시대에서 잘못 내려온 일종의 속설이다. (http 1이 96년도 발표이다. 현재 많은 브라우저가 http 2.0을
uiandwe.tistory.com
www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.2.1
HTTP/1.1: Protocol Parameters
part of Hypertext Transfer Protocol -- HTTP/1.1 RFC 2616 Fielding, et al. 3 Protocol Parameters 3.1 HTTP Version HTTP uses a "." numbering scheme to indicate versions of the protocol. The protocol versioning policy is intended to allow the se
www.w3.org
[HTML5]
안녕하세요. 후니입니다! 이번 포스팅에서는 HTML5의 태그에 대해서 알아보겠습니다. 태그와 태그 안에 들어가는 속성(Attribute)들도 많지만 한 개의 버튼을 우선 만들어보고 살펴보겠습니다.
2018-start.tistory.com
'IT > HTML' 카테고리의 다른 글
| 1.10 HTML5 Tag - Structure (0) | 2021.04.08 |
|---|---|
| 1.8 HTML5 Tag - Image & Multimedia (0) | 2021.03.31 |
| 1.7 HTML5 Tag - List & Table (0) | 2021.03.30 |
| 1.6 HTML5 Tag - Link (0) | 2021.03.30 |
| 1.5 HTML5 Tag - Text (0) | 2021.03.29 |