form 태그
<form> </form>- 웹 페이지의 입력양식 (로그인, 회원가입 등)
- 전체적인 양식을 의미하는 추상적인 코드이다. 따라서 form 태그 자체로는 화면에 보이지 않는다.
- 입력된 정보(데이터)를 다른 목적지로 보낼 수 있다.
Attribute 속성
- action : 양식이 제출될 때 양식 데이터를 보낼 URL
<form action="URL"> </form>
- method : 양식 데이터를 보내는 방법 (get/ post)
<form method="get"> </form>
<form method="post"> </form>
| GET | POST |
| 이름 - 값 양식 데이터를 URL에 추가한다. | HTTP 요청 본문 내에 양식 데이터를 추가한다. |
| URL의 길이가 제한적이다. (약 3000자) | 길이 제한이 없다. |
|
URL에 데이터가 추가되기 때문에 민감한 정보가 포함되어있는 경우 권장하지 않는다. (비보안 데이터에 적합하다.) |
보안 데이터에 적합하다. |
- name : form의 이름
<form name="FORM NAME"> </form>
Tag 태그1 : <input>
- 사용자가 데이터를 입력할 수 있는 입력 필드를 지정한다.
See the Pen INPUT by Joy (@Joy-Park) on CodePen.
Tag 태그2 : <button>
- 클릭 가능한 버튼을 정의한다.
See the Pen BUTTON by Joy (@Joy-Park) on CodePen.
Tag 태그3 : <select>
- 드롭다운 목록을 작성하는 데 사용한다.
- <option> 옵션태그를 사용해서 선택요소를 정의한다.
See the Pen SELECT by Joy (@Joy-Park) on CodePen.
Tag 태그4 : <option>, <optgroup>
- 선택 목록에서 옵션을 정의한다.
- 옵션 목록이 길면 관련 옵션을 그룹화할 수 있다.
Tag 태그5 : <fieldset>
- 양식에서 관련 요소들을 그룹화하고 관련 요소 주위에 상자를 그린다.
See the Pen FIELDSET by Joy (@Joy-Park) on CodePen.
Tag 태그6 : <label>
- <button>, <input>, <meter>, <output>, <progress>, <select> 또는 <textarea> 요소의 레이블을 정의한다.
Tag 태그7 : <output>
- 계산 결과를 나타낸다.
댓글