Form Element는 입력란 속에 정보 들을 입력한 다음 단추를 눌러서 어떤 값을 전송한다든지 할 때 사용하는, 입력 양식에 관련된 Element 중 최상위 Element 입니다. 즉 모든 입력 관련 Element 들(input, select, textarea)은 <form> ... </form> 사이에 들어가게 됩니다. 그렇기 때문에 form element와 form 속에 들어가는 입력 Tag을 Form Collection이라고 부릅니다. 이번 페이지에서는 Form Element의 속성과 사용법에 대해 알아 보도록 하져. Form 의 사용 목적
Form의 사용 목적은 우리가 어떤 정보를 찾으려고 할 때 자주 사용하는 검색엔진이나, 게시판에 글을 쓴다든가, 어떤 사이트에 가입할 때 작성하는 회원 가입 양식에 이르기 까지 매우 다양하다 할 수 있습니다. Form 을 사용하므로 해서 비로소 Interactive 한 사이트가 된다고 할 수 있습니다.
사실 Form Element는 HTML Element 중에 하나임이 분명하지만 JavaScript에서 다루는 이유는 어떤 값들을 입력란에 받아서 전송하는 과정에서 JavaScript가 반드시 사용되어야 하기 때문입니다. 예를 들어 잘 못 된 입력값을 판별하여 alert 메시지를 띄운다든지, 양식에 입력란이 많을 경우 잘못된 값을 전송하드라도 입력한 값이 사라지는게 아니라 , 이미 입력한 값을 다시 돌려 주어 처음부터 다시 입력하는 번거로움을 없앤다든지 하는 경우가 JavaScript가 필요한 이유가 되겠습니다. 그러면 Form Element의 속성에 대해 알아 보겠습니다.
Scriting 할 때 호출할 이름. *xhtml의 경우 name 속성 대신 id를 사용하거나 name과 id를 동시에 사용합니다.
method
입력한 데이터를 전송하는 방식으로 post와 get 방식이 있으며 필요에 따라 구분하여 사용합니다.
post
보안을 요하는 사항이나 256Byte 이상의 데이터를 전송할 때 사용
get
검색 사이트처럼 검색어를 주소창에 보여 줄 필요가 있을 때 사용. 256Byte 이내의 데이터 전송.
action
전송하는 데이터를 받아서 처리 할 파일(HTML, ASP, CGI등)의 uri
target
처리된 결과를 출력할 창(Window) 또는 Frame
_self
Default. 현재 창에 출력
_blank
새 창을 열어서 출력
_parent
Frameset page에서 자신의 한 단계 상위 프레임에 출력
_top
Frameset page에서 최상위 프레임에 출력
특정 Frame
Frameset page에서 name 속성으로 이름 준 frame 창에 출력
accept-charset
Server로 전송되어 처리 될 문자세트의 각 나라 별 언어를 지정 합니다. 여기도 참고해 보세요. 사용시 표기명을 기입해 주면 됩니다.
예 1)
한국어 : accept-charset="euc-kr"
예 2)
영어(ISO) : accept-charset="iso-8859-1"
예 3)
8Bit Unicode : accept-charset="UTF-8"
enctype
Data가 Server에 전송되어 Server에서 Encoding 되는 형식을 지정합니다. 기본값은 "application/x-www-form-urlencoded" 이며 method 속성의 값이 post 일 경우에만 유효합니다. 전송되는 Data type이 html, css, javascript, vbscript 등 text type 의 웹 언어일 경우 그 언어의 성격을 적어 줍니다. 또한 input Element의 type(type="file"과 같이) 속성을 사용하여 file을 Upload하려고 할 경우 "multipart/form-data" 형식을 사용 하여야 합니다.
text type
enctype="text/html", enctype="text/tcl", enctype="text/vbscript" 여러 type일 경우아래와 같이 comma로 구분해서 나열합니다. enctype="text/html, text/javascript, text/vbscript"
file type
enctype="multipart/form-data" input element 가 file type일 경우.
UrlEncode
Default. 즉, 지정하지 않았을 경우.
공통 속성
dir, id, class, style, title, 발생하는 Event는 공통 속성표 를 참조
Form Element 사용 예
Form element 속에 들어가는 input, select 등의 Element를 사용한 예를 하나 들어 보겠습니다. Input, Select, Option 등은 다음 페이지에 나오지만 아래와 같이 모든 form 관련 Element 들이 form Element 속에 들어 간다는 하나의 예 입니다. form 예제
<body>
<form action="../include/view.asp" method="post" id="sample" name="sample">
<input type="file" accept="multipart/form-data" id="upload" name="upload" size="30" />
<br />
<input type="text" id="text" name="text" size="30" value="text 입력하는 곳 입니다." />
<br />
<select name="list">
<option value="one" selected="selected">첫 번째 선택 항목</option>
<option value="two">두 번째 선택 항목</option>
<option value="three">세 번째 선택 항목</option>
</select><br />
<input type="submit" value="보내기" />
<input type="reset" value="다시 입력" />
</form>
</body>
