1. form
-
사용자가 입력한 데이터를 수집하기 위해 사용
-
input, textarea, button, select, checkbox 등의 입력 양식 태그와 함께 사용
-
submit => input 태그에 입력된 데이터가 form 태그의 method 어트리뷰트 지정된 방식으로 action 어트리뷰트에 지정된 서버 측의 처리 로직에 전달됨
attribute Value Description action URL 입력 데이터가 전송될 URL 지정 method get / post 입력 데이터 전달 방식 지정 -
GET
- 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식
- 전송 URL 바로 뒤에 '?'로 데이터의 시작 명시, key-value 형태로 데이터 추가, 1개 이상의 전송 데이터는 '&'으로 구분
- 보안 위험성, 전송 가능 데이터 한계(최대 255자) 존재
- REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청
-
POST
- Request Body에 담아 보내는 방식
- URL에 전송 데이터가 모두 노출 X, GET에 비해 느린 속도
- REST API에서 POST 메소드는 특정 리소스의 생성을 요청
2. input
- 사용자로부터 데이터를 입력받기 위해 사용
- type 어트리뷰트로 다양한 종류 구분
- form 태그 내에 존재해야 데이터 보낼 수 있으나 (ajax 요청 시 예외)
- key(name)=value(value) 형태로 전송
3. select
- 복수개의 리스트에서 복수개의 아이템을 선택할 때 사용
- key(select-name)=value(option-value) 형태로 전송
|tag|Description|
|--|--|
|select|select form 생성|
|option|option 생성|
|optgroup|option을 그룹화|
4. textarea
- 여러 줄의 글자를 입력할 때 사용
- key(name)=value(value) 형태로 전송
5. button
- 클릭할 수 있는 버튼을 생성
<input type="button">과 유사하지만 빈 태그인 input 태그와 달리 button 태그는 텍스트나 이미지와 같은 컨텐츠 사용 가능- type 어트리뷰트(button, submit, reset)은 반드시 지정하는 것이 바람직
- 어트리뷰트만 받을 수 있는 input 태그와 달리 콘텐츠로 문자열, HTML 요소를 받을 수 있음
6. fieldset / legend
- 관련된 입력 양식들을 그룹화할 때 사용
- fieldset 태그 내에서 사용되는 legend 태그는 그룹화된 fieldset의 제목을 정의
👨🏫 참고
TIL & Project Retrospective