Form 태그
form 태그는 이 글에서 나오는 모든 태그 중 가장 상위 태그에 해당한다. 사용자로부터 데이터를 입력받을 때 사용하며, 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용한다.
Form 의 자식 태그
| 요소 | 설명 |
|---|---|
| < button> | 클릭 가능한 버튼을 생성합니다. 기본 type은 submit입니다. |
| < input> | 22가지의 다양한 type을 지원하는 입력 필드입니다. 기본 type은 text입니다. |
| < label> | < form>에 라벨을 제공하는 역할을 합니다. |
| < select> | 드롭다운 형태의 선택 목록을 생성합니다. 기본값으로 첫 번째 < option>이 선택됩니다. 직접 입력은 불가능합니다. |
| < optgroup> | < select> 요소를 카테고리별로 그룹화할 수 있습니다. |
| < datalist> | < option>의 드롭다운 목록을 생성합니다. 검색 기록 자동 완성과 같이 직접 입력이 가능합니다. |
| < option> | 드롭다운 리스트에 어떤 옵션을 담을지 정의합니다. value 속성을 가지고 있습니다. |
| < fieldset> | < form>에서 관련 요소를 그룹화할 때 사용합니다. 관련 요소 주위에 상자를 그려줍니다. |
| < legend> | < fieldset> 요소의 첫 번째 자식으로 사용되며, < fieldset> 그룹을 설명하는 캡션 역할을 합니다. |
| < output> | < form>의 oninput 속성에 있는 계산을 수행하고 결과를 < output> 요소에 표시합니다. |
| < textarea> | 여러 줄을 입력할 수 있는 텍스트 필드입니다. rows 속성은 보일 줄의 개수를, cols 속성은 너비를 지정합니다. |
Form 의 속성
| 속성 | 설명 |
|---|---|
| name | <form> 요소의 이름을 지정합니다. |
| autocomplete | 자동완성 기능을 사용할지 여부를 지정합니다. (on, off) |
| novalidate | 제출 시 입력된 값의 유효성을 검사하지 않도록 지정합니다. |
| action | <form>을 제출할 때 데이터를 보낼 URL을 지정합니다. |
| method | 데이터를 보낼 때 사용할 HTTP 메서드를 지정합니다. (get, post) |
| charset | <form>을 제출할 때 사용할 문자 인코딩을 지정합니다. |
| enctype | POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정합니다. (application/x-www-form-urlencoded, multipart/form-data, text/plain) |
| target | <form>을 제출한 후 응답을 어디에 표시할지 지정합니다. (_blank, _self, _parent, _top) |
| rel | 현재 문서와 연결된 리소스 간의 관계를 지정합니다. |
form 매소드
아래는 <form> 요소의 메소드와 간단한 설명을 포함한 표입니다:
| 메소드 | 설명 |
|---|---|
| reset() | <form> 내부의 모든 값(value)을 초기화합니다. 초기화 버튼(<button type="reset">)을 클릭한 것과 같은 효과입니다. 기본값(default value)이 지정된 경우 이 값으로 다시 초기화됩니다. |
| submit() | <form>을 제출합니다. 제출 버튼(<button type="submit">)을 클릭한 것과 같은 효과입니다. |
