Form 태그
-
사용자가 입력한 데이터를 수집하기 위해 사용하는 입력 양식
-> 사용자와 커뮤니케이션 -
input,select,textarea,button,checkbox,radio button,submit button등의 입력 양식 태그를 포함할 수 있다.
<form name ="" action="" method="">
...
form elements (input, checkbox, radio button, submit button...)
...
</form>-
action: 입력 데이터가 전송될 URL -
method: 입력 데이터 전달 방식 (GET / POST) -
입력된 데이터는
method의 방식으로action에 지정된 서버측으로 전달된다.
input
-
데이터를 입력받는 태그 → empty element
-
<form>태그 안에 있어야 데이터 전송이 가능하다.ajax를 사용할 때는 form 태그 안에 없어도 된다.
-
name값이 key,value값이 valuekey=value 형태로 전송된다.
-
type값에 따라 다양한 종류가 있다.button: 버튼checkbox: 다수를 선택할 수 있는 컴포넌트radio: 한개만 선택할 수 있는 컴포넌트text: 일반 문자password: 비밀번호submit: 양식 제출용 버튼reset: 양식 초기화용 버튼file: 파일 업로드hidden: 사용자에게 보이지 않는 숨은 요소
# 버튼
<input type="button" value="Click me" onclick="alert('Hello world!')">
# 체크박스
<input type="checkbox" name="fruit1" value="apple" checked> 사과<br>
# radio (한가지만 선택)
<input type="radio" name="gender" value="male" checked> 남자<br>
<input type="radio" name="gender" value="female"> 여자<br>
select
-
드롭다운 리스트를 만드는 태그
-
select태그 : select form 생성 -
option태그 : option 생성 -
optgroup태그 : option 그룹화 -
전송시
select태그 name의 속성값이 key가 되고option태그 value의 속성값이 value가 되어→ key=value 형태로 전송된다.
<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>
# 2개 그룹으로 나뉜 드롭다운 리스트가 생성되며 German Cars는 선택 불가 상태
textarea
- 여러 줄의 글자를 입력 할 수 있는 폼을 만든다.
<textarea name="message" rows="10" cols="30">Write something here</textarea>button
-
<input type="button">과 유사하지만 클로징 태그가 있다.→ HTML 요소를 받을 수 있다는 장점이 있다.
→ 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
<button type="button" onclick="alert('Hello World!')">Click Me!</button>fieldset / legend
-
관련된 입력 양식들을 그룹화 할 때 사용한다.
-
fieldset태그 안에legend태그를 사용한다. (그룹화된 fieldset의 제목)
<fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
</fieldset>
HTTP request method
- HTTP 프로토콜을 이용해 사용자 입력 데이터를 서버에 전달하는 방식
GET
-
GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다.
-
전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가한다.
- 1개 이상의 전송 데이터는 ‘&’로 구분한다.
-
URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며
- 전송할 수 있는 데이터의 한계가 있다. (최대 255자).
-
REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.
POST
-
POST 방식은 Request Body에 담아 보내는 방식이다.
-
URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.
-
REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.
GET과 POST에 대해선 추가적으로 더 공부해보자
