W3C17 폼(form)Trio 홈페이지
목차
  1. 폼의 소개
  2. 제어(Control)
    1. 제어 타입(type)
  3. FORM 엘레멘트
  4. INPUT 엘레멘트
    1. INPUT로 생성되는 제어타입
    2. INPUT 제어를 갖는 예제
  5. BUTTON 엘레멘트
  6. SELECT, OPTGROUP, OPTION 엘레멘트
    1. 사전 선택 된(pre-selected) 선택 사항
  7. TEXTAREA 엘레멘트
  8. ISINDEX 엘레멘트
  9. 라벨(label)
    1. LABEL 엘레멘트
  10. 폼에 구조 추가: FIELDSET, LEGEND 엘레멘트
  11. 엘레멘트에 초점(focus) 주석
    1. 탭에 의한 항해(tabbing navigation)
    2. 접속키(access key)
  12. 불활성과 읽기 전용 제어
    1. 불활성(disabled) 제어
    2. 읽기 전용(read-only) 제어
  13. 폼 송신(submission)
    1. 폼 송신 방법(method)
    2. 성공(successful) 제어
    3. 폼 데이터 처리(processing)
    4. 폼 컨텐트 타입

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>

귀하의 부라우저로(실제 작동은 않함):

남,

주석: 이 규격에는 추가적인 상세 폼에 대한 주석이 포함되어 있다.

17.2 제어(control)

사용자는 폼(form)을 이름지워진 제어(control)로 작용시킨다.

제어의 제어 이름(control name)name 애트리뷰트로 주어진다. FORM 엘레멘트 안에서 name 애트리뷰트의 제어하는 범위는 FORM 엘레멘트 내부이다.

각 제어(control)는 최초값과 현재값 두가지를 다 가지고 있으며, 둘 다 문자열이다. 최초값과 제어에 의하여 주어지는 가능한 값에 대해서는 각 제어의 정의를 참조하라. 일반적으로, 제어의 "최초값"은 제어 엘레멘트의 value 애트리뷰트로 지정 될 수 있다. 그러나, TEXTAREA 엘레멘트의 최초값은 그 내용으로 주어지고, 폼(form)에 있는 OBJECT 엘레멘트의 최초값은 오브젝트의 적용(이 규격의 범위 밖임)에 의하여 결정된다.

제어의 "현재값"(current value)은 최초값에 먼저 입력 된 것이다. 그러므로, 제어의 현재값은 사용자의 입력과 스크립트(script)를 통하여 수정 될 수 있다.

제어(control)의 최초값은 변경되지 않는다. 그래서 폼이 재설정(reset)되면, 각 제어의 현재값은 최초값으로 재설정된다. 만일 제어가 최초값을 가지고 있지 않았으면, 폼을 재설정했을 때의 효과는 정의되지 않았다.

폼이 처리를 위하여 송신(submit)되면, 몇개의 제어들은 그들의 이름과 현재값의 짝을 갖고, 폼의 이들 짝들과 같이 송신된다. 이름과 값의 짝이 송신 된 제어를 성공적 제어(successful control)라한다.

17.2.1 제어(control) 타입(type)

HTML에서 다음 제어 타입들을 아래와 같이 정의한다.

button(단추)
제작자는 다음의 세가지 단추(button) 타입을 만들 수 있다.

제작자는 BUTTON 엘레멘트 또는 INPUT 엘레멘트로 단추(button)를 만든다. 단추 타입의 세부사항을 위하여 이 엘레멘트들의 정의를 참조하라.

주석: 제작자는 BUTTON 엘레멘트가 INPUT 엘레멘트보다 더 풍부한 표현 능력을 제공한다는 점을 주시하라.

checkbox(체크박스)
체크박스와 레디오 단추(radio button)는 사용자에 의하여 선택 될 수 있는 on/off 스위치이다. 제어 엘레멘트의 selected 애트리뷰트가 선택되면 스위치가 "on"이 된다. 폼(form)이 송신 될 때, "on" 된 체크박스 제어 만 성공적(successful)이 된다.

한 폼의 여러 첵크박스들은 같은 제어 이름을 갖을 수 있다. 그래서 예를 들어, 체크박스에서 사용자는 같은 특성의 여러개의 값을 선택 할 수 있다. 체크박스 제어를 만들기 위하여 INPUT 엘레멘트가 사용된다.

radio button(레디오 단추)
레디오 단추는 여러개의 같은 제어 이름을 갖을 때, 서로 배타적이라는 것 이외에는 체크박스와 같다. 하나가 "on"으로 되면, 같은 이름을 가진 다른 모든 스위치는 "off"가 된다. 레디오 단추 제어를 만들기 위하여 INPUT 엘레멘트가 사용된다.
같은 제어 이름의 레디오 단추에 최초 아무 것도 "on"으로 설정되지 않았으면, 사용도구가 어떤 제어를 "on"으로 선택 할 것인가는 정의되지 않았다. 주석. 이 경우 현재의 적용은 서로 다른데, 현재의 규격은 그 것을 지정한 RFC 1866([RFC1866] 8.1.2.4 항)과 다른데 다음과 같이 기술되어 있다:
항상 레디오 단추들 중에 꼭 한개 만 선택(checked)된다. <INPUT> 엘레멘트의 레디오 단추들 중에 아무 것도 `CHECKED'로 지정되지 않았으면, 사용도구는 그 중 제일 먼저 레디오 단추를 처음에 선택하여야 한다.

사용도구에 따라 다르므로 작성자는 확실히 그 레디오 단추 중 한개를 최초에 "on"으로 설정하여야 한다.

menu(메뉴)
메뉴는 사용자에게 어느것을 선택 할 것인가의 선택을 제공한다. SELECT 엘레멘트는 OPTGROUPOPTION 엘레멘트와 결합하여 메뉴를 생성한다.
텍스트 입력(text input)
제작자는 사용자의 텍스트를 입력을 위하여 두 종류의 제어를 만들 수 있다. INPUT 엘레멘트는 한 열(line)의 입력 제어를 만들고, TEXTAREA 엘레멘트는 여러 열의 입력 제어를 만든다. 두 경우 다 입력 된 텍스트는 제어의 현재값이된다.
화일 선택(file select)
이 제어 타입은 이들 내용이 폼(form)과 함께 송신(submit) 될 수 있도록 사용자가 화일을 선택하게한다. 화일 선택 제어를 만들기 위하여 INPUT 엘레멘트가 사용된다.
감추기 제어(hidden control)
제작자는 표현되지 않고 값을 폼(form)과 함께 송신(submit) 할 수 있는 제어를 생성 할 수 있다. 제작자가 일반적으로 이 제어 타입을 클라이언트와 서버 사이의 교환 동안 정보를 저장하는데 사용한다. 표현 없는 HTTP 의 특성 때문에, 이 교환은 그렇지 않으면 손실 될 수 있다[RFC2068 참조). 감추기 제어를 만들기 위하여 INPUT 엘레멘트가 사용된다.
오브젝트 제어(object control)
제작자는 폼 안에 다른 제어들과 함께 송신(submit)되는 연결 값 같은 일반적인 오브젝트를 삽입 할 수 있다. 오브젝트 제어를 만들기 위하여 OBJECT 엘레멘트가 사용된다.

제어들를 만들기 위하여 사용되는 엘레멘트들은 일반적으로 FORM 엘레멘트 안에 위치한다. 그러나 사용자 인터페이스(interface)를 만들기 위하여 사용 될 때, FORM 엘레멘트 선언 밖에도 위치 할 수 있다. 이는 본질적 이벤트(intrinsic event)에서 다루었다. 폼(form) 밖의 제어는 성공적인 제어가 될 수 없음에 주의하라.

17.3 FORM 엘레멘트(element)

<!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 -- 지원 글자 세트 목록 --
>

시작태그: 필요 함, 종료태그: 필요 함

애트리뷰트의 정의

action = uri [대소문자 타입 참조: CT]
이 애트리뷰트는 폼(form) 처리 대리자(agent)를 지정한다. HTTP URI 이외의 다른 값에 대한 사용도구의 처리에 대한 정의는 되어있지 않다.
method = get | post [대소문자 구별 없이: CI]
이 애트리뷰트는 폼 데이터 세트를 송신하는데 어떤 HTTP 방법을 사용 할 것인가를 지정한다. 가능 한 값은 대소문자 구별 없이 "get"(디폴트)과 "post"이다. 용법에 대한 정보는 폼 송신을 참조하라.
enctype = content-type [대소문자 구별 없이: CI]
이 애트리뷰트는 method의 값이 "post"일 때, 폼을 서버에 송신하는데 사용되는 컨텐트 타입(content type)을 지정한다. 이 애트리뷰트의 디폴트 값은 "application/x-www-form-urlencoded"이다. 값 "multipart/form-data"INPUT 엘레멘트, type="file"과 결합하여 사용하여야 한다.
accept-charset = charset list [대소문자 구별 없이: CI]
이 애트리뷰트는 이 폼을 처리하는데 서버가 받아야 하는 입력 데이터의 글자 엔코딩 목록을 지정한다. 그 값은 공간과/또는 컴마로 분리되는 charset 값들의 목록이다. 사용자는 이 목록을 배타적-또는(exclusive-or) 목록으로 해석하여야 한다. 말하자면 서버는 받는 개별 입력(entity: 엔티티) 글자에 따라를 글자 엔코딩을 할 수 있어야 한다.

이 애트리뷰트의 디폴트 값은 예약 된 문자열 "UNKNOWN"이다. 사용도구는 이 값을 FORM 엘레멘트를 포함하는 문서를 송신하는데 사용 된 글자 엔코딩으로 해석 할 수 있다.

accept = content-type-list [대소문자 구별 없이: CI]
이 애트리뷰트는 서버의 이 폼 처리가 바르게 되도록 하는 컴마로 분리 된 컨텐트 타입(content type)의 목록을 지정한다. 사용도구는 사용자가 서버에 보낼 화일을 선택 했을 때, 규격에 맞지 않는 화일들을 솎아 내기 위하여 이 정보를 사용 할 수 있다(type="file"일 때 INPUT 엘레멘트 참조).
name = cdata [대소문자 구별 없이: CI]
이 애트리뷰트는 엘레멘트에 이름을 주어 스타일쉬트나 스크립트에서 참조 할 수 있게 한다. 주석. 이 애트리뷰트는 과거 버전의 규격 부합성을 위하여 포함하었다. 새로운 적용은 엘레멘트를 인식하기 위하여 id 애트리뷰트를 사용하여야 한다.
다른 곳에서 정의 된 애트리뷰트

FORM 엘레멘트는 제어(control)를 담는 용기로 작용한다. 이것이 다음을 지정한다.

폼은 폼 제어 외에 텍스트와 문단, 목록 등의 작성 부분을 포함 할 수 있다.

다음 예제는 송신(submi)되면 프로그램 "adduser"에 의하여 처리되는 폼을 보여준다. 이 폼은 HTTP "post" 방법을 사용하여 보내진다.

<FORM action="http://somesite.com/prog/adduser" method="post">
 ... 폼(form)의 내용 ...
</FORM>

사용도구들이 서버들을 위하여 어떻게 폼 데이터를 준비해야 하며, 어떻게 반응해야 하는가에 대한 정보는 폼의 송신을 참조하라.

주석: 서버들의 받은 폼 데이터의 처리에 대 한 추가적 사항은 이 규격의 범위를 벋어난다.

17.4 INPUT 엘레멘트(element)

<!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 타입 목록 --
>

시작태그: 필요 함, 종료태그: 사용 금지

애트리뷰트의 정의

type = text | password | checkbox | radio | submit | reset | file | hidden | image | button [대소문자 구별 없이: CI]
이 애트리뷰트는 생성되는 제어 타입(control type)을 지정한다. 디폴트 값은 "text"이다.
name = cdata [대소문자 구별 없이: CI]
이 애트리뷰트는 제어 이름(control name)을 지정한다.
value = cdata [대소분자 애트리뷰트 참조: CA]
이 애트리뷰트는 제어의 최초값을 지정한다. type 애트리뷰트의 값이 "radio"나 "checkbox" 인 경우를 제외하고는 선택적이다.
size = cdata [대소문자 중립: CN]
이 애트리뷰트는 사용도구에게 제어의 최초 너비를 알려준다. 이 너비는 type 애트리뷰트의 값이 "text" 또는 "password" 일 경우 그 값은 글자의 갯수를 나타내는 정수로 표시하고, 이를 제외하고는 픽셀(pixel)로 주어진다.
maxlength = number [대소문자 중립: CN]
type 애트리뷰트의 값이 "text" 또는 "password"이면, 사용자가 입력 할 수 있는 최대 글자수를 지정한다. 이 수치는 지정 된 size를 초과 할 수 있는데, 이 경우 사용도구는 화면 굴리기(scroll) 기능을 제공하여야 한다. 디폴트 값은 무한의 수이다.
checked [대소문자 구별 없이: CI]
type 애트리뷰트는 값 "radio" 또는 "checkbox"를 가지면, 이 불린(boolean) 애트리뷰트는 그 단추가 on 된 것을지정한다. 사용도구는 다른 타입에서는 이 애트리뷰트를 무시하여야 한다.
src = uri [대소문자 타입 참조: CT]
type 애트리뷰트 그 값이 "image"이면, 이 애트리뷰트는 송신(submit) 단추를 그래픽으로 정식하는데 사용되는 이미지 화일의 위치를 지정한다.
다른 곳에서 정의 된 애트리뷰트

17.4.1 INPUT로 생성되는 제어(control) 타입(type)

INPUT 엘레멘트 의하여 정의 된 제어 타입type 애트리뷰트의 값에 따라 다르다.

text
한 열의 텍스트 입력 제어(control).
password
"text"와 같으나, 입력 텍스트는 ****와 같이 감추어진 형태로 표현된다. 이 제어 타입은 암호와 같은 예민한 입력에 자주 사용된다. 현재값은 사용자에 의하여 입력 된 텍스트의 값이으로 사용도구에 의하여 표현되지 않는다.
주석: 설계자는 이 기능이 약한 보안 만을 제공한다는 것을 명심해야한다. 암호는 사용도구에 의하여 일반 사용자에게는 가려지지만 서보에는 명확한 텍스트로 송신되어 네트워그(network)의 낮은 수준 접근 허가를 받은 사람들이 다 읽을 수 있다.
checkbox
체크박스(checkbox)를 만든다.
radio
레디오 단추(radio button)를 만든다.
submit
송신 단추(submit button)를 만든다.
image
그래픽 송신 단추(submit button)를 만든다. src 애트리뷰트의 값은 단추를 장식 할 이미지의 URI를 지정한다. 접속성 때문에, 제작자는 alt 애트리뷰트를 통하여, 이미지를 위 한 대체 텍스트를 제공하여야 한다.

이미지 위를 클릭하면, 폼(form)은 송신되고 클릭한 좌표(coordinates)가 서버에 전달된다. x 값은 왼쪽 마진으로 부터 이미지의 왼쪽 끝 까지의 픽셀(pixel) 수 이고, y 값은 위쪽 마진으로 부터 이미지의 위쪽 끝 까지의 픽셀 수 이다. 송신(submit) 된 데이터는 name.x=x-valuename.y=y-value의 값이 될 수 있는데, 여기서 "name"name 애트리뷰트의 값이고, x-valuey-value는 x와 y의 각 좌표값이다.

만일 서버가 클릭 한 위치에 따라 서로 다른 작동들을 하는 것이면, 비 그라픽(non-graphic) 브라우저 사용자는 불이익을 받을 것이다. 그래서, 제작자는 다음의 대체 방식을 고려하여야 할 것이다.

  • 하나의 그래픽 송신 단추 대신에, 각 각 별도의 이미지를 사용하는 복수 송신 단추의 사용. 제작자는 이 단추들의 위치를 제어하기 위하여 스타일쉬트(style sheet)를 사용 할 수 있다.
  • 사용자측 이미지맵을 스크립트(script)와 함께 사용.
reset
재설정 단추(reset button)를 만든다.
button
누름단추(push button)를 만든다. 사용도구는 value 애트리뷰트 값을 그 단추의 라벨(label)로 사용하여야 한다.
hidden
감추어 진 제어(hidden control)를 만든다.
file
화일 선택 제어(file select control)를 만든다. 사용도구는 value 애트리뷰트 값을 초기 화일 이름으로 사용된다.

17.4.2 INPUT 제어(control)를 갖는 예제

다음 예제 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>

17.5 BUTTON 엘레멘트(element)

<!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  -- 엘레멘트에 초점 해제 --
>

시작태그: 필요 함, 종료태그: 필요 함

애트리뷰트의 정의

name = cdata [대소문자 구별 없이: CI]
이 애트리뷰트는 제어 이름(control name)을 지정한다.
value = cdata [대소문자 구별: CS]
이 애트리뷰트는 단추의 초기값을 지정한다.
type = submit|button|reset [대소문자 구별 없이: CI]
이 애트리뷰트는 단추의 타입을 선언하며, 가능한 값은:
다른 곳에서 정의 된 애트리뷰트

BUTTON 엘레멘트 기능에 의하여 만들어진 단추(button)는 INPUT 엘레멘트에 의하여 만들어진 단추와 같으나, 더 풍부한 표현의 가능성을 제공한다. BUTTON 엘레멘트는 내용을 가질 수 있다. 예를 들어, 이미지 기능을 갖는 BUTTON 엘레멘트는 type이 "image"로 설정 된 INPUT 엘레멘트와 같거나 유사하나, BUTTON 엘레멘트는 내용을 가질 수 있다.

보는 사용도구는 INPUT 단추를 단순한 이미지로 표현 할 수 있지 만, BUTTON 단추를 클릭하였을 때, 올라가기/내려가기와 해제의 모양으로 표현 할 수 있다.

다음 예제는 위 예제의 submitreset 단추에 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>

17.6 SELECT, OPTGROUP, OPTION 엘레멘트(element)

<!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) 정의

name = cdata [대소문자 구별 없이: CI]
이 애트리뷰트는 제어 이름(control name)을 설정한다.
size = number [대소문자 중립: CN]
만일 SELECT 엘레멘트가 굴리는(scroll) 목록 상자에 있으면, 이 애트리뷰트는 동시에 보이는 목록에 있는 열(row)의 수를 지정한다. 보는(visual) 사용도구은 SELECT 엘레멘트를 목록 상자(list box)로 표현 할 필요는 없고, 드롭다운(drop-down) 메뉴와 같은 다른 기능을 사용 할 수 있다.
multiple [대소문자 구별 없이: CI]
만일 설정되면, 이 불린(boolean) 애트리뷰트는 복수 선택을 허용하고, 설정되지 않으면, SELECT 엘레멘트는 단일 선택 만을 허용한다.
다른 곳에서 정의 된 애트리뷰트

SELECT 엘레멘트는 메뉴(menu)를 만든다. 메뉴의 각 선택은 OPTION 엘레멘트로 나타난다. SELECT 엘레멘트는 최소 한개의 OPTION 엘레멘트를 가져야한다.

OPTGROUP 엘레멘트는 제작자에게 선택의 논리적 구룹지움을 허용한다. 이는 사용자가 긴 선택 사항 목록으로 부터 선택해야 될 때, 긴 선택 사항의 단일 목록보다, 관계 된 선택들을 구룹지우는 것이 파악하고 기억하기 용이하여 특히 유용하다. HTML 4에서, 모든 OPTGROUP 엘레멘트는 직접 SELECT 엘레멘트 안에서 정의하여야 한다. 말하자면 구룹은 네스트(nest)되지 말아야한다.

17.6.1 사전 선택 된(pre-selected) 선택 사항

사전 선택 된 것이 없거나 여러개가 될 수 있다. 사용도구는 어느 선택이 사전 선택 된 것인지 다음과 같이 판별한다.

<!ELEMENT OPTGROUP - - (OPTION)+ -- 선택 사항 구룹 -->
<!ATTLIST OPTGROUP
 %attrs;                              -- %coreattrs, %i18n, %events --
 disabled    (disabled)     #IMPLIED  -- 이 내용을 불활성화 --
 label       %Text;         #REQUIRED -- 메뉴 계통(hierarchical)에 사용 --
>

시작태그: 필요 함, 종료태그: 필요 함

OPTGROUP 애트리뷰트(attribute) 정의

label = text [대소문자 구별: CS]
이 애트리뷰트는 선택 사항 구룹의 라벨(label)은 지정한다.
다른 곳에서 정의 된 애트리뷰트

주석: 향후 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) 정의

selected [대소문자 구별 없이: CI]
설정되면, 이 불린(boolean) 애트리뷰트는 이 선택 사항 사전 선택 된 것임을 지정한다.
value = cdata [대소문자 구별: CS]
이 애트리뷰트는 제어(control)의 초기값을 지정한다. 만일 이 애트리뷰트가 설정되지 않았으면, 최초값OPTION 엘레멘트의 내용으로 설정된다.
label = text [대소문자 구별: CS]
이 애트리뷰트는 제작자가 선택 사항을 OPTION 엘레멘트의 내용 대신 짧은 라벨(label)로 지정 할 수 있게 한다. 지정되면, 사용도구는 OPTION 엘레멘트의 제어 사용 대신 이 애트리뷰트의 값을 선택 사항 라벨로 사용하여야 한다.
다른 곳에서 정의 된 애트리뷰트

메뉴 선택을 표현 할 때, 사용도구는 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) 메뉴 또는 선택 사항의 구조를 반영하는 기능을 통하여 선택 할 수 있게 한다.

그래픽 사용도구는 다음과 같이 표현 할 것이다.

가능한 OPTGROUP의 표현

이 이미지는 카스케이딩(cascading) 메뉴로 표현 된 SELECT 엘레멘트를 보여준다. 메뉴의 맨 위 라벨(label)은 현재 선택된 값 (PortMaster 3, 3.7.1)이다. 사용자는 두 카스케이딩(cascading) 메뉴를 열지 않았고, 새 값 (PortMaster 2, 3.7)을 아직 선택하지 않았다. 각 카스케이딩 메뉴는 OPTGROUP 또는 OPTION 엘레멘트의 라벨을 디스플레이한다.

17.7 TEXTAREA 엘레멘트(element)

<!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  -- 엘레멘트의 값이 변경되었슴 --
>

시작태그: 필요 함, 종료태그: 필요 함

애트리뷰트의 정의

name = cdata [대소문자 구별 없이: CI]
이 애트리뷰트는 제어 이름(control name)을 지정한다.
rows = number [대소문자 중립: CN]
이 애트리뷰트는 보이는 텍스트의 열(line) 수를 지정한다. 사용자는 이 열 수보다 더 많은 열에 입력 시킬 수 있어야 한다. 사용도구는 내용이 보이는 지역을 초과하였을 때, 제어의 내용을 굴리는(scroll) 수단을 제공하여야 한다.
cols = number [대소문자 중립: CN]
이 애트리뷰트는 보이는 텍스트 열의 보통 입력 너비 글자의 갯수를 지정한다. 사용자는 이 글자 갯수보다 더 많은 글자를 열의 텍스트를 입력 시킬 수 있어야 한다. 그레서 사용도구는 내용이 보이는 지역을 초과하였을 때, 제어의 내용을 굴리는(scroll) 어떤 수단을 제공하여야 한다. 사용도구는 굴릴 필요 없이, 긴 열들을 볼 수 있게, 보이는 텍스트 열들의 자동 줄바꿈을 할 수 있다.
다른 곳에서 정의 된 애트리뷰트

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의 값이 폼고 함께 송신되기 때문에 문서 작성하는 표준 텍스트의 사용하는 것과 다르다.

17.8 ISINDEX 엘레멘드(element)

ISINDEX는 불량한 것이다. 이 엘레멘드는 한 열 텍스트 입력 제어를 만든다. 제작자는 텍스트 입력 제어를 만들기 위하여 INPUT를 사용한다.

공식적인 정의는 변이 DTD를 참조하라.

애트리뷰트의 정의

prompt = text [대소문자 구별: CS]
불량한 것이다. 이 애트리뷰트는 입력칸에 커서를 가져다 놓을 문자열의 자리(prompt)를 지정한다.
다른 곳에서 정의 된 애트리뷰트

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으로 제한되어있다.

17.9 라벨(label)

텍스트 필드(text field), 체크박스(checkbox), 레디오 단추(radio button), 메뉴(menu) 등 대부분은 갖지 않지만, 일부 폼(form) 제어(control)는 자동적으로 단추와 연관 된 라벨을 갖는다.

암시적 라벨을 갖는 제어에서, 사용도구는 value 애트리뷰트 값을 라벨 문자열로 사용하여야 한다.

LABEL 엘레멘트는 암시적 라벨를 가지고 있지 않는 제어의 라벨을 지정하기 위하여 사용된다.

17.9.1 LABEL 엘레멘트(element)

<!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  -- 엘레멘트에 초점 해제 --
>

시작태그: 필요 함, 종료태그: 필요 함

애트리뷰트의 정의

for = idref [대소문자 구별: CS]
이 애트리뷰트는 다른 제어로 정의 된 라벨과 정확하게 연관시킨다. 이것이 있으면, 이 애트리뷰트의 값은 같은 문서에서 다른 제어 id 애트리뷰트의 값과 같아야한다. 없으면, 정의 된 라벨은 엘레멘트의 내용과 연관된다.
다른 곳에서 정의 된 애트리뷰트

LABEL 엘레멘트는 제어(control)에 정보를 첨부하는데 사용 될 수 있다. 각 LABEL 엘레멘트는 정확하게 하나의 폼 제어와 연관된다.

for 애트리뷰트는 다른 명시적 제어(control)의 라벨과 연관한다. for 애트리뷰트의 값은 연관 된 제어 엘레멘트의 id 애트리뷰트의 값과 같아야한다. 한개 이상의 LABELfor 애트리뷰트를 통하여 복수 참조로 생성 된 같은 제어에 연관 될 수 있다.

이 예제는 두개의 정렬 된 텍스트 입력 제어들과 그들에 연관 된 라벨들을 갖는 표(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)의 예를 참조하라.

라벨은 보는 브라우저, 음성 합성 장치에서 읽는 경우 등 사용도구에 따라 다르게 표현 될 수 있다.

17.10 폼에 구조 추가: FIELDSETLEGEND 엘레멘트

<!-- #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) 정의

align = top | bottom | left | right [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 범례(legend)의 필드 세트(fieldset)에 대 한 위치를 지정하며, 가능한 값은:
  • top: 범례가 필드세트의 위쪽에 위치 함. 디폴트 값 임.
  • bottom: 범례가 필드세트의 아래쪽에 위치 함.
  • left: 범례가 필드세트의 위쪽에 위치 함.
  • right: 범례가 필드세트의 아래쪽에 위치 함.
다른 곳에서 정의 된 애트리뷰트

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 안에서 엘레멘트를 스타일쉬트로 정렬하고, 색상과 폰트 정보, 사용자가 현재 투약을 입력하면, 폼의 보는 표현 향상시킬 수 있다.

17.11 엘레멘트에 초점(focus) 놓기

HTML 문서에서, 엘레멘트는 활성화되고 임무를 수행하기 위하여, 사용자는 초점(focus)을 받아야한다. 예를 들어, 지정 된 연결로 가기 위하여 사용자는 A 엘레멘트로 연결을 활성화 시켜야한다. 마찬가지로, 텍스트를 입력시키기 위하여 TEXTAREA에 사용자는 초점을 주어야한다.

엘레멘트에 초점을 주석 위해서 몇가지 방법이 사용된다.

17.11.1 탭에 의한 항해(tabbing navigation)

애트리뷰트의 정의

tabindex = number [대소문자 중립: CN]
이 애트리뷰트는 현재 문서의 텝 순서(tabbing order)에서의 현재 엘레멘트의 위치을 지정하며, 그 값은 0과 32767 사이의 숫치 이어야한다. 사용도구는 앞에나오는 0들을 무시하여야 한다.

탭 순서(tabbing order)는 사용자가 키보드로 항해 할 때, 어떤 엘레멘트가 초점(focus)을 받을 것인가 하는 순서를 지정한다. 탭 순서는 엘레멘트 속에 다른 엘레멘트를 네스트(nest)로 포함 할 수 있다.

초점을 받은 엘레멘트는 사용도구에 의하여 다음 규칙을 따라 항해(navigate)한다.

  1. tabindex 애트리뷰트를 지원하는 엘레멘트들과 양수로 지정 된 것으로 먼저 항해한다. 항해는 가장 낮은 tabindex 값을 갖는 엘레멘트로 부터 높은 값을 갖는 엘레멘트로 진행된다. 그 값은 순서적으로 될 필요가 없고 어떤 특정 한 수치로 시작 될 필요도 없다. 같은 tabindex 값을 갖는 엘레멘트에서는 그 문장에서 먼저 나온 순서로 항해한다.
  2. tabindex 애트리뷰트가 지원되지 않거나 지원되나 그 값이 "0"으로 설정 된 엘레멘트들은 그 다음으로 항해한다. 이 엘레멘트들은 문장에서 글자가 나온 순서로 항해한다.
  3. 중지(disabled) 된 엘레멘트는 텝 순서에 참여하지 않는다.

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) 순서를 정의 할 수도 있다. 텝 순서의 끝이나 시작에 도달하면, 사용도구는 시작이나 끝으로 순환시킬 수 있다.

17.11.2 접속키(access key)

애트리뷰트의 정의

accesskey = 글자 [대소문자 중립: CN]
이 애트리뷰트는 엘레멘트에 접속키를 지정한다. 접속키는 문서 글자 세트의 한 글자이다.
주의: 제작자는 접속키를 지정 할 때 예상 사용자의 입력 방법(method)을 고려하여야 한다.

엘레멘트에 지정 된 접속키(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) 텍스트 또는 어디든 접속키가 적용되는 곳에는 접속키를 포함시킬 것을 추천한다. 사용도구는 그 임무를 강조하고, 다른 글자들과 구별되도록(예를 들어 밑 줄을 긋는 등) 접속키의 값을 표현하여야 한다.

17.12 불활성(disabled)과 읽기 전용(read-only) 제어

사용자 입력이 바람직하지 않거나 필요 없을 때, 제어를 불활성 시키거나 읽기 전용으로 하는 것이 중요한다. 예를 들어, 필요한 데이터를 입력시키기 전에는 폼의 송신(submit) 단추를 불활성화 하기를 원 할 수 있다. 비슷하게, 제작자가 폼과 함께 송신되어야 할 값을 읽기 전용 텍스트로 포함 시키기를 원 할 수 있다. 다음 항목들은 불활성과 읽기 전용 제어를 설명한다.

17.12.1 불활성(disable) 제어(control)

애트리뷰트의 정의

disabled [대소문자 구별 없이: CI]
폼(form) 제어에 설정되면, 이 불린(boolean) 애트리뷰트는 사용자 입력 제어를 불가능하게 한다.

설정되면, disabled 애트리뷰트는 엘레멘트에 다음 효과를 준다.

BUTTON INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA 엘레멘트는 disabled 애트리뷰트를 지원한다.

이 애트리뷰트는 전달되지 만, 지역 선언으로 전달 된 값을 덮어 씌울(override) 수 있다.

불활성 된 엘레멘트의 표현 방법은 사용도구에 따라 다르다. 예를 들어, 일부 사용도구에서는 불활성 된 메뉴 항목, 단추의 라벨 등을 흐리게 표현한다.

이 예제에서, INPUT 엘레멘트는 불활성되었다. 그러므로, 사용자의 입력을 받을 수 없고, 그 값을 폼과 함께 송신 될 수 없다.

<INPUT disabled name="fred" value="stone">

주석: disabled 애트리뷰트의 값을 탄력성있게 수정하려면 스그립트(script)를 사용하는 방법 뿐이다.

17.12.2 읽기 전용(read-only) 제어(control)

애트리뷰트의 정의

readonly [대소문자 구별 없이: CI]
이 폼 제어을 설정하면, 이 불린(boolean) 애트리뷰트는 그 제어의 변경을 금지한다.

readonly 애트리뷰트는 제어가 사용자에 의하여 수정 될 수 있는가를 지정한다.

설정 된면, readonly 애트리뷰트는 엘레멘트에 다음 효과를 갖는다.

INPUT, TEXTAREAreadonly 애트리뷰트를 지원한다.

어떻게 읽기 전용 엘레멘트가 표현되는 방법은 사용도구에 따라 다르다.

주석: readonly 애트리뷰트의 값을 탄력성있게 수정하려면 스그립트(script)를 사용하는 방법 뿐이다.

17.13 폼의 송신

이 항목들 사용도구 폼 데이터의 처리 대리자(agent)에게 송신 방법을 설명한다.

17.13.1 폼의 송신(submit) 방법

FORM 엘레멘트의 method(방법) 애트리뷰트는 폼(form)을 처리 대리자에게 보내는데 사용되는 HTTP 방법(method)을 지정한다. 이 애트리뷰트는 다음 두가지 값을 가질 수 있다.

"get" 방법은 폼이 다른 효과(side-effects)를 유발시키지 않을 때에 사용하여야 한다. 많은 데이터베이스(database) 검색들은 보이는 다른 효과(side-effect)가 없이 이상적인 "get" 방법이 적용된다.

예를 들어, 만일 폼이 데이터베이스를 수정하거나, 서비스에 등록(subscription)하는 등, 서비스가 다른 효과를 유발하는 폼의 처리를 한다면, "post" 방법이 사용되어야 한다.

주석: "get" 방법은 폼 데이터 세트의 값을 ASCII 글자로 제한한다. enctype="multipart/form-data"와 함께 사용하는 "post" 방법 만이 전체 [ISO10646] 글자 세트를 커버하도록 지정되었다.

17.13.2 성공적 제어

성공적 제어(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)된다.

17.13.3 폼 데이터의 처리

송신 단추(submit button)를 활성화 하는 등으로 사용자가 폼을 송신하면, 사용도구는 다음과 같이 처리한다.

일단계: 성공적 제어(successful control)를 인식한다.

이단계: 폼 데이터 세트를 만듬

폼 데이터 세트(form data set)성공적 제어로 부터 제어 이름(control-name)과 현재값(current-value) 짝들로 구성 된 일련의 데이터이다.

삼단계: 폼 데이터 세트를 엔코딩

폼 데이터 세트는 FORM 엘레멘트의 enctype 애트리뷰트에서 지정 된 컨텐트 타입(content type)에 의하여 엔코딩된다.

사단계: 엔코딩 된 폼 데이터 세트의 송신

최종적으로, 엔코딩 된 데이터는 action 애트리뷰트로 지정 된 처리 대리자(processing agent)에게 method 애트리뷰트에 의하여 지정 된 프로토콜(protocol)를 사용하여 보내진다.

이 규격은 폼에 사용 될 수 있는 모든 유효한 송신 방법들이나 컨텐트 타입들을 규정하지 않았다. 그러나, HTML 4 사용도구는 다음 경우들의 처리 방법을 지원하여야 한다.

action 또는 method의 다른 값에서는, 작동이 지정되어 있지 않았다.

사용도구는 HTTP "get"과 "post" 이전(transaction)의 송신을 표현하여야 한다.

17.13.4 폼의 컨텐트 타입(content type)

FORM 엘레멘트의 enctype 애트리뷰트는 서버에 송신을 위하며 폼 데이터 세트(form data set)의 엔코드에 사용 된 컨텐트 타입(content type)을 지정한다. 사용도구는 아래 목록의 컨텐트 타입을 지원하여야 한다. 다른 컨텐트 타입들의 작동이 지정되어 있지 않다.

URI 애트리뷰트 값에서 앰퍼샌드("&") 에스케이핑(escaping)도 참고하라.

컨텐트 타입 "application/x-www-form-urlencoded"

이는 컨텐트 타입(content type)의 디폴트 값이다. 이 컨텐트 타입으로 송신되는 폼은 다음과 같이 엔코딩되어야 한다.

  1. 제어 이름(Control name)들과 값들이 아스키 값으로(escaped(된다. 공간 글자들은 `+'으로 대체되고, 그 후 [RFC1738] 항목 2.2에 설명 된 바와 같이 예약(reserved) 글자들이 아스키 값으로(escaped) 된다. 비 알파벳(Non-alpha) 글자들은 퍼센트 기호와 해당 글자의 ASCII 코드에 해당하는 두개의 16진수로 된 `%HH'로 된다. 줄바꿈(line break)은 "CR LF"('%0D%0A')로 된다.
  2. 제어 이름과 값은 문서에 나타나는 순서에 따라 목록화된다. 이름은 그 값과 `='로 분리되고, 제어 이름과 값의 짝은 서로 `&'로 분리된다.

컨텐트 타입 "multipart/form-data"

주석: 과거 버전 부합성 문제, "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" 헤더를 제공하여야 한다.

각 부분은 다음을 포함 할 것이다.

  1. 값이 "form-data" 인 "Content-Disposition" 헤더.
  2. 해당 제어의 제어 이름을 지정하는 name 애트리뷰트. 원래 비아스티(non-ASCII) 글자 세트로 엔코드 된 제어 이름은 [RFC2045]에 소개 된 방법에 따른다.

그래서, 제어 이름 "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--

Trio 홈페이지 문서(http://trio.co.kr/webrefer/html/interact/forms.html)는 자유로이 연결 사용이 가능함.