[상호작용-웹표준 교과서]1. 폼 설치

1. 폼의 개요

- 폼은 웹 페이지가 상호작용할 수 있게 만들기 위해 꼭 필요한 것이다.

- (X)HTML 은 문서를 서버에 미리 보관해두고 리퀘스트에 따라 서버에 있는 문서를 브라우저에 송신하지만, CGI 등은 웹 페이지에서 사용자의 움직임에 따라 해당하는 내용을 (X)HTML문서에 생성하거나 데이터베이스를 참조하여 처리한 뒤 브라우저에 송신한다. 즉 동적으로 문서를 생성/처리하는 점에 차이가 있다.

2. 폼의 정의(form 요소)

- 폼의 범위를 다음과 같이 정의한다.

 - 폼을 프로그램과 관련시키기 위해 form에 action 속성과 method 속성을 다음의 형식으로 지정한다.

 - 그 밖의 속성

3. 기본적인 컨트롤(input 요소)

- 폼 안에 기본적인 컨트롤을 생성하는 데는 인라인 요소인 input 요소를 사용한다. input은 빈 요소이기 때문에 <input/> 이라는 서식으로 기술한다.
- type 속성에 특정 값을 지정함녀 이름이나 비밀번호의 입력란, 체크박스, 라디오버튼, 송신버튼이나 리셋버튼 등 다양한 종류의 컨트롤을 생성할 수 있다.

 # 다음의 속성도 중요하다.

 - name = "이름" : 컨트롤의 이름을 지정한다. type="submit", type="reset" 이외에는 필수 속성으로 되어 있다.
 - value= "값" : 컨트롤의 종류에 따라, 다음과 같이 값의 의미가 달라진다.

• type="text", type =" password"    : 입력 필드의 초기값.
• type="checkbox", type="radio"    : 선택 상태일 때 송신되는 데이터.
• type="submit" , type="reset", type="button" : 버튼 위에 표시되는 라벨.
• type="image", type="hidden" : 송신되는 데이터
• type="file" : 선택파일명의 초기값

 - size="폭" : 컨트롤의 폭을 지정한다. 

• type="text", type="password" 일 때는 문자수, 그밖의 경우는 픽셀값, size 속성을 지정하지 않으면 컨트롤의 폭은 브라우저에 의존한다. 

# 체크박스와 라디오버튼의 관련성 부여

- 체크박스(type="check")나 라디오버튼(type="radio")은 보톤 여러 개 사용하여 사용자가 임의로 선택하게 한다.  복수의 체크박스나 라디오 버튼을 서로 관련성 있게 만드는(하나의 그룹으로 인식시킨다) 데는 name 속성으로 공통의 이름을 각 input 요소에 지정해야 한다.

# 히든 필드의 지정장소와 사용법

- form 요소의 범위라면 어떤 위치라도 좋지만 form 요소 직후에 지정하는 것이 일반적이다.
- 히든 필드는 데이터의 수취인을 지정하거나, 송신한 뒤에 표시되는 페이지를 지정할 때 사용하는 것이 일반적이다. type="hidden"과 조합하여 name 속성, id 속성, value 속성을 다음과 같이 지정한다.

 - 그 밖의 속성

 4. 텍스트에리어(textarea 요소)

- 여러 줄로 된 텍스트 필드를 생성하는 데는 인라인 요소인 textarea요소를 사용한다. 한 줄인 텍스트필드와 차이는 텍스트에어리어 안에서 임의로 줄이 바뀌는 점에 있다.

 # 그 밖의 속성

5. 셀렉트 메뉴(select 요소, option 요소)

- 셀렉트 메뉴를 생성하는 데는 인라인 요소인 select 요소와  option 요소를 사용한다. 셀렉트 메뉴는 드롭다운메뉴나 풀다운메뉴라고도 하며, 복수의 항목에서 사용자가 임의로 항목을 선택할 수 있게 목록을 제공한다.

# select 요소

- select 요소는 셀렉트메뉴 전체를 정의하는 요소이다.

 # option  요소

# 항목의 그룹화(optgroup 요소)

- 셀렉트메뉴의 항목(option 요소)를 그룹화하려고 optgroup 요소를 사용할 수 있다. 항목이 많으면 optgroup 요소로 그룹화함으로써 사용성이 높은 셀렉트메뉴가 될 수 있다.
- 다음은 중요한 요소이다.

• label="라벨" (필수 속성) : 그 그룹의 라벨을 지정한다.

# 그 밖의 속성

-  select 요소, optgroup 요소, option 요소에는 다음의 속성을 추가적으로 지정할 수 있다.
-  disabled = "disabled" : 이들 요소를 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터는 서버에 송신되지 않는다.

6. 버튼(button 요소)

- 버튼을 생성하려면 인라인 요소인 button 요소를 사용한다. 기능적으로는 input 요소로 생성하는 버튼과 같지만 이미지나 텍스트 등을 직접 포함할 수 있으며 더욱 유연한 디지인이 가능하다는 차이가 있다.

# 그 밖의 속성

-  disabled = "disabled" : 이들 요소를 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터는 서버에 송신되지 않는다. 

7. 컨트롤의 라벨 부여(label 요소)

- 각각의 컨트롤에는 name 속성이나 id 속성으로 식별자를 지정할 수 있지만 그것은 데이터 송신상의 식별자이고 화면에서는 확인이 불가능하다. 일부 송신버튼이나 셀렉트메뉴의 항목은 직접 라벨을 지정할 수 있지만 다른 대부분의 컨트롤은 라벨을 가지고 있지 않다.
- 이런 때 label 요소를 이용하여 컨트롤에 라벨을 붙일 수 있다. label 요소에 특정 텍스트를 라벨로 정의함으로써 컨트롤과 관련시킬 수 있으며 동기화가 가능하다. (예컨대 라벨과 체크박스 중 어느쪽을 클릭해도 체크박스에 체크되는 등).

# 명시적 라벨 부여

- label 요소의 for 속성에 컨트롤의 id 속성과 같은 값을 지정하는 방법이다.

- 이 방법은 컨트롤에 핀포인트로 라벨을 부여하기 때문에 다음과 같은 범용적인 장점이 있다.

• 하나의 컨트롤에 복수의 라벨을 붙이는 것이 가능하다.
• label 요소와 컨트롤은 반드시 인접하고 있을 필요가 없고 다른 요소를 사이에 두고 있어도 좋다.

# 암묵적 라벨 부여

- label 요소의 범위에 텍스트와 컨트롤을 포함하는 방법이다. 이 경우 label 요소의 범위에는 하나의 컨트롤만 포함할 수 있다. 텍스트는 컨트롤의 앞뒤 어디에 있어도 상관없지만 label 요소의 범위에 있어야 한다.

- 이 방법은 명시적으로 라벨을 부여하는 것과 달리 다음 같은 단점이 있다.

• 하나의 컨트롤에 복수의 라벨을 붙이는 것이 불가능하다.
• 텍스트와 컨트롤은 반드시 label 요소에 포함되지 않으면 안 되기 때문에 표를 사용하여 텍스트와 컨트롤을 다른 셀에 배치하는 것은 불가능하다. 

- 일부 브라우저는 암묵적 라벨 부여를 지원하지 않고 명시적 라벨 부여가 아니면 텍스트가 라벨로서 인식되지 않는 점에 주의해야 한다.

8. 컨트롤의 그룹화(fieldset 요소.legend 요소)

- 복수의 컨트롤(라벨포함)을 폼 안에서 그룹화하여 폼을 더욱 정밀하게 구조화할 수 있다.

- 컨트롤을 그룹화하려면 fieldset요소로 그룹화하는 범위를 정의한다. 많은 브라우저에서 fieldset 주위에 자동으로 보더가 생긴다.

- fieldset 요소 바로 뒤에 legent 요소를 지정함으로써 그룹화한 범위의 이름을 캡션으로 표시할 수 있다. legend 요소는 fieldset 요소의 바로 뒤에 한 번만 출현할 수 있다.

- 많은 브라우저에서는 위와 같이 fieldset 요소의 보더 중간에 걸쳐 legend 요소가 표시된다.

9. 폼의 접근성(tabindex 속성. accesskey 속성)

- accesskey 속성 값에 알파벳을 지정하면 브라우저의 키보드 단축키와 충돌할 가능성이 있다. 따라서 값에는 숫자를 지정하는 것이 무난하지만 다음 같은 단점이 있다.

• '0'~'9'까지의 값에 한정된다.
• 예컨대 이름의 입력란에 사용하는 단일행 텍스트필드에 'n'이 아니라 '2'라고 지정하면 사용자의 직감적인 조작을 지원하지 못한다.

- 라벨이 붙어 있는 컨트롤은 라벨과 컨트롤 어느쪽에 accesskey 속성을 지정해도 상관없지만 tabindex 속성은 직접 컨트롤에 지정하지 않으면 안 된다는 차이가 있다.