본문 : 폼(Form) 요소 #3 - TEXTAREA, SELECT, OPTION, OPTGROUP, DATALIST, BUTTON, KEYGEN, METER, PROGRESS, OUTPUT

폼 요소를 소개하는 마지막 장입니다. HTML5에서 추가된 요소들도 포함되어 있지만 브라우저 지원사항이 제각각임에 유념하세요.

TEXTAREA 요소

textarea 요소는 텍스트 영역(TEXT AREA)을 표시한다. 텍스트 필드가 한 줄짜리 입력 컨트롤이라면 텍스트 영역은 여러 줄짜리 입력 컨트롤이다.

<textarea rows="8" cols="40">
...
</textarea>

cols 속성

cols 속성은 세로 행에 입력될 수 있는 글자 수를 지정한다. 이것은 글자 수에 의해 텍스트 영역의 넓이를 지정하는 것인데 기본값은 20이다. 만약 20자를 넘게 되면 텍스트 영역이 커지는 것이 아니라 스크롤바가 생기면서 원래 저장되었던 텍스트 영역의 넓이는 그대로 유지된다.

maxlength 속성

maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수를 지정한다. 이 속성이 지정되면 최대 글자 수가 초과한 때에는 더이상 글자가 입력되지 않는다. 사용자는 글자수 제한 여부를 알 수 없으므로 텍스트 영역 주변에 최대 글자 수를 알려주는 문구를 제공하는 것이 좋다.

<input type="text" maxlength="140">

wrap 속성

wrap 속성은 줄바꿈을 지정한다. 이 속성은 텍스트 영역을 서버로 전송할 때 입력된 텍스트 흐름을 어떻게 처리할 것인지를 결정한다. 즉 텍스트가 한 행을 다 채웠을 때 자동으로 다음 행으로 줄바꿈이 이루어지게 할 것인지 말 것인지를 wrap 속성으로 지정할 수 있다.

• wrap="off" : 이 속성값은 줄바꿈이 이루어지지 않는다. 한 행을 다 채우더라도 줄바꿈은 일어나지 않고 같은 행에서 텍스트 입력이 계속 이루어진다. 대신 텍스트 영역 하단에 스크롤 바가 생긴다.
• wrap="soft" : 입력된 텍스트를 줄바꿈 없이 전송한다. 물론 텍스트 영역에서 입력할 때는 한 행을 다 채우면 자동으로 다음 행으로 줄바꿈이 일어나지만 전송 시에는 줄바꿈이 일어나지 않는다. wrap 속성은 soft가 기본값이다.
• wrap="hard" : 입력된 텍스트를 줄바꿈이 적용된 상태로 전송한다. 텍스트 영역에서 입력할 때 한 행을 다 채우면 자동으로 다음 행으로 줄바꿈이 일어나는데, 이 상태를 유지한 채 서버로 전송한다.

SELECT 요소

select 요소는 선택 컨트롤(SELECTion control)을 표시한다. 선택 컨트롤은 OPTION 요소를 선택하기 위한 컨트롤이며 옵션 리스트를 메뉴처럼 이용할 수 있도록 고안된 것인데 드롭다운 리스트와 비슷하다고 볼 수 있다.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Volvo Saab Mercedes Audi

• select 와 option 요소는 함께 사용된다.
• select 요소는 선택 컨트롤을, option 요소는 옵션 항목을 표시한다.

multiple 속성

multiple 속성은 다중 선택을 지정한다. 드롭다운 리스트는 기본적으로 한 개의 옵션만 선택할 수 있는데 multiple 속성을 사용하면 한 번에 여러 개의 옵션을 선택할 수 있도록 4개의 옵션이 노출된다.

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Volvo Saab Opel Audi

• 기본 4개의 옵션 노출보다 더 많은 옵션을 노출하려면 size 속성을 사용해야 한다.
• Windows에서는 CTRL 키, Mac OS에서는 커맨드키(Command)를 누른 상태에서 옵션을 선택하면 다중 선택이 이루어진다.

size 속성

size 속성은 선택 컨트롤의 크기(size)를 지정한다. 이 크기는 옵션이 노출되는 표시 영역의 크기를 의미한다.

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Volvo Saab Opel Audi

• 크기를 1로 지정하면 표시 영역은 한 줄만 생긴다.(기본값)
• 속성값이 2 이상이면 전체 옵션을 모두 드러낸다.

OPTION 요소

option 요소는 옵션 리스트(OPTION list)를 표시한다. 옵션 리스트는 사용자가 선택할 수 있는 항목들을 모아둔 것이다.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" selected="selected">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Volvo Saab Opel Audi

• select나 datalist 요소와 함께 사용한다.
• 다른 요소를 포함할 수 없으며 텍스트만 포함할 수 있다.

value 속성

value 속성은 서버로 전송되는 값을 지정한다. 이 속성을 지정하지 않으면 option 요소로 마크업된 텍스트가 서버로 전송된다.

selected 속성

selected 속성은 미리 선택된 옵션을 지정한다. 옵션 리스트는 일정한 기준에 따라 나열되어 있으며 기본적으로 첫 번째 옵션이 선택된 상태로 제공된다. 이러한 기본 선택을 바꾸고 싶다면 selected 속성을 지정하면 된다.

OPTGROUP 요소

optgroup 요소는 옵션 그룹(OPTion GROUP)을 표시한다. 옵션 그룹은 한 개 이상의 옵션이 모여서 만들어진 그룹을 의미한다. 옵션 개수가 많은 경우 비슷한 옵션을 묶어서 구성하면 편의성이 향상된다.

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Volvo Saab Mercedes Audi

• optgroup 요소가 부모 요소, option 요소가 자식 요소로 구성된다.
• label 속성을 지정하면 옵션 그룹의 제목(label)이 생긴다.

BUTTON 요소

button 요소는 버튼(BUTTON)을 표시한다. 버튼은 입력 장치의 한 종류이며 사용자 선택시 프로그램되어 있는 명령어가 선택/실행된다. input 요소를 사용해 버튼을 표시할 수도 있고 두 방식은 기능적으로 차이가 없다.

<button type="button">Click Me!</button>
<button type="submit">전송 버튼</button>
<button type="reset">초기화 버튼</button>

• input 요소와 달리 다른 요소 또는 내용을 포함할 수 있으며 내용은 텍스트든 이미지든 상관없다.
• type="submit" : 기본값이지만 IE6~7은 표준 명세를 따르지 않았다.
• type="button" : 자바스크립트의 도움을 받아 인터페이스를 조작한다. (IE6~7 브라우저의 기본값)
• type="reset" : form 입력 항목들을 초기화하는 기능

button 요소의 디자인을 CSS로 제어하기

button 요소는 웹 브라우저 기본 값으로 회색 배경과 2px 크기의 outset 스타일이 지정되어 있는데 이 값을 다음과 같이 초기화 할 수 있다.

button { border:0; padding:0; background:transparent; cursor:pointer; *overflow:visible; }

*overflow:visible 속성과 값을 추가한 것은 버튼 텍스트 길이에 비례하여 비 정상적으로 버튼의 폭이 커지는 IE 6~7 브라우저 버그를 해결하기 위한 hack 이다.

DATALIST 요소

datalist 요소는 HTML5에서 새롭게 추가된 요소로서 데이터 리스트(DATA LIST)를 표시한다. 데이터 리스트는 사용자가 입력 또는 선택할만한 데이터를 미리 리스트로 만들어 둔 것이다. 이것은 select 요소를 이용한 선택 리스트와 비슷한 것처럼 보이지만 실제로는 큰 차이가 있다.

선택 리스트는 드롭다운 리스트 방식으로 제공되며, 이 리스트에서 어느 한 가지를 선택하는 것이다. 반면에 데이터 리스트는 일반적인 텍스트 필드 형태로 제공되며, 이 리스트에서 어느 한가지를 선택하거나 키워드 입력 방식으로 선택할 수 있다. 이 방식은 autocomplete와 비슷하다. 다만 autocomplete는 브라우저가 사용자가 입력한 키워드를 저장해 두는 것이라면 데이터 리스트는 저작자가 직접 키워드를 리스트화하여 저장해 둔다는 점에서 다르다. 키워드 검색의 중요성이 높아짐에 따라 별도의 프로그램 없이 자동완성 기능을 이용할 수 있도록 datalist 요소가 표준기술로 제안되었다.

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

일반적인 텍스트 필드와 구분이 잘 안되고 텍스트를 입력하는 곳에 마우스 클릭을 해야만 리스트가 표시되는 것이 단점이다.

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE10+	지원	미지원	지원	지원

KEYGEN 요소

keygen 요소는 HTML5에 새롭게 추가된 요소로서 키 생성기(KEY GENerator)를 표시한다. 이 요소는 폼을 전송할 때 개인 키(private key)는 로컬(local key database)에 저장되고 공개 키(public key)는 폼 데이터와 함께 서버로 전송될 수 있도록 한 벌의 키를 생성할 수 잇는 컨트롤을 만든다.

인증 또는 보안을 위해서는 클라이언트(브라우저)와 서버 사이의 상호 확인이 필요한데, 이럴때 필요한 키 값을 keygen 요소에 의해 생성할 수 있다.

<form action="demo_keygen.asp" method="get">
    Encryption: <keygen name="security">
    <input type="submit">
</form>




Encryption:

keytype 속성

keytype 속성은 키 타입을 지정한다. 이 속성은 키 생성을 위한 암호화 방식을 결정하며 아래와 같은 속성값을 가진다.

• keytype="rsa"(기본값)
• keytype="dsa"
• keytype="ec"

challenge 속성

challenge 속성은 질의값을 지정한다. 폼 제출을 위한 인증 절차가 필요할 때 질의값을 공개 키와 함께 서버로 제출하는데 challenge 속성을 지정하지 않으면 빈 문자열이 제출된다.

METER 요소

meter 요소는 HTML5에 새롭게 추가된 요소로서 계기(METER gauge)를 표시한다. 계기는 측정하고자 하는 양이나 방향을 지침의 지시량으로 알아내거나 기록하는 장치를 말한다. 이 요소가 구현된 모습은 마치 진행 상태 바처럼 보이므로 사용상의 혼란이 예상된다. 이 요소는 "현재 디스크 사용량"과 같이 일정한 크기를 표시하기 위한 표준기술이지만 무게, 높이처럼 크기만 나타내는 값을 표현하는 용도로는 적합하지 않다. 따라서 최소, 최대, 낮음, 높음 등 상대적 크기를 파악하는 용도로 사용해야 한다.

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

2 out of 10
60%

meter 요소로 구현된 콘텐츠는 다분히 시각적이며 이 요소를 구현하지 못하는 브라우저도 있을 수 있으므로 텍스트 형식의 대체 콘텐츠를 제공하는 것이 바람직하다.

low 속성

low 속성은 낮은 값의 범위를 지정한다. 계기를 낮은 영역, 중간 영역, 높은 영역, 최적 영역으로 구분할 수 있는데 low 속성은 낮은 영역에 관한 기준 값을 나타내는 것이다.

high 속성

high 속성은 높은 값의 범위를 지정한다. 이 속성은 높은 영역에 관한 기준 값을 나타내는 것이다.

optimum 속성

optimum 속성은 최적값의 범위를 지정한다. 이 속성을 지정하지 않으면 최소값과 최대값의 중간값이 최적값이 된다.

value 속성

value 속성은 실제로 측정된 진짜 데이터를 지정한다.

max 속성

max 속성은 meter에서 인식할 수 있는 최고 값을 지정한다.

min 속성

min 속성은 meter에서 인식할 수 있는 최저 값을 지정한다.

PROGRESS 요소

progress 요소는 진행 상태(PROGRESS)를 표시한다. meter 요소가 완료 상태를 표현하는 것이라면 progress 요소는 진행 상태를 표현하는 것이다. 진행 상태는 정지된 것이 아니라 가변적이며 최대값과 현재값에 의해 계산된다.

meter 요소와 마찬가지로 progress 요소로 구현된 콘텐츠는 다분히 시각적이며 이 요소를 구현하지 못하는 브라우저도 있을 수 있으므로 텍스트 형식의 대체 콘텐츠를 제공하는 것이 바람직하다. 그리고 측정 단위를 지정할 수 있는 규격이 없으므로 현재로서는 title 속성을 사용하여 측정 단위를 표현한다.

진행 상태는 현재까지의 진행 상태를 알고 있는 경우와 모르는 경우로 구분할 수 있다. 알고 있는 때에는 최대값과 현재값의 계산에 따라 진행 상태 바가 나타나지만 모르는 때에는 현재값이 없으므로 진행 상태 바가 나타나지 않는다.

Downloading ...
<progress value="5000" max="10000">
    <span id="status">50</span>%
</progress>

Downloading ... 50%

이 요소는 value 속성값을 자바스크립트와 연동하여 동적으로 다운로드 상태를 제공할 수 있다.

OUTPUT 요소

output 요소는 HTML5에서 새롭게 추가된 요소로서 계산 결과(OUTPUT)를 표시한다. 이 요소는 계산된 데이터를 보여주기 위한 것이며 데이터가 계산되려면 입력을 위한 input, meter, progress 요소 등 입력 컨트롤과 계산을 위한 스크립트가 필요하다.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

0 100 + =

한 화면에서 입력과 출력이 함께 이루어진다면 입력과 출력 상황을 구분시키기가 어렵다. 따라서 출력된 정보임을 분명하게 밝혀줄 수 있는 요소가 필요하며, 이럴때 output 요소를 사용한다.

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	지원	지원	지원

아래의 폼 요소들도 참고하세요.

• 본문 : 폼(Form) 요소 - FORM, FIELDSET, LEGEND
• 본문 : 폼(Form) 요소 #2 - LABEL, INPUT