HTML FORM

FORM 태그

HTML에서 사용자로부터 일정한 형식의 정보를 입력받기 위해서는 <FORM> 태그를 사용해야 한다. 이 태그는 반드시 </FORM> 태그와 쌍을 이룬다. <FORM> 태그는 단독으로 사용할 수 없으며 <INPUT />, <SELECT> ~ </SELECT>, <TEXTAREA> ~ </TEXTAREA> 등과 같은 각종 입력 태그들을 조합하여 사용해야 한다. 다음 프로그램 “formTag.html”은 <FORM> 태그의 기본적인 사용 예를 보여준다.

formTag.html 실행결과

위 예를 보면 <FORM> 태그에 ACTION과 METHOD 속성을 볼 수 있다. ACTION 속성에는 입력된 자료를 전달받아 실행할 프로그램 이름을 지정해 준다. 이 예에서는 “action.jsp” 프로그램을 실행하도록 지정되었다. 다음으로 METHOD 속성에는 GET 또는 POST 값을 지정할 수 있다. METHOD 속성은 HTML 폼으로부터 입력된 데이터를 ACTION 속성에 정의된 프로그램으로 전달할 때 어떻게 전달할 것인가 그 방법을 정의해주는 속성이다. GET과 POST의 차이점은 다음 표를 참조하기 바란다.

NAME 속성은 하나의 HTML 내부에 여러 개의 FORM 태그가 사용됐을 경우 각각을 구분하기 위해 사용되는 속성으로 그 값은 사용자가 임의로 줄 수 있다. 그러면 FORM 태그와 함께 사용되는 각종 입력 태그들에 대해서 살펴보자.

INPUT 태그

<INPUT> 태그는 <FORM> 태그와 함께 사용되는 태그 중 가장 기본이 되는 태그로 </INPUT> 태그 없이 단독으로 사용된다. <INPUT> 태그에는 다양한 속성이 있다. 먼저 NAME 속성에 대하여 살펴보자. NAME 속성은 입력폼을 구성하는 각 요소들을 구분하기 위한 속성으로 프로그램 실행 시 중요한 역할을 하는 속성이다. 이 속성의 값은 사용자에의해 정의된다. 또 다른 속성으로 TYPE 속성이 있다. 이 속성은 각 요소들의 형태을 지정해주는 속성으로 그 내용은 다음 표와 같다.

또한 <INPUT> 태그에는 SIZE, MAXLENGTH, VALUE, CHECKED 등의 속성이 있다. SIZE
속성과 MAXLENGTH 속성은 TYPE 속성의 값이 TEXT, PASSWORD 인 경우 함께 사용되며 각각 입력창의 크기와
입력 가능한 최대 글자수를 지정한다. 또한 VALUE 속성은 TEXT, PASSWORD, BUTTON, SUBMIT,
RESET와 함께 사용되며 TEXT, PASSWORD에서는 창에 표시될 초기값을 지정하고 출력하며, BUTTON, SUBMIT,
RESET에서는 버튼 위에 표시될 문자를 지정한다. 마지막으로 CHECKED 속성은 RADIO, CHECKBOX와 함께 사용되며
라디오버튼 또는 체크박스가 기본적으로 선택된 상태가 되도록 하기위해 사용된다.

다음 프로그램 “inputTag.html”은 다양한 <INPUT> 태그의 예를 보여주고 있다.

inputTag.html 실행결과

TEXTAREA 태그

<TEXTAREA> 태그는 게시판 글올리기에서와 같이 여러줄을 입력할 수 있는 입력창을 표시한다. <TEXTAREA> 태그는 </TEXTAREA> 태그와 함께 사용되며 두 태그 사이에 위치한 내용을 화면에 표시한다. <TEXTAREA> 태그 역시 다양한 속성을 가지고 있으며 그 중 몇가지 속성에 대해 살펴보겠다. 먼저 입력창의 크기를 지정하는 ROWS, COLS 속성이 있다. ROWS 속성은 입력창의 높이를 지정하며 COLS는 폭을 지정한다. 또한 이 태그 역시 NAME 속성을 가지며 이 속성의 의미는 <INPUT> 태그의 그것과 같다.

다음 프로그램 “textareaTag.html”은 <TEXTAREA> 속성의 예를 보여준다.

textareaTag.jap 실행결과

프로그램에서 “<textarea name=”msg” cols=”25″ rows=”3″>메세지 영역</textarea>”의 내용에 의해 가로 25 자 세로 3 줄 짜리 텍스트 영역이 만들어 졌으며 이 영역에 “메세지 영역”이라는 내용을 기본으로 출력하고 있다.

SELECT 태그

<SELECT> 태그는 펼침목록 또는 리스트 형태의 입력폼을 표시한다. 이 태그는 </SELECT> 태그와 함께 사용되어야 한다. 이 태그 역시 다른 태그들과 마찬가지로 NAME 속성을 가진다. 또한 SIZE 속성을 가지는데 값이 1이면 펼침목록 형태로 출력되며 값이 2 이상이면 리스트박스 형태로 출력된다. <SELECT> 태그는 단독으로 사용될 수 없으며 <SELECT> 태그와 </SELECT> 태그 사이에 열거하려는 각각의 목록을 <OPTION> ~ </OPTION> 태그 사이에 써 줘야한다. <OPTION> 태그는 VALUE 속성과 SELECTED 속성을 가진다. VALUE 속성은 해당 목록이 선택됐을 때 프로그램으로 전달할 값을 지정해 주며, SELECT 속성은 라디오버튼 및 체크박스에서의 CHECKED 와 같은 의미를 가진다.

다음 프로그램 “selectTag.html”은 <SELECT> 태그를 사용한 예를 보여주고 있다.

selectTag.html 실행결과