HTML 서버 통신의 첫걸음 폼(form) 태그와 get, post 방식의 차이 그리고 각종 컨트롤 input 태그 사용법 정리

사용자 입력 양식 틀 form 태그

form 태그는 사용자에게 입력받은 데이터를 서버 쪽으로 보내기 위한 틀입니다. 

form 태그 안에 사용자가 입력할 컨트롤들을 선언하고 서버로 보낼 때는 form 태그 안에 입력된 데이터가 한 번에 서버로 전송되게 됩니다. 

쉽게 이야기해서 서버에게 보낼 데이터의 시작과 끝을 알리는 공간으로 보시면 됩니다.

form 태그 안에는 여러 속성이 있는데, 서버와의 통신 방식이나 form 태그의 데이터를 처리해 줄 프로그램을 지정한다든지 서버 통신과 관련된 속성들이 존재합니다.

form 태그의 주요 속성

종류	설명
method	사용자가 입력한 내용을 서버쪽 프로그램으로 어떻게 넘겨줄 것인지 지정 get : 256 ~ 4,096byte까지만 서버로 넘길 수 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점 post : 입력한 내용의 길이에 제한이 없고, 사용자가 입력한 내용도 드러나지 않음.
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정
action	<form>태그 안의 내용을 처리해 줄 서버 프로그램을 지정
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함.
autocomplete	자동완성 기능에 대한 사용여부 기본값은 "on"

메소드의 전송방식 get방식과 post방식 차이

form 태그에서 서버로 전송하는 방식 중에는 get 방식과 post 방식 두 가지가 존재합니다.

서버로 데이터를 보내는 작업을 하는 것은 똑같지만 작동 방식에 차이가 있습니다. 

get 방식의 경우 서버로 보낼 데이터를 url에 붙여서 보내는 방식이고, post 방식은 보낼 데이터를 내부적으로 감춰 외부에 드러나지 않게 합니다.

get 방식

https://google.com?name='kitworld'&tel='12345678'&addr='korea'

post 방식

https://google.com

 form 태그 구성요소 fieldset, legend, label 태그

form 태그 안에서도 예를 들어 상품 주문 페이지를 작성한다고 할 때, 개인 정보가 입력되는 양식이 있고 배송정보가 입력되는 양식들로 나뉠 수 있을 텐데요. 

이렇게 form 태그 안의 각 요소들의 그룹핑 필요한 경우 fieldset 태그를 사용해서 나눌 수 있습니다.

그리고 fieldset 안에 legend 태그를 사용해서 fieldsset 태그 별로 그룹 제목을 지정할 수 있습니다.

label 태그의 경우는 input 태그와 그룹을 맺어주고 input 태그의 명칭을 디스플레이 해주는 용도로 사용되며, label 태그를 클릭 시 해당 label 태그와 연결된 input 태그로 포커스가 이동됩니다.

form, fieldset, legend 태그 사용예제

<form action="./doOrder.jsp" method = "get">

        <fieldset>

            <legend>개인정보</legend>

            <!-- .... 개인 정보 관련 컨트롤 배치 -->

        </fieldset>

        <fieldset>

            <legend>배송정보</legend>

            <!-- .... 배송 정보 관련 컨트롤 배치 -->

        </fieldset>

    </form>

사용자 입력을 담을 그릇 input 태그

input 태그는 사용자가 데이터를 입력할 수 있는 컨트롤을 생성해 줍니다. 일반적인 텍스트부터 비밀번호, 날짜 및 시간 등 컴퓨터가 다룰 수 있는 모든 종류의 데이터를 담을 수 있는 컨트롤을 제공해 줍니다.

입력할 수 있는 컨트롤의 종류는 input 태그의 type 속성 안에 정의해 주면 됩니다.

input 태그 type 속성에서 지정할 수 있는 컨트롤

종류	설명	사용 가능 속성
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스	size : 필드의 길이 지정 화면에 몇 글자가 보이도록 할 것인지를 지정 value : 텍스트 필드요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용 비밀번호 필드에서는 사용X maxlength : 입력할 수 있는 최대 문자 수를 지정
password	비밀번호를 입력할 수 있는 필드
search	검색할 때 입력하는 필드
url	URL 주소를 입력할 수 있는 필드
email	이메일 주소를 입력할 수 있는 필드
tel	전화번호를 입력할 수 있는 필드
checkbox	체크박스 필드	value : 서버에게 알려 줄 때 넘겨줄 값을 지정 이 값은 영문이거나 숫자여야 하며 필수 속성. checked : 기본 선택값 지정. name : 라디오 버튼에서 웹 프로그래밍에서 폼요소를 제어할 때 지정 모든 라디오버튼의 name값을 똑같이 지정해야됨.
radio	라디오 버튼
number	숫자를 조절할 수 있는 스핀박스	min : 사용할 수 있는 최소값 기본값은 0 max : 사용할 수 있는 최대값 기본값은 100 step : 숫자 간격을 지정할 수 있음. value : 필드에 표시할 초기값
range	숫자를 조절할 수 있는 슬라이드 막대
date	사용자 지역을 기준으로 날짜(연, 월, 일)	날짜나 시간과 관련된 유형도 숫자에서 사용가능한 min, max, step, value 속성을 사용할 수 있는.   <input type="date" min="2022-02-01" max="2022-02-15">
month	사용자 지역을 기준으로 날짜(연, 월)
week	사용자 지역을 기준으로 날짜(연, 주차)
time	사용자 지역을 기준으로 시간 (시, 분, 초, 분할 초)를 넣음.
datetime	국제 표준시(UTC)로 설정된 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)
submit	전송 버튼	value : 버튼에 보여줄 텍스트 지정.
reset	리셋 버튼
image	submit 버튼 대신 사용할 이미지.	<input type-"image" src="이미지 경로" alt="대체 텍스트">
button	일반 버튼	submit :  폼을 서버로 전송 submit타입과 같은 기능 reset : reset타입과 같은 기능 button 버튼 형태만 만들 뿐 자체 기능은 없음.
file	파일을 첨부할 수 있는 버튼
hidden	사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드

input 태그 주요 속성 리스

속성값	내용
autofocus	input type=텍스트-입력-필드 autofocus required>
placeholder	텍스트박스에 입력전 힌트 내용을 표시. placeholder="힌트 내용 입력"
readonly	<input type=텍스트-입력-필드 readonly>
required	입력 강제 필드 지정.