<form>태그
<form> 태그는 입력된 데이터를 서버에 전송해 주는 역할을 한다.
<form>을 통해 사용자로부터 입력받은 값들은 submit이벤트가 발생되면
정의된 방식(method)으로 목적지(action)에 전송된다.
주로 로그인, 회원가입, 게시판 작성 등을 만들때 사용된다.
<form> 태그 속성
폼 태그는 입력양식 전체를 묶어주는 태그이다.
전체적인 폼데이터에 대한 속성을 지정할 수 있다.
- action ="" 데이터를 보낼 서버 페이지 주소, 유효한 url이여야 form이 동작한다.
- method ="get | post" 데이터 전송 방식
- get (기본값): URL에 폼데이터를 추가하여 전달.
256~4096 byte까지만 전송 가능(보통 쿼리 문자열(query string)에 포함되기 때문)
브라우저에 의해 캐시되어 저장. (보안상 취약)
- post : 폼 테이터를 별도로 첨부하여 전달.
입력내용 길이에 제한 X
캐시되지 않아 브라우저 기록에 남지 않음(GET방식보다 보안 높음)
- enctype ="" 인코딩 타입. method="post" 일 경우 인코딩 방식을 지정해주어야 한다.
- application/x-www-form-urlencoded (기본값) : 데이터를 서버로 보낼 때 모든 문자를 인코딩함 명시
- multipart/form-data : 모든 문자를 인코딩 하지 않음. 파일이나 이미지 전송 시 사용(<input>의 type 속성이 file)
- text/plain : 공백 문자만 "+"로 변환하고 나머지는 인코딩 하지 않음
- name="" form의 이름. 한 페이지에서 유일한 이름이여야 한다.
- target="" 전송 후 응답을 어떻게 받을 것인지.(기본값 _self)-현재 브라우징 컨텍스트
- autocomplete="on | off" 자동완성 여부 (기본값 on)
- novalidate (기본값 false) 속성으로 명시할 경우 유효성 검사를 하지 않음(데이터 유효성에 맞지 않아도 제출됨)
form의 하위 태그들
- <fiedset>태그
form 안에서 구역을 나누는 역할
구역 구분 시,
<legend>해당 구역의 이름</legend> -> 필수로 필요
- <input>태그
사용자가 정보를 입력하는 부분
type속성에 따라 다양한 데이터 형태를 지정할 수 있음
- type="text(기본값) | email | password | checkbox | date | radio 등등..."
- placeholder="" 입력 전에 보여지는 입력값에 대한 정보
- required 명시하면 반드시 채워져야하는 필수 입력값이 된다.
- 등등..
- <label>태그
input 태그의 이름 명시
<input>의 id값과 <label>의 for속성이 같게 연결되어야 함 웹접근성 측면에서도 필요.
** eslint를 적용한 react 앱에서는 두 태그가 연결되어야 할 뿐만 아니라 <label>이 <input>태그를 감싸고 있어야 오류가 나지 않는다.
- <button>태그
폼테이터를 전송할 수 있는 버튼.
- type="submit" 이 기본 값이다. 누름과 동시에 데이터가 제출되면서 페이지가 새로고침된다.
때문에 form 제출용이 아닌 단순 버튼의 역할을 하려면 type="button" 을 기재해야 한다.
** <input type="submit" value="버튼" /> 도 제출버튼의 역할을 하고 있지만 <button>태그의 사용이 권장된다.
이제 완전히 이해됐다 ! https://sunnyscript.tistory.com/48 (<button>에 type="button"을 쓰는 이유)