form 태그
는 사용자가 입력한 데이터를 수집
하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button
등의 입력 양식 태그를 포함
할 수 있다.
<form>
...
form elements (input, checkbox, radio button, submit button...)
...
</form>
GET
과 POST
는 HTTP 프로토콜
을 이용해서 사용자 입력 데이터
를 서버에 전달
하는 방식을 나타내며 HTTP request method
라 한다
GET
전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식
이다.http://jsonplaceholder.typicode.com/posts?userId=1&id=1
‘?’
를 통해 데이터의 시작을 알려주고, key-value
형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 ‘&’
로 구분한다.보안에 문제가 있으며
전송할 수 있는 데이터의 한계가 있다. (최대 255자).REST API
에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청
한다.POST
Request Body에 담아 보내는 방식
이다.http://jsonplaceholder.typicode.com/posts
모두 노출되지 않지만
GET에 비해 속도가 느리다.
REST API
에서 POST 메소드는 특정 리소스의 생성을 요청
한다.<!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 button
이 클릭되면 input 태그에 입력된 데이터
가 form 태그의 method 어트리뷰트
에 지정된 방식
으로 action 어트리뷰트
에 지정된 서버측의 처리 로직에 전달
된다.
input 태그
는 form 태그 중에서 가장 중요한 태그
로 사용자로부터 데이터를 입력받기 위해
사용된다.
input 태그
는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분
된다. form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나
ajax를 사용할 시
에는 form 태그 내에 존재하지 않아도 된다.
서버에 전송되는 데이터
는 name 어트리뷰트
를 키
로, value 어트리뷰트
를 값
으로하여 key=value의 형태로 전송
된다.
<!DOCTYPE html>
<html>
<body>
<h3>button</h3>
<input type="button" value="Click me" onclick="alert('Hello world!')">
<hr>
<h3>checkbox</h3>
<input type="checkbox" name="fruit1" value="apple" checked> 사과<br>
<input type="checkbox" name="fruit2" value="grape"> 포도<br>
<input type="checkbox" name="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="Norway">
hidden filed는 사용자에 표시되지 않는다.
<hr>
<h3>image</h3>
<input type="image" src="img/img_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="googlesearch">
<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="myname">
<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>
복수개의 리스트
에서 복수개의 아이템을 선택
할 때 사용한다. 함께 사용할 수 있는 태그는 다음과 같다.
서버에 전송되는 데이터는 select 요소의 name 어트리뷰트
를 키
로, option 요소의 value 어트리뷰트
를 값
으로하여 key=value
의 형태로 전송된다.
<!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>
textarea 태그는 여러 줄의 글자를 입력
할 때 사용한다.
<!DOCTYPE html>
<html>
<body>
<textarea name="message" rows="10" cols="30">Write something here</textarea>
</body>
</html>
button 태그는 클릭할 수 있는 버튼을 생성한다. <input type="button">
과 유사하지만 input 태그는 빈 태그
인 반면 button 태그는 그렇지 않다. 따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용
할 수 있다.
type 어트리뷰트
는 반드시 지정하는 것이 바람직하며 어트리뷰트값으로 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>
button 태그는 어트리뷰트만을 받아들이는 input 태그와 달리 콘텐츠로 문자열
은 물론 HTML 요소
를 받을 수도 있다는 장점이 있다. 주의할 것은 IE의 경우, submit되는 값이 다를 수 있는 것이다.
<button type="submit" name="myButton" value="foo">Click me</button>
위 예제의 경우, IE6, IE7에는 ‘foo’ 대신 ‘Click me’
를 서버로 전송
한다. 따라서 오래된 IE
를 지원해야 한다면 input 태그를 사용
하는 것이 바람직하다.
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>