HTML - form 태그

 

<form> 태그는 웹 페이지에서의 입력 양식을 의미합니다. 로그인 창이나, 회원가입 폼 등이 이에 해당되죠. 사용자로부터 데이터를 입력받을 때 사용하며, 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용합니다.
텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다.
사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다.

<form> 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있습니다.

• <button>
• <fieldset>
• <input>
• <label>
• <option>
• <optgroup>
• <select>
• <textarea>

제일 많이 사용되는건 input태그 입니다.

<form> 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다. 실제로 사용자가 양식을 입력하기 위한 태그는 <input> 태그 등이 사용됩니다.
type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정합니다.

HTML5 에서 새롭게 추가된 속성

속성명		속성값	설명
accept		파일 타입	서버로 업로드할 수 있는 파일 타입을 콤마(,)로 구분된 리스트로 명시함. HTML5에서는 더 이상 지원하지 않음.
accept-charset		문자셋	폼 데이터(form data)가 서버로 제출될 때 사용되는 문자 인코딩(character encoding) 방식을 명시함.
action		URL	폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시함.
autocomplete		on off	<form> 요소에서 자동 완성 기능을 사용할지 여부를 명시함.
enctype		application/x-www-form-urlencoded multipart/form-data text/plain	폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시함. (단, <form> 요소의 method 속성값이 “post”인 경우에만 사용할 수 있음)
method		get post	폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시함.
name		텍스트	<form> 요소의 이름을 명시함.
novalidate		novalidate	폼 데이터가 서버로 제출될 때 해당 데이터의 유효성을 검사하지 않음을 명시함.
target		_blank _self _parent _top	폼 데이터를 서버로 제출한 후 받는 응답이 열릴 위치를 명시함.

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 속성은너비를 지정해준다.

<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">)을 클릭한 것과 같은 효과이다.

 

참고:https://365kim.tistory.com/64