※<form> 태그는 사용자로부터 데이터를 입력받을 때 사용하며, 사용자가 입력한 데이터를 데이터베이스에 입력하기 위하여 사용되는 필수 요소 중 하나입니다. 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용합니다.
전체적인 구조와 동작방식에 대해 알아보고 사용빈도와 중요도가 높은 <button> , <input> 태그들은 다음 시간에 조금 더 자세하게 알아보도록 하겠습니다.
목차
1. form의 기본구조와 동작 방식
@form의 기본구조
@코드로 보기
<form>
<fieldset> <!--form 태그 내에 같은 요소들끼리 그룹화 시켜주는 요소-->
<legend></legend> <!--그룹화 시킬 요소들의 이름-->
</fieldset>
</form>
@form의 동작 방식
(1) 사용자가 폼을 입력한 후 submit 하면 정보가 웹서버에 전송된다.
(2) 웹서버는 정보를 처리하고 대부분 정보는 데이터베이스(DB)에 저장된다.
(3) DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송합니다.
(4) 서버는 수신한 정보를 브라우저로 보낼 새로운 페이지를 만든다.
2. 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 속성은 너비를 지정해준다. |
3. form의 속성과 메서드
@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의 메서드
| reset() | <form> 내부의 모든 값(value)을 초기화해준다. 초기화 버튼(<button type="reset">)을 클릭한 것과 같은 효과이다. 기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다. |
| submit() | <form> 을 제출한다. 제출 버튼(<button type="submit">)을 클릭한 것과 같은 효과이다. |
'HTML' 카테고리의 다른 글
| 비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자) (0) | 2023.02.22 |
|---|---|
| 비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON (0) | 2023.02.21 |
| 비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크 (0) | 2023.02.19 |
| 비주얼스튜디오 코드(Visual Studio Code)의 LIST (0) | 2023.02.18 |
| 비주얼스튜디오 코드(Visual Studio Code)의 TABLE (0) | 2023.02.17 |