By aPOST in CSS — 2023년 12월 23일

HTML+CSS 기초 강의 - 13. 폼만들기 기초 2 - 폼(<form>) 태그 속성들

<form></form> 태그쌍 안의 폼 태그 요소들은 기본적으로 사용자와 상호반응해 입력/선택된 결과값을 서버에 전송해 영구적으로 저장을 하기 위한 태그들입니다.

<form> 태그는 폼 안에 포함된 필드 값들을 결국 서버에 있는 어딘가로 전송하기 위한 정보와 처리과정이 반드시 있게 됩니다.

<form> 태그의 속성(Attribute)들은 폼안의 어떤 값들을 어떤식으로 어디로 전송하겠다는 내용을 기본적으로 표시해야 합니다.

이런 속성값들이 없다면 폼은 서버로 전송되지 않거나, 올바른 데이터가 전송되지 않게 되고, 사용자가 입력/선택한 내용들은 저장되지 않고 소실되게 됩니다.

회원가입 폼을 작성해 서버로 전송했는데 올바르게 저장되지 않으면 아무도 여러분의 사이트에 로그인할 수 없게 되는 것입니다.

<form> 태그에 사용하는 속성은 많지 않습니다.

사용하는 속성들도 거의 정해져 있기 때문에 주요 속성들만 잘 알아두면 폼 정도는 레퍼런스를 일일이 참고하지 않아도 작성할 수 있게 됩니다.

필수적으로 사용하는 속성은 name, method, action, enctype 입니다. 나머지 속성들은 거의 사용하지 않습니다.

속성	값	설명
name	텍스트	폼 이름 지정. HTML 페이지 안에서 유일해야 합니다.
method	get post	폼 데이터를 전송하는 방식을 지정합니다. get 방식으로 전송하면 폼 필드명과 값을 이름/값 쌍으로 된 쿼리스트링으로 만들어 URL 형태로 전송합니다. 단, 전송할 수 있는 전체 데이터 양이 약 3000자로 제한되므로 데이터 양이 많지 않거나 보안상 중요하지 않은 폼 전송에만 사용할 것을 추천합니다. 실제로는 검색 결과 등 URL을 저장해야할 필요가 있는 경우가 아니면 대부분 post를 쓴다고 이해하면 됩니다. post 방식으로 폼 데이터를 전송하면 폼데이터가 URL에 표시되지 않으며, HTTP 요청의 body 안에 저장되어 전송됩니다. 폼 데이터 크기에 제한이 없기 때문에 파일이나 이미지 업로드를 같이 하는 경우에는 반드시 post 방식을 사용해야 합니다.
action	URL	폼을 전송할 URL을 입력
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	text/plain - 폼 전송 데이터를 인코딩 없이 일반 텍스트로 전송합니다. 공백만 "+" 변환됩니다. multipart/form-data - 파일, 이미지 업로드가 있는 폼은 반드시 이 타입으로 지정해야 파일 업로드(전송)가 되며, 서버에 파일을 저장해 처리할 수 있게 됩니다. 초보때 가장 많이 하는 실수중의 하나이므로 꼭 외워두는 것이 좋습니다. application/x-www-form-urlencoded - 기본값. 생략가능합니다. 모든 폼 전송 데이터가 인코딩되어 전송됩니다. 공백은 "+"로 대체되며, 특수문자는 ASCII HEX 코드로 변환됩니다. ASCII HEX 코드에 대한 자세한 내용은 아래 URL을 참조하면 됩니다. https://ascii.cl/
target	_blank _self _parent _top iframe명	폼을 전송하는 윈도우/탭을 지정합니다. 실무에서는 이런 윈도우로 전송하는 경우는 거의 없습니다. HTML 페이지 안의 iframe으로 폼 데이터를 전송해 결과값을 표시하는 용도로 target을 더 많이 사용합니다. _blank - 새창으로 폼을 전송 _self - 현재창으로 폼을 전송 _parent - 부모창으로 폼을 전송 _top - 최상위 창으로 폼을 전송 iframe명 - 현재 문서안의 해당 이름을 가진 iframe으로 폼을 전송
accept-charset	캐릭터셋(UTF-8, EUC-KR, ISO-8859-1)	국내에서 사용하는 폼의 캐릭터셋은 UTF-8, EUC-KR, ISO-8859-1 셋중 하나입니다. 대부분은 UTF-8을 사용하면 되며, 제작된지 아주 오래된 홈페이지의 서버 처리를 지원해야 하는 경우 EUC-KR 일 수 있습니다. 영문 전용인 경우 ISO-8859-1 을 사용하면 됩니다. 특정 언어를 위한 전용 다국어 폼을 사용하는 경우 캐릭터셋은 다음 URL을 참고하면 됩니다. https://ko.wikipedia.org/wiki/문자_인코딩 다국어 폼을 작성하는 경우에도 99%는 UTF-8을 사용하면 됩니다.
autocomplete	on off	폼 전체에 거쳐 자동완성 기능을 사용할지 여부를 지정합니다. 개별 필드에도 사용 가능한 속성으로 폼 전체의 자동완성 속성 설정과 별개로 필드 단위로만 켜거나 끌 수 있습니다. HTML5에서 추가된 속성입니다.
novalidate	novalidate	폼 데이터 전송시 HTML5 태그중 값 체크를 하는 태그의 검사 기능을 수행한 후 폼 전송을 할지 여부를 지정합니다. 값 체크 기능이 있는 태그에 개별적으로 novalidate 값을 지정할 수도 있습니다. HTML5에서 추가된 속성입니다.

속성 이름과 값이 동일한 것(novalidate)은 속성명을 표시하는 것만으로 속성이 적용됨을 의미합니다. 즉, 속성명이 있으면 true, 없으면 false 가 됩니다.

기본 폼 예

파일 업로드를 하는 일반적인 폼은 다음과 같습니다.

<form name="myform" method="post" action="./proc" enctype="multipart/formdata">
    <input type="file" name="photo" required multiple>
    <input type="submit" value="저장">
</form>

자동완성이나 값체크를 하지 않도록 autocomplete="off" 폼 속성과 novalidate 속성을 사용한 폼은 다음과 같습니다.

<form name="myform" method="post" action="./calc" target="calcframe" autocomplete="off" novalidate>
    <input type="text" name="vala" value=""><span>+</span>
    <input type="text" name="valb" value=""><span>+</span>
    <input type="range" name="valc" min="0" max="100" value="0">
    <input type="submit" value="계산">
</form>