[HTML] 폼(form) 태그 정리

폼(form) 태그란 무엇인가요?

폼 태그는 입력을 받기 위한 입력 형태(form)를 정의하기 위해 사용됩니다. 폼 태그안에는 input 태그가 있으며 이에따라 다양한 입력(input)을 받을 수 있습니다.

 

하지만 로그인 페이지처럼 사용자로부터 입력을 받는다고 꼭 폼태그를 써야하는 것은 아닙니다. div 태그 안에 input 태그를 넣어서 해결 할 수도 있습니다. 그럼에도 폼 태그 덕분에 사용자로부터 입력을 받는 창을 더 쉽게 만들 수 있습니다.

 

form 태그
태그	요소 분류	설명
form	블록	입력폼을 정의합니다. 한쌍을 이루는 태그이며 아래 예시처럼 많은 입력을 받을 수 있게 합니다. <form>     <input type="text">     <input type="password"> </form>

form 태그의 속성
속성	속성 값	설명
action	URL	폼 안의 데이터가 서버로 제출될 때, 그 데이터가 도착할 URL을 정의합니다.
method	GET, POST	서버로 제출될 때 어떤 HTTP 요청 메서드를 사용할지를 정의합니다.

input 태그란 무엇인가요?

input은 특정 입력을 받기 위해 사용됩니다. 하지만 만약 사용자로부터 입력을 받지 않고 표시만 해야한다면 disable이나 readonly 같은 속성으로 입력을 막을 수도 있습니다.

input 태그
태그	요소 분류	설명
input	인라인	입력을 받기 위해 사용됩니다. 싱글 태그입니다. (<input type="text"/>형태로 작성합니다.)

 

input 태그의 속성
속성	설명
text	한 줄 글을 입력합니다. maxlength 속성으로 최대 입력 가능 글자 수를 제한할 수 있습니다.
passwrod	비밀번호 입력을 위한 속성입니다.
search	검색 입력을 위해 사용합니다.
email	이메일 입력을 위해 사용합니다.
tel	전화번호 입력을 위해 사용합니다.
number	숫자 입력을 위해 사용합니다. max 속성으로 최대 입력 가능 값을 설정할 수 있습니다. min 속성으로 최소 입력 가능 값을 설정할 수 있습니다.
range	슬라이드 바를 표시하기 위해 사용합니다.
radio	여러개 중 하나만 선택가능합니다. 라디오를 보면 여러 개의 채널 중 하나의 채널 선택 버튼만 선택이 가능한걸 떠올리시면 외우기 쉽습니다.
checkbox	체크박스로 다중 선택이 가능합니다.
submit	전송 버튼을 생성합니다. value 값으로 원하는 텍스트를 지정할 수 있습니다. value 값이 없을 경우 구글 크롬에서 "제출"이 출력됩니다.
reset	취소 버튼으로 입력된 내용을 모두 비웁니다.
button	일반 버튼을 생성합니다. value 속성으로 원하는 텍스트를 지정할 수 있습니다. value 값이 없을 경우 버튼만 나타나며 기본 텍스트가 없습니다.
image	이미지 버튼입니다. alt 속성으로 원하는 텍스트를 지정할 수 있습니다. alt 값이 없을 경우 구글 크롬에서 "제출"이 출력됩니다.
file	첨부 파일을 올리기 위해 사용합니다.

 

그 외 다양한 입력 태그

그외 다양한 입력 태그
태그	요소 분류	설명
textarea	인라인	여러줄 입력을 위한 텍스트 상자를 생성합니다. rows와 cols 속성으로 줄과 칸을 설정할 수 있습니다.
select	인라인	선택 목록 상자를 생성합니다. <option>태그만 자식으로 사용이 가능합니다. <option>태그 한 개 마다 선택 목록이 생깁니다.
label	인라인	태그 제목을 정의하는 태그입니다. 태그와 연결하여 사용이 가능하며 for="id" 형식으로 id가 일치해야 사용이 가능합니다.

 

그 외 다양한 입력 태그의 속성
속성	설명
placeholder	입력해야할 내용에 대해 가이드를 제공합니다.
required	필수적으로 입력해야합니다. 입력하지 않을 경우 submit을 눌러도 제출이 되지 않습니다.
autocomplete	입력 요소에 자동 완성 기능을 설정할 수 있습니다.
pattern	정규식으로 지정한 입력 양식을 지정합니다.
multiple	다수(多數, 여러개)를 지정할 수 있게 해주는 속성입니다.
dsiable	요소를 사용할 수 없도록 비활성화 상태로 만듭니다.
readonly	입력된 내용을 수정할 수 없도록 설정합니다.