HTML5 - 입력 양식 태그

입력 양식은 사용자에게 입력받는 공간을 의미합니다. 입력 양식 태그는 입력 양식을 만들 때 사용하는 태그입니다. 회원들의 정보를 입력 할 때 또는 웹 페이지에 가입을 할 때의 양식이 대표적입니다.

입력 양식 개요

입력 양식은 form 태그를 사용해 생성합니다.

<body>

<form>

</form>

</body>

추가로 입력 양식 안에 input 태그를 입력하면 예시1과 같은 양식이 만들어 집니다.

예시1

입력 양식에 데이터를 입력하고 전송을 위해서는 form 태그에 아래 표의 속성을 넣어야 합니다.

속성 이름	설명
action	입력 데이터의 전달 위치를 지정합니다.
method	입력 데이터의 전닥 방식을 선택합니다.

method 속성에는 get 방식과 post 방식이 있습니다. 가령 input 입력란에 rint를 입력을 하였을 때 get 방식으로 전송을 하게되면 http://localhost:포트번호/폴더이름/파일이름?search=rint 형태로 URL이 변경이 되며, 이것은 get 방식이 데이터를 header에 입력해서 보내는 방식임을 알 수 있습니다. 반면에 post 방식은 body에 입력이 되기 때문에 주소가 변경되지 않습니다.

기본 input 태그

input 태그는 사용자에게 정보를 입력받는 기능을 수행하는 태그입니다. 사용자에게 글자를 입력받는 것은 물론이고 비밀번호와 파일을 입력받을 수도 있습니다. 아래 예시2로 확인 할 수 있습니다.

예시2

HTML5는 아래 표처럼 input 태그의 기본 type 속성값을 제공합니다.

속성값	설명
button	버튼을 생성합니다.
checkbox	체크박스를 생성합니다.
file	파일 입력 양식을 생성합니다.
hidden	보이지 않게 합니다.
image	이미지 형태를 생성합니다.
password	비밀번호 양식을 생성합니다.
raido	라디오 버튼을 생성합니다.
reset	초기화 버튼을 생성합니다.
submit	제출 버튼을 생성합니다.
text	텍스트 양식을 생성합니다.

표에 있는 속성값을 코드에 입력을 하면 아래 예시3과 같은 결과를 얻을 수 있습니다.

예시3

일반적으로 input 태그는 form 태그 안에 있어야 합니다만, 최근 Ajax 기술의 활성화로 인해 이 규칙을 지키지 않는 경우도 있다고 합니다.