[TIL] HTML form태그 정리

form태그를 왜 사용하고 action이랑 onSubmit을 사용하는 이유는 모르고 그냥 사용했다면 이번 기회로 이런 상황에 쓰는거 및 form태그의 자식태그들을 정리합니다.

action

form 데이터를 처리할 프로그램의 URI를 지정한다.

URI는 하나의 리소스를 가리키는 문자열이다.

action에 웹 문서 링크를 문자열 형태로 작성한 다음 form의 데이터를 전송하게 되면, 브라우저의 루트가 해당 웹문서로 이동하는 것을 확인할 수 있다.

action에 서버사이드 언어인 php라던지 jsp로 작성한 문서를 지정하여 데이터를 처리하도록 하는 것도 가능하다.

onSubmit

양식 제출 이벤트가 발생할 때의 동작을 지정한다.

form 태그 내부에서 input type='submit'로 인해 발생하는 이벤트를 처리할 수 있다.

이벤트 발생과 action에 지정된 URL이 적용되는 그 사이의 시점에 처리할 동작을 이 onSubmit 속성을 통해 지정할 수 있는 것이다.

일반적으로 자바스크립트 함수를 지정하여 처리하는 경우가 많다.

연결된 함수에서 true를 반환하면 form이 전송되고, false를 반환한다면 form이 전송되지 않는다.

false가 반환되면 이벤트 처리를 그대로 강제 종료 시키기 때문에 action이 처리되는 일은 일어나지 않는다.

submit이 되지 않도록 막아두는 방법으로는 onSubmit='return false' 이다.

action과 onSubmit 사용 예

<form action='#' onSubmit='return test()'>
  <input type='submit' value='submit'/>
</form>

form태그 안에 있는 input태그을 클릭하면, action이 처리되기에 앞서 submit 이벤트에 대한 처리가 시작되 submit 이벤트 발생에 대하여 test() 함수가 동작한다.(처리를 반환한다)

onSubmit이 처리되면 그다음 action이 역할을 하게 되며, action에는 '#'이 지정되어 있어 별 다른 의미가 없지만 지정을 한거라 #로의 이동이 일어는난다.

form태그 자체에 가질 수 있는 속성

	내용
name	form의 이름을 적는다. (text)
autocomplete	자동완성 기능 사용여부를 지정한다. (on, off)
novalidate	제출 시 입력된 값의 유효성을 검사하지 않도록 지정한다. (novalidate)
action	form 제출 시 데이터를 어디로 보낼지 적는다. (URL)
method	데이터를 보낼 때 사용할 HTTP 메서드를 지정한다. (get, post)
charset	form 제출 시 사용할 문자 인코딩을 지정한다. (character_set)
enctype	POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정한다. (application/x-www-form-urlencoded, multipart/form-data, text/plain)
target	form 제출 후 받은 응답을 어디에 표시할지 키워드를 적는다. (_blank, _self, _parent, _top)
rel	현재 문서와 연결된 리소스 간의 관계를 적는다. (external, help, license, nofollow, noopener, noreferrer, opener, prev, next, search)

form태그의 자식태그

	내용
button	클릭 가능한 버튼이다. 기본 type은 submit이다.
input	22가지 type을 지원한다. 기본 type은 text이다. form태그와 가장 많이 쓰이는 요소 중 하나이다.
label	form에 '라벨'을 달아주는 역할이다. label의 for 속성과 input의 id 속성이 서로 같거나 label의 자식으로 input을 두어야 한다.input에 focus가 오면 스크린리더가 label을 읽기 때문에 접근성 측면에서 중요하다.버튼이 너무 작더라도 label을 눌러 선택, 토글할 수 있어 유용하다.
select	option의 드랍다운을 만들어준다. 기본값으로 가장 첫번째 option이 선택되며 직접 입력은 불가능하다. size 속성으로 드랍다운이 아니라 한 번에 여러 개를 보여주는 스크롤로 만들 수 있다.
optgroup	select를 카테고리별로 묶을 수 있다.
datalist	option의 드랍다운을 만들어준다. 검색기록 자동완성과 같이 직접 입력이 가능하다. datalist의 id 속성과 input의 list속성이 서로 같아야 한다.
option	드랍다운 리스트에 어떤 옵션을 담을지 정의한다. value 속성을 가진다.
fieldset	form에서 관련 요소를 그룹화할 때 사용한다. 관련 요소 주위에 상자를 그려준다.
legend	fieldset요소 첫번째 자식으로 fieldset그룹을 설명하는 캡션 역할을 한다.
output	form의 oninput속성에 있는 계산을 수행하고 결과를 output요소에 표시한다.
textarea	여러 줄을 입력할 수 있는 텍스트필드이다. rows 속성은 몇 줄 보일지를, cols 속성은 너비를 지정해준다.

HTML 문서에는 form과 이에 필요한 button, input 등이 자주 사용되지만 제대로 찾아보지 않고, 필요할 때 이유모르고 쓰기만 바빴다. 앞으로는 몰라서 못쓰는 일이 없도록 이번 기회에 각 태그의 속성들을 알게 되었고 특히 onSubmit에 관해서는 잊지 말아야겠다.

form태그 공식문서