form태그의 개요

form태그는 양식 태그라고 하며 클라이언트가 서버와 통신하기 위해 필요한 아주 중요한 태그이다. 이 태그는 서버사이드 프로그램인 서블릿 에서도 꼭 필요한 부분이다.

클라이언트가 서버에 전송할 데이터를 입력하거나 선택하는 페이지를 구성하기 위해 꼭 필요하다. 아래 그림은 양식 태그와 CSS를 이용하여 작성된 회원가입 페이지이다.

 

 

양식 태그는 <form>과 <form>안에 정의하며 이는 클라이언트 사이드 프로그램이나 서버 사이드 프로그램 모두에서 지켜져야 하는 중요한 약속이다.

HTML4에서 지원하는 양식 태그는 몇 개 안되지만 HTML5로 넘어가면 다양한 많은 양식 태그를 지원한다.

또한 모든 양식 태그를 통해 입력하는 값을 서버로 보내며 구분하기 위해 “name”속성을 이용하여 이름을 정의해야 한다. 이는 자바스크립트에서도 활용된다.

 

우리는 기본 태그만 살펴본다.

태그	종류	설명
text	텍스트	<input type=”text”>로 나타내며 사용자의 입력을 받는 한 줄 텍스트 상자
password		<input type=”password”>로 나타내며 사용자의 패스워드 입력을 받는 텍스트 상자
textarea		<textarea></textarea>로 나타내며 여러 줄을 입력 받을 때 사용
button	버튼	<input type=”button”>으로 나타내며 자바스크립트 명령문을 연결하기 위해 사용
reset		<input type=”reset”>으로 나타내며 입력한 내용을 초기화하기 위해 사용
submit		<input type=”submit”>으로 나타내며 클라이언트가 입력한 내용을 서버 쪽으로 전송하기 위해 사용
checkbox	체크박스	<input type=”checkbox”>로 나타내며 여러 개의 항목을 선택하기 위해 사용 예를 들면 취미나 관심항목 등
radio	라디오	여러 개 중에 하나만 선택하기 위해 사용하며 <input type=”radio”>로 나타낸다. 예를 들면 투표
select	콤보상자	<select>태그로 표현하며 콤보 상자에 보여질 아이템은 <option>태그를 이용하여 구성한다.
select	리스트	<select>태그로 표현하며 콤보 상자와 동일하게 작성하며 “size”속성만 지정하면 리스트상자가 된다.