| 17 폼(form) | |
| 이전순서 | 다음순서 | 목록 | 엘레멘트 | 애트리뷰트 | 색인 | 원문 |
HTML 폼은 일반 내용, 작성(markup), 제어(control)라고 불리우는 특수 엘레멘트(checkboxes, radio buttons, menus, 등)와 이들 제어의 라벨(label)을 포함하는 문서의 일 부분이다. 사용자는 일반적으로, 처리(process)를 위하여, 텍스트 선택 메뉴 항목를 입력하는 등으로 제어(control)를 변경하여 폼을 완성("complete")하여, 웹서버나 메일서버 등 대리자(agent)에게 폼을 송신(submit)한다.
라벨, 레디오버튼(radio button)와 누름단추(push button: reset, submit 등)를 포함하는 폼의 예제를 보면:
<FORM action="http://somesite.com/prog/adduser" method="post"> <LABEL for="firstname">성: </LABEL> <INPUT type="text" id="firstname" size=4> <LABEL for="lastname">명: </LABEL> <INPUT type="text" id="lastname" size=10> <INPUT type="radio" name="sex" value="Male"> 남, <INPUT type="radio" name="sex" value="Female"> 여<BR> <LABEL for="email">전자우편: </LABEL> <INPUT type="text" id="email"> <INPUT disabled type="submit" value="완료"> <INPUT type="reset" value="재설정"> </FORM>
귀하의 부라우저로(실제 작동은 않함):
주석: 이 규격에는 추가적인 상세 폼에 대한 주석이 포함되어 있다.
사용자는 폼(form)을 이름지워진 제어(control)로 작용시킨다.
제어의 제어 이름(control name)은 name 애트리뷰트로 주어진다. FORM 엘레멘트 안에서 name 애트리뷰트의 제어하는 범위는 FORM 엘레멘트 내부이다.
각 제어(control)는 최초값과 현재값 두가지를 다 가지고 있으며, 둘 다 문자열이다. 최초값과 제어에 의하여 주어지는 가능한 값에 대해서는 각 제어의 정의를 참조하라. 일반적으로, 제어의 "최초값"은 제어 엘레멘트의 value 애트리뷰트로 지정 될 수 있다. 그러나, TEXTAREA 엘레멘트의 최초값은 그 내용으로 주어지고, 폼(form)에 있는 OBJECT 엘레멘트의 최초값은 오브젝트의 적용(이 규격의 범위 밖임)에 의하여 결정된다.
제어의 "현재값"(current value)은 최초값에 먼저 입력 된 것이다. 그러므로, 제어의 현재값은 사용자의 입력과 스크립트(script)를 통하여 수정 될 수 있다.
제어(control)의 최초값은 변경되지 않는다. 그래서 폼이 재설정(reset)되면, 각 제어의 현재값은 최초값으로 재설정된다. 만일 제어가 최초값을 가지고 있지 않았으면, 폼을 재설정했을 때의 효과는 정의되지 않았다.
폼이 처리를 위하여 송신(submit)되면, 몇개의 제어들은 그들의 이름과 현재값의 짝을 갖고, 폼의 이들 짝들과 같이 송신된다. 이름과 값의 짝이 송신 된 제어를 성공적 제어(successful control)라한다.
HTML에서 다음 제어 타입들을 아래와 같이 정의한다.
제작자는 누름단추 스크립트의 언어를 디폴트 스크립트 선언에서(META 엘레멘트로) 지정하여야 한다.
제작자는 BUTTON 엘레멘트 또는 INPUT 엘레멘트로 단추(button)를 만든다. 단추 타입의 세부사항을 위하여 이 엘레멘트들의 정의를 참조하라.
한 폼의 여러 첵크박스들은 같은 제어 이름을 갖을 수 있다. 그래서 예를 들어, 체크박스에서 사용자는 같은 특성의 여러개의 값을 선택 할 수 있다. 체크박스 제어를 만들기 위하여 INPUT 엘레멘트가 사용된다.
항상 레디오 단추들 중에 꼭 한개 만 선택(checked)된다. <INPUT> 엘레멘트의 레디오 단추들 중에 아무 것도 `CHECKED'로 지정되지 않았으면, 사용도구는 그 중 제일 먼저 레디오 단추를 처음에 선택하여야 한다.
사용도구에 따라 다르므로 작성자는 확실히 그 레디오 단추 중 한개를 최초에 "on"으로 설정하여야 한다.
제어들를 만들기 위하여 사용되는 엘레멘트들은 일반적으로 FORM 엘레멘트 안에 위치한다. 그러나 사용자 인터페이스(interface)를 만들기 위하여 사용 될 때, FORM 엘레멘트 선언 밖에도 위치 할 수 있다. 이는 본질적 이벤트(intrinsic event)에서 다루었다. 폼(form) 밖의 제어는 성공적인 제어가 될 수 없음에 주의하라.
<!ELEMENT FORM - - (%block; | SCRIPT)+ -(FORM) -- 통신하는(interactive) 폼 --> <!ATTLIST FORM %attrs; -- %coreattrs, %i18n, %events -- action %URI; #REQUIRED -- 서버(server-side) 폼 취급자(handler) -- method (GET | POST) GET -- 폼을 송신하는데 사용되는 HTTP 방법(method)-- enctype %ContentType; "application/x-www-form-urlencoded" accept %ContentTypes; #IMPLIED -- 화일 업로드(upload)를 위한 MIME 타입 목록-- name CDATA #IMPLIED -- 스크립팅(scripting)을 위한 폼의 이름 -- onsubmit %Script; #IMPLIED -- 폼이 송신되었다 -- onreset %Script; #IMPLIED -- 폼이 재설정되었다 -- accept-charset %Charsets; #IMPLIED -- 지원 글자 세트 목록 -- >
시작태그: 필요 함, 종료태그: 필요 함
애트리뷰트의 정의
이 애트리뷰트의 디폴트 값은 예약 된 문자열 "UNKNOWN"이다. 사용도구는 이 값을 FORM 엘레멘트를 포함하는 문서를 송신하는데 사용 된 글자 엔코딩으로 해석 할 수 있다.
FORM 엘레멘트는 제어(control)를 담는 용기로 작용한다. 이것이 다음을 지정한다.
폼은 폼 제어 외에 텍스트와 문단, 목록 등의 작성 부분을 포함 할 수 있다.
다음 예제는 송신(submi)되면 프로그램 "adduser"에 의하여 처리되는 폼을 보여준다. 이 폼은 HTTP "post" 방법을 사용하여 보내진다.
<FORM action="http://somesite.com/prog/adduser" method="post"> ... 폼(form)의 내용 ... </FORM>
사용도구들이 서버들을 위하여 어떻게 폼 데이터를 준비해야 하며, 어떻게 반응해야 하는가에 대한 정보는 폼의 송신을 참조하라.
주석: 서버들의 받은 폼 데이터의 처리에 대 한 추가적 사항은 이 규격의 범위를 벋어난다.
<!ENTITY % InputType "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" > <!-- 송신(submit)과 재설정(reset) 외의 모든 애트리뷰트에는 이름(name)이 필요하다 --> <!ELEMENT INPUT - O EMPTY -- 폼 제어(form control) --> <!ATTLIST INPUT %attrs; -- %coreattrs, %i18n, %events -- type %InputType; TEXT -- 입력의 종류 -- name CDATA #IMPLIED -- 폼의 일 부분으로 송신(submit) 됨 -- value CDATA #IMPLIED -- 레디오(radio) 단추와 체크 박스에 필요-- checked (checked) #IMPLIED -- 레디오 단추와 체크 박스에 필요 -- disabled (disabled) #IMPLIED -- 이 내용을 불활성화 -- readonly (readonly) #IMPLIED -- 텍스트와 암호에 사용 -- size CDATA #IMPLIED -- 각 필드의 타입 지정 -- maxlength NUMBER #IMPLIED -- 텍스트의 최대 글자 수 -- src %URI; #IMPLIED -- 이미지를 갖는 필드을 위하여 -- alt CDATA #IMPLIED -- 짧은 설명 -- usemap %URI; #IMPLIED -- 사용자측(client-side) 이미지맵 -- ismap (ismap) #IMPLIED -- 서버측(server-side) 이미지맵에 사용 -- tabindex NUMBER #IMPLIED -- 탭 위치 순위에서의 위치 -- accesskey %Character; #IMPLIED -- 접속키 글자 -- onfocus %Script; #IMPLIED -- 엘레멘트(element)에 초점(focus) 맞춤 -- onblur %Script; #IMPLIED -- 엘레멘트에 초점 해제 -- onselect %Script; #IMPLIED -- 텍스트가 선택되었슴 -- onchange %Script; #IMPLIED -- 엘레멘트의 값이 변경되었슴 -- accept %ContentTypes; #IMPLIED -- 화일 로드를 위한 MIME 타입 목록 -- >
시작태그: 필요 함, 종료태그: 사용 금지
애트리뷰트의 정의
INPUT 엘레멘트 의하여 정의 된 제어 타입은 type 애트리뷰트의 값에 따라 다르다.
이미지 위를 클릭하면, 폼(form)은 송신되고 클릭한 좌표(coordinates)가 서버에 전달된다. x 값은 왼쪽 마진으로 부터 이미지의 왼쪽 끝 까지의 픽셀(pixel) 수 이고, y 값은 위쪽 마진으로 부터 이미지의 위쪽 끝 까지의 픽셀 수 이다. 송신(submit) 된 데이터는 name.x=x-value와 name.y=y-value의 값이 될 수 있는데, 여기서 "name"은 name 애트리뷰트의 값이고, x-value와 y-value는 x와 y의 각 좌표값이다.
만일 서버가 클릭 한 위치에 따라 서로 다른 작동들을 하는 것이면, 비 그라픽(non-graphic) 브라우저 사용자는 불이익을 받을 것이다. 그래서, 제작자는 다음의 대체 방식을 고려하여야 할 것이다.
다음 예제 HTML 부분은 사용자가 성, 명, 전자 우편 주소, 성별을 입력 할 수 있는 간단한 폼를 정의한다. 송신(submit) 단추가 활성화되면, 폼은 action 애트리뷰트에 의하여 지정 된 프로그램에 보내 질 것이다.
<FORM action="http://somesite.com/prog/adduser" method="post"> <P> First name: <INPUT type="text" name="firstname"><BR> Last name: <INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P> </FORM>
이 폼의 표현은 다음과 같을 것이다.
 |
LABEL 엘레멘트에서, "First name"와 같은 라벨을 주는 것을 다뤘다.
다음 예제는,"onclick" 이벤트(event)로 Javascript 기능 이름(function name) verify()가 선택된다.
<HEAD> <META http-equiv="Content-Script-Type" content="text/Javascript"> </HEAD> <BODY> <FORM action="..." method="post"> <P> <INPUT type="button" value="작동" onclick="verify()"> </FORM> </BODY>
스크립트와 이벤트에 대 한 추가 정보는 본질적 이벤트을 참조하라.
다음 예제는 사용자 지정 화일의 내용이 어떻게 폼과 함께 송신되는가를 보여 준다. 사용자에게 폼과 함께 송신 될 이름과 화일명 목록을 선택할 수 있게 프롬프트(prompted)가 표시된다. enctype 값을 "multipart/form-data"로 지정하므로서, 각 화일의 내용은 복합 문서의 분리 된 항목으로 송신되도록 묶이게 될 것이다.
<FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data" method="post"> <P>성명은? <INPUT type="text" name="name_of_sender"> 보낼 화일명은? <INPUT type="file" name="name_of_files"></P> </FORM>
<!ELEMENT BUTTON - - (%flow;)* -(A | %formctrl; | FORM | FIELDSET) -- 누름단추(push button) --> <!ATTLIST BUTTON %attrs; -- %coreattrs, %i18n, %events -- name CDATA #IMPLIED value CDATA #IMPLIED -- 송신(submit)으로 서버로 보내짐 -- type (button | submit | reset) submit -- 폼 단추로 사용 -- disabled (disabled) #IMPLIED -- 이 내용을 불활성화 -- tabindex NUMBER #IMPLIED -- 탭 위치 순위에서의 위치 -- accesskey %Character; #IMPLIED -- 접속키 글자 -- onfocus %Script; #IMPLIED -- 엘레멘트(element)에 초점(focus) 맞춤 -- onblur %Script; #IMPLIED -- 엘레멘트에 초점 해제 -- >
시작태그: 필요 함, 종료태그: 필요 함
애트리뷰트의 정의
BUTTON 엘레멘트 기능에 의하여 만들어진 단추(button)는 INPUT 엘레멘트에 의하여 만들어진 단추와 같으나, 더 풍부한 표현의 가능성을 제공한다. BUTTON 엘레멘트는 내용을 가질 수 있다. 예를 들어, 이미지 기능을 갖는 BUTTON 엘레멘트는 type이 "image"로 설정 된 INPUT 엘레멘트와 같거나 유사하나, BUTTON 엘레멘트는 내용을 가질 수 있다.
보는 사용도구는 INPUT 단추를 단순한 이미지로 표현 할 수 있지 만, BUTTON 단추를 클릭하였을 때, 올라가기/내려가기와 해제의 모양으로 표현 할 수 있다.
다음 예제는 위 예제의 submit와 reset 단추에 INPUT 대신 BUTTON 단추를 사용하였다. 이 단추들은 IMG 엘레멘트의 방식으로 이미지를 포함한다.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
성: <INPUT type="text" name="firstname"><BR>
명: <INPUT type="text" name="lastname"><BR>
전자 우편: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> 남<BR>
<INPUT type="radio" name="sex" value="Female"> 여<BR>
<BUTTON name="submit" value="submit" type="submit">
송신<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
<BUTTON name="reset" type="reset">
재설정<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
</P>
</FORM>
제작자는 IMG 엘레멘트에 대체 텍스트를 제공하여야 함을 상기시킨다.
BUTTON 엘레멘트의 내용으로 나타나는 IMG를 이미지맵과 연관시키는 것은 틀린 것이다.
틀린 예제:
다음은 틀린 HTML이다.
<BUTTON> <IMG src="foo.gif" usemap="..."> </BUTTON>
<!ELEMENT SELECT - - (OPTGROUP | OPTION)+ -- 선택 사항 선택자(selector) --> <!ATTLIST SELECT %attrs; -- %coreattrs, %i18n, %events -- name CDATA #IMPLIED -- 필드명(field name) -- size NUMBER #IMPLIED -- 보이는 열(row) -- multiple (multiple) #IMPLIED -- 디폴트는 단일 선택 -- disabled (disabled) #IMPLIED -- 이 내용을 불활성화 -- tabindex NUMBER #IMPLIED -- 탭 위치 순위에서의 위치 -- onfocus %Script; #IMPLIED -- 엘레멘트(element)에 초점(focus) 맞춤 -- onblur %Script; #IMPLIED -- 엘레멘트에 초점 해제 -- onchange %Script; #IMPLIED -- 엘레멘트 값이 변경되었슴 -- >
시작태그: 필요 함, 종료태그: 필요 함
SELECT 애트리뷰트(attribute) 정의
SELECT 엘레멘트는 메뉴(menu)를 만든다. 메뉴의 각 선택은 OPTION 엘레멘트로 나타난다. SELECT 엘레멘트는 최소 한개의 OPTION 엘레멘트를 가져야한다.
OPTGROUP 엘레멘트는 제작자에게 선택의 논리적 구룹지움을 허용한다. 이는 사용자가 긴 선택 사항 목록으로 부터 선택해야 될 때, 긴 선택 사항의 단일 목록보다, 관계 된 선택들을 구룹지우는 것이 파악하고 기억하기 용이하여 특히 유용하다. HTML 4에서, 모든 OPTGROUP 엘레멘트는 직접 SELECT 엘레멘트 안에서 정의하여야 한다. 말하자면 구룹은 네스트(nest)되지 말아야한다.
사전 선택 된 것이 없거나 여러개가 될 수 있다. 사용도구는 어느 선택이 사전 선택 된 것인지 다음과 같이 판별한다.
<OPTION> 엘레멘트에 SELECTED 애트르뷰트로 지정된 것이 없으면, 최초에는 제일 먼저의 OPTION 항목이 선택된다.
사용도구에 따라 다르므로 작성자는 확실히 각 메뉴(menu)에 그 사전에 선택된 디폴트 OPTION을 포함하여야 한다.
<!ELEMENT OPTGROUP - - (OPTION)+ -- 선택 사항 구룹 --> <!ATTLIST OPTGROUP %attrs; -- %coreattrs, %i18n, %events -- disabled (disabled) #IMPLIED -- 이 내용을 불활성화 -- label %Text; #REQUIRED -- 메뉴 계통(hierarchical)에 사용 -- >
시작태그: 필요 함, 종료태그: 필요 함
OPTGROUP 애트리뷰트(attribute) 정의
주석: 향후 HTML의 버전은 구룹의 네스트(nest)를 허용하는 구룹지우기가 채택 될 것을 예고하고 있다. 말하자면 OPTGROUP 엘레멘트가 네스트 될 수 있다는 것이다. 이는 제작자에게 선택 계통(hierarchy)의 표현을 풍부하게 할 것이다.
<!ELEMENT OPTION - O (#PCDATA) -- 선택 할 수 있는 항목 --> <!ATTLIST OPTION %attrs; -- %coreattrs, %i18n, %events -- selected (selected) #IMPLIED disabled (disabled) #IMPLIED -- 이 내용을 불활성화 -- label %Text; #IMPLIED -- 메뉴 계통(hierarchical)에 사용 -- value CDATA #IMPLIED -- 엘레멘트 내용의 디폴트 제공 -- >
시작태그: 필요 함, 종료태그: 선택적
선택 사항 애트리뷰트(attribute) 정의
메뉴 선택을 표현 할 때, 사용도구는 OPTION 엘레멘트의 label 애트리뷰트의 값을 그 선택으로 사용하여야 하고, 만일 지정되지 않았으면, OPTION 엘레멘트의 내용을 사용하여야 한다.
OPTGROUP 엘레멘트의 label 애트리뷰트는 선택 구룹의 라벨을 지정한다.
아래 예제에서, 사용자가 7가지 소프트웨어 항목으로 부터 설정을 선택을 할 수 있는 메뉴를 만들었다. 첫번째와 두번째 항목은 사전 선택 된 항목이나 사용자가 선택을 해제 할 수 있다. 나머지 항목들은 미리 선택되지 않다. size 애트리뷰트는 사용자가 7가지 선택 사항들 중에서 선택 할 수 있슴에도 불구하고, 메뉴가 4 열(row) 만을 갖도록 지정하였다. 다른 선택 사항들은 굴리기(scroll) 기능을 통하여 선택 할 수 있다.
SELECT 다음에 송신(submit)과 재설정(reset) 단추가 있다.
<FORM action="http://somesite.com/prog/component-select" method="post"> <P> <SELECT multiple size="4" name="component-select"> <SELECT selected value="Component_1_a">Component_1</SELECT> <SELECT selected value="Component_1_b">Component_2</SELECT> <SELECT>Component_3</SELECT> <SELECT>Component_4</SELECT> <SELECT>Component_5</SELECT> <SELECT>Component_6</SELECT> <SELECT>Component_7</SELECT> </SELECT> <INPUT type="submit" value="선택완료"><INPUT type="reset" value="재설정"> </P> </FORM>
귀하의 부라우저로(실제 작동은 않함):
선택 된 항목 만이 제어 이름 "component-select"를 사용하여, 성공적(successful)이된다. 아무 option 도 선택되지 않았으면, 그 제어는 성공적이 아니며 폼을 송신(submit)하였을 때 서버에 이름이나 값이 전달되지 않는다. value 애트리뷰트가 설정되면, 제어의 최초값을 결정하며, 그렇지 않으면 제어는 그 엘레멘트의 내용(contents)이 된다는 점에 유의하라.
다음 예제는 선택 사항의 구룹을 위하여 OPTGROUP 엘레멘트를 사용하였다.
<FORM action="http://somesite.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTGROUP label="PortMaster 3">
<SELECT label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
<SELECT label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
<SELECT label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<SELECT label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
<SELECT label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="IRX">
<SELECT label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
<SELECT label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
</OPTGROUP>
</SELECT>
</FORM>
구룹핑(grouping)은 다음과 같이 표현된다.
PortMaster 3
3.7.1
3.7
3.5
PortMaster 2
3.7
3.5
IRX
3.7R
3.5R
보는(visual) 사용도구는 사용자가 선택 사항 구룹으로 부터 계통(hierarchical) 메뉴 또는 선택 사항의 구조를 반영하는 기능을 통하여 선택 할 수 있게 한다.
그래픽 사용도구는 다음과 같이 표현 할 것이다.
 |
이 이미지는 카스케이딩(cascading) 메뉴로 표현 된 SELECT 엘레멘트를 보여준다. 메뉴의 맨 위 라벨(label)은 현재 선택된 값 (PortMaster 3, 3.7.1)이다. 사용자는 두 카스케이딩(cascading) 메뉴를 열지 않았고, 새 값 (PortMaster 2, 3.7)을 아직 선택하지 않았다. 각 카스케이딩 메뉴는 OPTGROUP 또는 OPTION 엘레멘트의 라벨을 디스플레이한다.
<!ELEMENT TEXTAREA - - (#PCDATA) -- 여러 열(multi-line) 텍스트 필드(field) --> <!ATTLIST TEXTAREA %attrs; -- %coreattrs, %i18n, %events -- name CDATA #IMPLIED rows NUMBER #REQUIRED cols NUMBER #REQUIRED disabled (disabled) #IMPLIED -- 이 내용을 불활성화 -- readonly (readonly) #IMPLIED tabindex NUMBER #IMPLIED -- 탭 위치 순위에서의 위치-- accesskey %Character; #IMPLIED -- 접속키 글자 -- onfocus %Script; #IMPLIED -- 엘레멘트(element)에 초점(focus) 맞춤 -- onblur %Script; #IMPLIED -- 엘레멘트에 초점 해제 -- onselect %Script; #IMPLIED -- 일부 텍스트가 선택 됨 -- onchange %Script; #IMPLIED -- 엘레멘트의 값이 변경되었슴 -- >
시작태그: 필요 함, 종료태그: 필요 함
애트리뷰트의 정의
TEXTAREA 엘레멘트은 여러 열 텍스트 입력 제어를 만든다. 사용도구는 제어의 최초값으로 이 엘레멘트의 내용을 사용하고, 최초 텍스트를 표현하여야 한다.
이 예제는 두 열의 최초 텍스트를 포함하는 5열(row)에 60 컬럼(column)을 갖는 TEXTAREA 제어를 만든다. TEXTAREA 다음에 송신(submit)과 재설정(reset) 단추가 온다.
<FORM action="http://somesite.com/prog/text-read" method="post"> <P> <TEXTAREA name="thetext" rows="5" cols="60"> 최초 텍스트의 첫째 열. 최초 텍스트의 둘째 열 초기값. </TEXTAREA> <INPUT type="submit" value="입력완료"><INPUT type="reset" value="재설정"> </P> </FORM>
귀하의 부라우저로(실제 작동은 않함):
readonly(읽기 전용) 애트리뷰트를 설정 함으로서 제작자는 TEXTAREA 안에 수정 될 수 없는 텍스트를 표시 할 수 있다. TEXTAREA의 값이 폼고 함께 송신되기 때문에 문서 작성하는 표준 텍스트의 사용하는 것과 다르다.
ISINDEX는 불량한 것이다. 이 엘레멘드는 한 열 텍스트 입력 제어를 만든다. 제작자는 텍스트 입력 제어를 만들기 위하여 INPUT를 사용한다.
공식적인 정의는 변이 DTD를 참조하라.
애트리뷰트의 정의
ISINDEX 엘레멘트는 글자 갯수에 관계 없이 한 열(line) 텍스트 입력 제어를 만든다. 사용도구는 prompt 애트리뷰트의 값을 프롬프트의 제목으로 사용 할 수 있다.
불량한 예제:
다음에 ISINDEX를 선언하였다.
<ISINDEX prompt="검색 문구를 입력하시오: ">
INPUT로 다음과 같이 할 수 있다.
<FORM action="..." method="post"> <P>검색 문구를 입력하시오: <INPUT type="text"></P> </FORM>
ISINDEX의 의미. 현재 ISINDEX의 의미는 첨부 된 문서의 기준 URI이 HTTP URI 일 때에 만 제대로 정의된다. 실제로는 다른 글자 세트로 지정 한 URI는 기능을 갖지 않으므로 문자열 입력은 Latin-1으로 제한되어있다.
텍스트 필드(text field), 체크박스(checkbox), 레디오 단추(radio button), 메뉴(menu) 등 대부분은 갖지 않지만, 일부 폼(form) 제어(control)는 자동적으로 단추와 연관 된 라벨을 갖는다.
암시적 라벨을 갖는 제어에서, 사용도구는 value 애트리뷰트 값을 라벨 문자열로 사용하여야 한다.
LABEL 엘레멘트는 암시적 라벨를 가지고 있지 않는 제어의 라벨을 지정하기 위하여 사용된다.
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- 폼 필드 라벨 텍스트 --> <!ATTLIST LABEL %attrs; -- %coreattrs, %i18n, %events -- for IDREF #IMPLIED -- 필드 ID 값과 맞춤 -- accesskey %Character; #IMPLIED -- 접속키 글자 -- onfocus %Script; #IMPLIED -- 엘레멘트(element)에 초점(focus) 맞춤 -- onblur %Script; #IMPLIED -- 엘레멘트에 초점 해제 -- >
시작태그: 필요 함, 종료태그: 필요 함
애트리뷰트의 정의
LABEL 엘레멘트는 제어(control)에 정보를 첨부하는데 사용 될 수 있다. 각 LABEL 엘레멘트는 정확하게 하나의 폼 제어와 연관된다.
for 애트리뷰트는 다른 명시적 제어(control)의 라벨과 연관한다. for 애트리뷰트의 값은 연관 된 제어 엘레멘트의 id 애트리뷰트의 값과 같아야한다. 한개 이상의 LABEL이 for 애트리뷰트를 통하여 복수 참조로 생성 된 같은 제어에 연관 될 수 있다.
이 예제는 두개의 정렬 된 텍스트 입력 제어들과 그들에 연관 된 라벨들을 갖는 표(table)를 만든다. 각 라벨은 정확하게 하나의 텍스트 입력과 연관된다.
<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">이름 </LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">성 </LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>
이 예제는 위의 예제에 LABEL 엘레멘트를 포함 한 것이다.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">이름: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">성: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">전자 우편: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> 남<BR>
<INPUT type="radio" name="sex" value="Female"> 여<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
다른 제어(control)와 암시적으로 라벨에 연관 시키기 위해서, 제어 엘레멘트는 LABEL 엘레멘트의 내용 안에 있어야 한다. 이런 경우, LABEL은 하나의 제어 엘레멘트를 포함 할 수 있다. 라벨 자체는 연관 된 제어의 앞이나 뒤에 위치 할 수 있다.
이 예제에서, 두개의 라벨을 두개의 텍스트 입력 제어에 암시적으로 연관시켰다.
<FORM action="..." method="post"> <P> <LABEL> 이름 <INPUT type="text" name="firstname"> </LABEL> <LABEL> <INPUT type="text" name="lastname"> 성 </LABEL> </P> </FORM>
이 기술은 라벨이 한 칸(cell)에 있고, 연관된 제어가 다른 칸에 있는 표(that)가 배치(layout)에서, 사용 될 때는 사용 될 수 없음에 주의하라.
LABEL 엘레멘트가 focus(초점을 갖게)되면, 이는 초점(focus)을 연관 된 제어에 옮기게된다. 아래 접속키(access key)의 예를 참조하라.
라벨은 보는 브라우저, 음성 합성 장치에서 읽는 경우 등 사용도구에 따라 다르게 표현 될 수 있다.
<!-- #PCDATA 혼합 내용 문제를 해결하기 위 한 것으로, 이 규격에는 그 곳에 공간 만 허용 함! --> <!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- 폼 제어 구룹 --> <!ATTLIST FIELDSET %attrs; -- %coreattrs, %i18n, %events -- > <!ELEMENT LEGEND - - (%inline;)* -- 필드 세트(fieldset) 범례(legend) --> <!ENTITY % LAlign "(top | bottom | left | right)"> <!ATTLIST LEGEND %attrs; -- %coreattrs, %i18n, %events -- accesskey %Character; #IMPLIED -- 접속키 글자 -- >
시작태그: 필요 함, 종료태그: 필요 함
LEGEND 애트리뷰트(attribute) 정의
FIELDSET 엘레멘트는 제작자가 제어들과 라벨들을 구룹 지울 수 있게 한다. 제어(control)들의 구룹 지우기는 보는 사용도구에서 항해 탭(navigation tabbing) 설정과 음성(speech-oriented) 사용도구에서 음성 항해를 동시에 지원하므로, 사용자가 그들의 목적을 이해하기 편하게 해 준다. 이 엘레멘트의 사용은 문서에 더 쉽게 접근하기 위 한 것이다.
LEGEND 엘레멘트는 제작자가 FIELDSET의 제목(caption)을 지정 할 수 있게 한다. 범례(legend)는 FIELDSET가 보이지 않는 표현을 할 때 접속성을 향상시킨다.
예제에서, 의사의 사무실에서 채울 폼을 만들었다. 이는 개인 정보, 의료 기록, 현재의 투약등 세 항목들로 나누어, 각 항목은 적정한 정보를 입력 할 수 있도록 제어를 갖는다.
<FORM action="..." method="post">
<P>
<FIELDSET>
<LEGEND>개인 정보</LEGEND>
이름: <INPUT name="personal_lastname" type="text" tabindex="1">
성: <INPUT name="personal_firstname" type="text" tabindex="2">
주소: <INPUT name="personal_address" type="text" tabindex="3">
... 개인 정보 계속 ...
</FIELDSET>
<FIELDSET>
<LEGEND>의료 기록</LEGEND>
<INPUT name="history_illness" type="checkbox" value="Smallpox"
tabindex="20"> Smallpox
<INPUT name="history_illness" type="checkbox" value="Mumps"
tabindex="21"> Mumps
<INPUT name="history_illness" type="checkbox" value="Dizziness"
tabindex="22"> Dizziness
<INPUT name="history_illness" type="checkbox" value="Sneezing"
tabindex="23"> Sneezing
... 의료 기록 계속 ...
</FIELDSET>
<FIELDSET>
<LEGEND>현재 투약</LEGEND>
현재 어떤 약을 드십니까?
<INPUT name="medication_now" type="radio" value="Yes" tabindex="35">네
<INPUT name="medication_now" type="radio" value="No" tabindex="35">아니오
만일 현재 약을 드시면 아래 적어 주십시오:
<TEXTAREA name="current_medication" rows="20" cols="50" tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>
이 예제에서, 각 FIELDSET 안에서 엘레멘트를 스타일쉬트로 정렬하고, 색상과 폰트 정보, 사용자가 현재 투약을 입력하면, 폼의 보는 표현 향상시킬 수 있다.
HTML 문서에서, 엘레멘트는 활성화되고 임무를 수행하기 위하여, 사용자는 초점(focus)을 받아야한다. 예를 들어, 지정 된 연결로 가기 위하여 사용자는 A 엘레멘트로 연결을 활성화 시켜야한다. 마찬가지로, 텍스트를 입력시키기 위하여 TEXTAREA에 사용자는 초점을 주어야한다.
엘레멘트에 초점을 주석 위해서 몇가지 방법이 사용된다.
애트리뷰트의 정의
탭 순서(tabbing order)는 사용자가 키보드로 항해 할 때, 어떤 엘레멘트가 초점(focus)을 받을 것인가 하는 순서를 지정한다. 탭 순서는 엘레멘트 속에 다른 엘레멘트를 네스트(nest)로 포함 할 수 있다.
초점을 받은 엘레멘트는 사용도구에 의하여 다음 규칙을 따라 항해(navigate)한다.
A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA 엘레멘트는 tabindex 애트리뷰트를 지원한다.
이 예제에서, 텝 순서는 "field1"과 단추가 같은 tabindex을 사용하지만, "field1"가 문장의 뒤에 나오므로 BUTTON, INPUT 엘레멘트 순이다. 마지막으로 A 엘레멘트에 의하여 생성 된 연결이 된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>폼(form)을 갖는 문서</TITLE> </HEAD> <BODY> ... 다른 텍스트 ... <P><A tabindex="10" href="http://www.w3.org/">W3C Web site</A>로 가라. ... 다른 텍스트 ... <BUTTON type="button" name="get-database" tabindex="1" onclick="get-database">현재 데이터베이스(database)에서 얻어라. </BUTTON> ... 다른 텍스트 ... <FORM action="..." method="post"> <P> <INPUT tabindex="1" type="text" name="field1"> <INPUT tabindex="2" type="text" name="field2"> <INPUT tabindex="3" type="submit" name="submit"> </P> </FORM> </BODY> </HTML>
탭 키(tabbing key). 탭에 의한 항해(tabbing navigation)를 진행시키고, 엘레멘트의 활성화를 시키는, 실제 키 순서(key sequence)는, 예를 들어, "tab" 키가 항해에 사용되는가와 "enter" 키가 선택 된 것을 활성화(activate) 시키는데 사용되는가, 하는 사용도구의구성에 따라 다르다.
사용도구는 텝 순서(tabbing order)를 꺼꾸로 항해하도록 키(key) 순서를 정의 할 수도 있다. 텝 순서의 끝이나 시작에 도달하면, 사용도구는 시작이나 끝으로 순환시킬 수 있다.
애트리뷰트의 정의
엘레멘트에 지정 된 접속키(accesskey)를 누르면, 그 엘레멘트에 초점(focus)이 주어진다. 엘레멘트가 초점을 받았을 때의 작용은 엘레멘트에 따라 다르다. 예를 들어, A 엘레멘트에 의하여 지정 된 연결(link)을 사용자가 활성화(activate) 시키면, 사용도구는 일반적으로 연결시킨다. 사용자가 레디오 단추(radio button)를 활성화 시키면, 사용도구는 레디오 단추의 값을 변경시키고, 텍스트 필드를 활성화 시키면, 입력을 허용한다.
A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA 엘레멘트는 accesskey 애트리뷰트를 지원한다.
이 예제는 INPUT 제어(control)에 연관 된 라벨(label)에 접속키(access key) "U"를 설정한다. 접속키를 찍으면, 라벨에 초점오고, 연관 제어에 주어진다. 그러면 INPUT 지역에 텍스트를 입력 할 수 있게 된다.
<FORM action="..." method="post"> <P> <LABEL for="fuser" accesskey="U"> 사용자</LABEL> <INPUT type="text" name="user" id="fuser"> </P> </FORM>
이 예제에서, 접속키(access key)가 A 엘레멘트에 의하여 지정 된 연결(link)로 되도록 정의하였다. 접속키를 찍으면 사용자를 다른 문서(이 예제에서는 목차로)로 연결 할 것이다.
<A accesskey="C" rel="contents" href="http://someplace.com/specification/contents.html">목차</A>
접속키(access key)의 작동은 깔려있는 시스템에 따라 다르다. 예를 들어 MS Windows에서 작동하는 기계에서, 일반적으로 접속키를 "alt" 키(key)와 함께 눌러야 하고, Apple 시스템에서는 일반적으로 접속키를 "cmd" 키와 함께 눌러야한다.
접속키의 표현은 사용도구에 따라 다르다. 제작자가 라벨(label) 텍스트 또는 어디든 접속키가 적용되는 곳에는 접속키를 포함시킬 것을 추천한다. 사용도구는 그 임무를 강조하고, 다른 글자들과 구별되도록(예를 들어 밑 줄을 긋는 등) 접속키의 값을 표현하여야 한다.
사용자 입력이 바람직하지 않거나 필요 없을 때, 제어를 불활성 시키거나 읽기 전용으로 하는 것이 중요한다. 예를 들어, 필요한 데이터를 입력시키기 전에는 폼의 송신(submit) 단추를 불활성화 하기를 원 할 수 있다. 비슷하게, 제작자가 폼과 함께 송신되어야 할 값을 읽기 전용 텍스트로 포함 시키기를 원 할 수 있다. 다음 항목들은 불활성과 읽기 전용 제어를 설명한다.
애트리뷰트의 정의
설정되면, disabled 애트리뷰트는 엘레멘트에 다음 효과를 준다.
BUTTON INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA 엘레멘트는 disabled 애트리뷰트를 지원한다.
이 애트리뷰트는 전달되지 만, 지역 선언으로 전달 된 값을 덮어 씌울(override) 수 있다.
불활성 된 엘레멘트의 표현 방법은 사용도구에 따라 다르다. 예를 들어, 일부 사용도구에서는 불활성 된 메뉴 항목, 단추의 라벨 등을 흐리게 표현한다.
이 예제에서, INPUT 엘레멘트는 불활성되었다. 그러므로, 사용자의 입력을 받을 수 없고, 그 값을 폼과 함께 송신 될 수 없다.
<INPUT disabled name="fred" value="stone">
주석: disabled 애트리뷰트의 값을 탄력성있게 수정하려면 스그립트(script)를 사용하는 방법 뿐이다.
애트리뷰트의 정의
readonly 애트리뷰트는 제어가 사용자에 의하여 수정 될 수 있는가를 지정한다.
설정 된면, readonly 애트리뷰트는 엘레멘트에 다음 효과를 갖는다.
INPUT, TEXTAREA는 readonly 애트리뷰트를 지원한다.
어떻게 읽기 전용 엘레멘트가 표현되는 방법은 사용도구에 따라 다르다.
주석: readonly 애트리뷰트의 값을 탄력성있게 수정하려면 스그립트(script)를 사용하는 방법 뿐이다.
이 항목들 사용도구 폼 데이터의 처리 대리자(agent)에게 송신 방법을 설명한다.
FORM 엘레멘트의 method(방법) 애트리뷰트는 폼(form)을 처리 대리자에게 보내는데 사용되는 HTTP 방법(method)을 지정한다. 이 애트리뷰트는 다음 두가지 값을 가질 수 있다.
"get" 방법은 폼이 다른 효과(side-effects)를 유발시키지 않을 때에 사용하여야 한다. 많은 데이터베이스(database) 검색들은 보이는 다른 효과(side-effect)가 없이 이상적인 "get" 방법이 적용된다.
예를 들어, 만일 폼이 데이터베이스를 수정하거나, 서비스에 등록(subscription)하는 등, 서비스가 다른 효과를 유발하는 폼의 처리를 한다면, "post" 방법이 사용되어야 한다.
주석: "get" 방법은 폼 데이터 세트의 값을 ASCII 글자로 제한한다. enctype="multipart/form-data"와 함께 사용하는 "post" 방법 만이 전체 [ISO10646] 글자 세트를 커버하도록 지정되었다.
성공적 제어(successful control)는 유효한 송신(submit)이다. 모든 성공적 제어는 송신되는 폼 데이터 세트(form data set)의 부분으로 그 제어 이름과 그 현재값의 짝을 갖는다. 성공적 제어는 FORM 엘레멘트 안에서 정의되고 제어 이름을 가져야한다.
그러나:
만일 폼이 송신되는데 제어가 현재값을 가지고 있지 않으면, 사용도구는 성공적 제어로 처리하지 말아야한다.
또 한 사용도구는 다음과 같은 경우에 성공적 제어로 간주하지 말아야한다.
감춰진 제어(hidden control)와 스타일쉬트(style sheet) 설정 때문에 표현되지 않은 제어는 성공적이 될 수 있다. 예를 들어:
<FORM action="..." method="post"> <P> <INPUT type="password" style="display:none" name="invisible-password" value="mypassword"> </FORM>
이는 값이 이름 "invisible-password"와 짝이되어 폼과 함께 송신(submit)된다.
송신 단추(submit button)를 활성화 하는 등으로 사용자가 폼을 송신하면, 사용도구는 다음과 같이 처리한다.
폼 데이터 세트(form data set)는 성공적 제어로 부터 제어 이름(control-name)과 현재값(current-value) 짝들로 구성 된 일련의 데이터이다.
폼 데이터 세트는 FORM 엘레멘트의 enctype 애트리뷰트에서 지정 된 컨텐트 타입(content type)에 의하여 엔코딩된다.
최종적으로, 엔코딩 된 데이터는 action 애트리뷰트로 지정 된 처리 대리자(processing agent)에게 method 애트리뷰트에 의하여 지정 된 프로토콜(protocol)를 사용하여 보내진다.
이 규격은 폼에 사용 될 수 있는 모든 유효한 송신 방법들이나 컨텐트 타입들을 규정하지 않았다. 그러나, HTML 4 사용도구는 다음 경우들의 처리 방법을 지원하여야 한다.
action 또는 method의 다른 값에서는, 작동이 지정되어 있지 않았다.
사용도구는 HTTP "get"과 "post" 이전(transaction)의 송신을 표현하여야 한다.
FORM 엘레멘트의 enctype 애트리뷰트는 서버에 송신을 위하며 폼 데이터 세트(form data set)의 엔코드에 사용 된 컨텐트 타입(content type)을 지정한다. 사용도구는 아래 목록의 컨텐트 타입을 지원하여야 한다. 다른 컨텐트 타입들의 작동이 지정되어 있지 않다.
URI 애트리뷰트 값에서 앰퍼샌드("&") 에스케이핑(escaping)도 참고하라.
이는 컨텐트 타입(content type)의 디폴트 값이다. 이 컨텐트 타입으로 송신되는 폼은 다음과 같이 엔코딩되어야 한다.
주석: 과거 버전 부합성 문제, "multipart/form-data"와 기타 컨텐트 타입(content type)들과의 관계, 성능 문제 등을 포함하여, 화일 업로드(upload)에 대 한 추가적인 정보는 [RFC2388]을 참조하라.
부록의 폼의 보안 문제를 참조하라.
컨텐트 타입 "application/x-www-form-urlencoded"는 많은 양의 이진수(binary) 데이터 또는 비아스키(non-ASCII) 글자를 포함하는 텍스트에서는 효과적이 아니다. 화일, 비아스키 데이터, 이진수 데이터을 포함하는 폼의 송신(submit)에는 컨텐트 타입(content type) "multipart/form-data"가 사용되어야 한다.
이진(binary) "multipart/form-data"는 [RFC2045]에 소개 된 모든 복수 MIME 데이터 흐름의 규칙을 따른다. "multipart/form-data" 정의는 [IANA] 리지스트리(registry)에 있다.
"multipart/form-data" 메세지는 성공적 제어 부분들의 연속을 포함하여 나타낸다. 각 부분들은 문서에 나타나는 제어와 상응하는 같은 순서에따라, 처리 대리자(processing agent)에게 보내 진다. 부분의 구획은 어떤 데이터에도 나타나지 않아야 하며, 그 방법은 이 규격의 법위 밖이다.
모든 복수 MIME 타입들과 같이, 각 부분은 디폴트가 "text/plain"인 선택적 "Content-Type" 헤더(header)를 갖는다. 사용도구는 "charset" 파라메터(parameter)에 의하여 이루어지는 "Content-Type" 헤더를 제공하여야 한다.
각 부분은 다음을 포함 할 것이다.
그래서, 제어 이름 "mycontrol" 인 예제에서, 해당 부분이 지정되었다.
Content-Disposition: form-data; name="mycontrol"
모든 MIME 송신에서와 같이, "CR LF"(`%0D%0A')가 데이터의 열(line)을 구별하기 위하여 사용된다.
각 부분은 엔코드 될 수 있고, 만일 그 부분의 값이 디폴트 엔코딩 (7BIT)과 일치하지 않으면[RFC2045 항목 6 참조], "Content-Transfer-Encoding" 헤더(header)가 제공되어야 한다.
만일 그 화일 내용들이 폼과 함께 송신되면, 그 화일 입력은 적정한 컨텐트 타입으로 지정되어야한다(예를 들어, "application/octet-stream"). 만일 단일 폼 엔트리의 결과로 복수(multiple) 화일들이 돌아온다면, 그 것들은 "multipart/form-data" 안에 깔려 있는(embedded) "multipart/mixed"로 돌아와야한다.
사용도구는 각 송신(submit) 화일의 화일 이름 제공을 시도하여야 한다. 그 화일 이름은 'Content-Disposition: form-data' 헤더의 "filename" 파라메터로, 또는, 복수(multiple) 화일의 경우, 부분의 'Content-Disposition: file' 헤더 안의 "filename" 파라메터로 지정 될 수 있다. 만일 사용자의 운영 체계에서 그 화일 이름이 US-ASCII가 아니면, 그 화일 이름은 대략적으로 되거나 또는 [RFC2045]의 방법을 사용하여 엔코드가 될 수 있다. 이것은, 예를 들어, 업로드 된 화일이 서로 참조(예를 들어, TeX 화일과 그의 ".sty" 보조 스타일 기재)를 포함 할 경우에 편리하다.
예제는 "multipart/form-data" 엔코딩을 설명한다. 다음의 폼을 가정하자.
<FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data" method="post"> <P> 성명은? <INPUT type="text" name="submit-name"><BR> 보낼 화일은? <INPUT type="file" name="files"><BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </FORM>
만일 사용자가 "Larry"를 텍스트 입력하고 "file1.txt" 화일을 선택하면, 사용도구는 다음 데이터를 되돌려 보낼 것이다.
Content-Type: multipart/form-data; boundary=AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files"; filename="file1.txt" Content-Type: text/plain ... file1.txt의 내용 ... --AaB03x--
만일 사용자가 두번째 이미지 화일 "file2.gif"을 선택하였다면, 사용도구는 다음과 같은 부분들을 형성 할 것이다.
Content-Type: multipart/form-data; boundary=AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files" Content-Type: multipart/mixed; boundary=BbC04y --BbC04y Content-Disposition: attachment; filename="file1.txt" Content-Type: text/plain ... file1.txt의 내용 ... --BbC04y Content-Disposition: attachment; filename="file2.gif" Content-Type: image/gif Content-Transfer-Encoding: binary ... file2.gif의 내용 ... --BbC04y-- --AaB03x--
| 이전순서 | 다음순서 | 목록 | 엘레멘트 | 애트리뷰트 | 색인 | 원문 |
이 문서(http://trio.co.kr/webrefer/html/interact/forms.html)는 자유로이 연결 사용이 가능함.