폼 만들기

폼(form)은 데이터를 주고 받기 위한 방식 또는 수단을 의미한다. 웹은 내용을 읽고 볼 수 있는 매체(media)일 뿐만 아니라 직접 데이터를 입력하여 원하는 결과를 얻을 수 있는 프로그램이기도 하다. 웹은 클라이언트(브라우저)와 서버 사이의 상호작용에 의해 구현된다. 미리 작성된 웹 문서를 서버에 저장해 둔 다음 클라이언트가 어떤 웹 문서를 보여달라고 요청하면, 서버는 해당 웹 문서를 보여준다. 이처럼 웹에서의 상호작용은 대부분 단순하다.

그런데 회원가입이나 상품주문처럼 단순하지 않은 상호작용도 있다. 다양한 사용자 입력과 복잡한 서버측 처리(server-side scripting)가 이루어지는데, 이러한 상호작용을 구현하기 위해서는 ‘폼’이라고 불리는 사용자 인터페이스가 필요하다. 폼은 크게 입력, 선택, 전송, 출력 컨트롤^[137]로 구분되며, 입출력 방식이나 데이터 형식에 따라 컨트롤의 종류가 달라진다.

예제의 경우, 검색, 댓글, Podcast 영역에 폼이 적용될 예정이다. 우선 검색 영역은 검색어를 작성하는 입력 컨트롤과 작성된 검색어를 서버로 보내는 전송 컨트롤로 구성되는데, 이 두 컨트롤 모두 INPUT 요소를 사용하여 구현할 것이다. 그 다음 댓글 영역은 댓글을 작성하는 입력 컨트롤과 작성된 댓글을 서버로 보내는 전송 컨트롤로 구성되는데, 입력 컨트롤은 많은 내용을 작성할 수 있도록 TEXTAREA 요소를 사용할 것이다. 마지막으로 Podcast 영역은 옵션 항목을 선택하는 선택 컨트롤과 선택된 옵션 항목을 서버로 보내기 위한 전송 컨트롤로 구성되는데, 선택 컨트롤은 SELECT와 OPTION 요소를 사용할 것이다.

폼 만들기를 위한 표준 기술

FORM 요소

카테고리	Flow content
콘텐츠 속성	글로벌 속성, accept-charset, action, autocomplete, enctype, method, name, novalidate, target
지원 브라우저

FORM 요소는 폼의 범위(form)를 표시한다. 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(controls)^[138]이 구성되는 영역이며, 이 영역의 시작과 종료 지점은 FORM 요소에 의해 정의되는 것이다. 이처럼 FORM 요소는 브라우저에게 어떤 영역이 폼인지 알려주는 일종의 힌트이므로 FORM 요소는 문서 모양에 영향을 주지 않는다.

초창기 온라인 문서는 주로 디지털화된 정보를 보여주는 정도의 미디어였기 때문에 폼이란 개념이 없었다. 그런데 상호작용이 양방향으로 이루어지면서 사용자로부터 데이터를 수집해야 하는 상황이 발생하였고, 이를 위해 고안된 것이 바로 컨트롤이다. 그리고 이 컨트롤들이 모여 있는 곳이 바로 폼이다.

FORM 요소는 블록 레벨 요소(block-level element)이므로 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다.

<form>

…

</form>

action 속성

action 속성은 실행 애플리케이션(action application)을 지정한다. 실행 애플리케이션은 입력된 데이터를 처리하는 서버 또는 프로그램이다. 이 곳으로 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하며, 이를 위해 action 속성을 사용한다.

<form action =”http://www.example.com/addresscheck.html”>

accept-charset 속성

accept-charset 속성은 승인된 문자 세트(accepted character set encoding)을 지정한다. 일반적으로 HTML 문서에 적용된 문자 세트가 적용된다. 그런데 폼에 입력된 문자를 문서 전체에 적용된 문자 세트로 표현할 수 없는 경우도 있을 수 있다. 이럴 때 accept-charset 속성을 사용하여 적절한 문자 세트를 적용시킬 수 있다.

<form accept-charset=”ISO-8859-1”>

enctype 속성

enctype 속성은 인코딩 타입(encoding type)을 지정한다. 이 속성에 의해 브라우저는 입력된 데이터를 서버로 보낼 때 어떤 타입으로 인코딩해야 하는지 알 수 있는데, 인코딩 타입은 다음과 같이 세 가지 중 하나를 지정한다.

• enctype=”application/x-www-form-urlencoded” : 서버에 보내기 전에 모든 문자를 인코딩하는 방식이며, 폼에 텍스트 데이터를 포함되었을 때 지정한다(기본값).
• enctype=”multipart/form-data : 파일 업로드 컨트롤처럼 문자가 아닌 파일을 전송할 때 사용된다.
• enctype=”text/plain” : 일반 텍스트로 인코딩된다.

<form enctype=”applicaton/x-www-form-urlencoded”>

method 속성

method 속성은 HTTP 메소드(HTTP method)를 지정한다. HTTP 메소드는 서버와 클라이언트(브라우저) 간 데이터를 주고 받기 위한 방식(method)를 의미하는데, 주로 사용되는 방식은 GET 방식과 POST 방식이다. action 속성을 이용하여 입력된 데이터의 전송 위치를 알려주었다면 그 다음에는 어떤 방식으로 입력한 데이터를 전송할 것인지 브라우저에게 알려주어야 하는데, 이 때 method 속성을 이용하여 전송 방식을 지정할 수 있다.

우선 GET 방식은 입력된 데이터가 URL에 의해 전송되므로 암호화하지 않으면 URL만으로도 어떤 데이터를 입력했는지 드러날 수 있다. 그래서 POST 방식에 비해 상대적으로 보안이 취약하고 전송할 수 있는 데이터도 제한적이다. 반면에 POST 방식은 입력된 데이터를 HTTP Body^[139]에 담아 전송하면 서버 측에서 데이터를 처리하는 방식이다. HTTP Body는 URL에 비해 더 많은 정보를 담을 수 있기 때문에 POST 방식은 GET 방식보다 더 많은 양의 데이터를 전송할 수 있으며 상대적으로 보안이 높은 편이다. 그렇다고 POST 방식이 보안 문제를 해결해 주는 것은 아니다. 즉, POST 방식은 GET 방식에 비해 상대적으로 보안에 유리할 뿐이다.^[140]

두 가지 전송 방식을 비교해 보면, GET 방식의 단점이 더 심각하다는 것을 알 수 있다. 이 때문에 GET 방식을 권장하지 않고 있다. 그럼에도 GET 방식을 사용하는 이유는 데이터를 URL 형식으로 표현하기 때문에 링크를 걸거나 즐겨찾기로 등록하기 쉽다는 장점 때문이다.^[141] 즉, 검색엔진 사이트처럼 검색 결과 문서를 링크하거나 다시 복귀했을 때 검색어가 입력된 상태로 검색 결과 문서를 보여줄 수 있는 것이다. 기본값은 GET이므로 method 속성을 지정하지 않으면 데이터는 GET 방식으로 전송된다.

<form action =”http://www.example.com/form.html” method=”post”>

name 속성

name 속성은 폼 이름(form’s name)을 지정한다. 이 속성은 스크립트에서 폼을 참조할 때 필요하다.

<form action =”http://www.example.com/form.html” method=”post” name=”profile\_new”>

novalidate 속성

novalidate 속성은 유효성 미확인(not to be validated)을 지정한다. 이 속성을 지정하면 폼에 입력된 데이터를 서버로 보낼 때 데이터를 체크하지 않는다. 데이터가 올바르게 입력되었는지 체크하는 것이 일반적이다. 그런데 민감하지 않은 데이터를 전송하거나 사용자에게 굳이 입력 오류를 보여주고 싶지 않을 때는 novalidate 속성을 사용하는 것도 한 방법이다.

<form action =”http://www.example.com/form.html” method=”post” name=”profile\_new” novalidate=”novalidate”>

FIELDSET 요소

카테고리	Flow content
콘텐츠 속성	글로벌 속성, disabled, form, name
지원 브라우저

FIELDSET 요소는 관련 있는 폼 필드 세트(form FIELD SET)를 표시한다. 폼 필드 세트는 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다. 서로 다른 입력 상황이 하나의 폼 내에 이루어져야 할 경우가 있다. 예컨대, 개인정보, 결제 정보 등은 각각의 폼으로 구분할 수 있지만, 설계 의도에 따라서는 하나의 폼으로 구성할 수도 있다. 이럴 때 하위 폼(sub form)의 개념으로 FIELDSET 요소를 사용하면 폼 구조를 좀 더 이해하기 쉽게 만들 수 있다. 또한 FIELDSET 요소 내에 또 다른 FIELDSET 요소를 포함시킬 수 있기 때문에 폼을 보다 효과적으로 계층화시킬 수 있다. FIELDSET 요소를 사용할 경우, 반드시 LEGEND 요소를 사용하여 묶인 컨트롤들이 어떤 성격인지 알려주어야 한다.

문서의 구조화  SECTION 요소, ARTICLE 요소, P 요소, DIV 요소 등

폼의 구조화  FIELDSET 요소

<form>

<fieldset>

…

</fieldset>

</form>

form 속성

form 속성은 해당 FIELDSET 요소가 속해 있는 폼(form)을 지정한다. 이 속성을 지정하면 특정 FORM 요소와 FIELDSET 요소의 관계를 명시적으로 연결할 수 있다. 이렇게 연결하면 브라우저는 두 요소 사이의 상호작용이 좀 더 쉽게 이루어질 수 있도록 도울 수 있으며, FIELDSET 요소가 FORM 요소 밖에 있더라도 둘 사이의 관계를 유지시킬 수 있다. 특히, 하나의 FIELDSET 요소가 복수의 FORM 요소와 관계를 맺어야 할 때 효과적이다.

<form id="user">

…

</form>

<p>The fieldset below is outside the form element, but still part of the form.</p>

<fieldset form="user">

<legend>법인등록</legend>

…

</fieldset>

LEGEND 요소

카테고리	해당 사항 없음
콘텐츠 속성	글로벌 속성
지원 브라우저

LEGEND 요소는 FIELDSET 요소의 제목(LEGEND)을 표시한다. FIELDSET 요소를 이용하여 여러 개의 컨트롤들을 묶은 경우 이 묶음이 어떤 성격 또는 용도인지 알려줄 필요가 있을 때 LEGEND 요소를 사용한다. 이 요소를 사용하면 FIELDSET 요소로 묶인 영역을 테두리 선으로 표시한다. 이 요소는 부모 요소(parent element)인 FIELDSET 요소와 함께 사용해야 하므로 FIELDSET 요소의 첫 번째 자식 요소(child element)는 LEGEND 요소가 되어야 한다.

<form>

<fieldset>

<legend>개인정보:</legend>

<label>이름: <input type=”text”></label><br>

<label>주소: <input type=”text”></label><br>

<input type=”submit”>

</fieldset>

</form>

INPUT 요소

카테고리	Flow content, Phrasing content, Interactive content
콘텐츠 속성	글로벌 속성, accept, alt, autocomplete, autofocus, checked, disabled, form, list, max, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value
지원 브라우저

INPUT 요소는 입력 영역(INPUT field)을 표시한다. 입력 영역은 데이터 입력이나 편집을 위한 컨트롤이 위치하는 곳이다. 이 곳에 텍스트 필드, 체크박스, 라디오 버튼, 실행 버튼 등 다양한 입력 컨트롤이 올 수 있는데, 입력 컨트롤의 종류는 type 속성에 의해 지정된다. 즉, INPUT 요소는 입력 컨트롤을 표시하는 것이 아니라 입력 컨트롤이 들어설 자리를 표시해 주는 것이다.

type 속성

type 속성은 INPUT 요소의 타입(type)를 지정한다. 속성값(value)은 입력 컨트롤의 종류를 나타내며, 이에 따라 지정된 입력 컨트롤의 형태가 만들어진다.

type=”value”

type=”text”

속성값을 ‘text’로 지정하면 텍스트 필드(text field)^[142]가 만들어진다. 텍스트 필드는 텍스트를 입력할 수 있도록 만들어진 한 줄짜리 입력 컨트롤을 말한다. type=”text”가 기본값(default)이므로 <input>만 작성하면, <input type=”text”>를 작성한 것이나 다름없다.

텍스트 필드의 세로 크기는 정해져 있으므로 가로 크기만 설정할 수 있다. 크기는 해상도가 아니라 글자 수를 기준으로 정해지는데, 별도로 크기를 설정하지 않으면 기본 크기인 ‘20’이 적용된다. 이 크기는 20글자와 맞먹는 크기라는 사실을 의미한다(언어에 따라 20자보다 적거나 많을 수도 있다) 특별히 입력 제한을 두지 않으면 글자는 얼마든지 입력할 수 있다. 만약 입력 글자 수를 제한하고 싶다면 maxlength 속성을 사용하면 된다.

<input type=”text”>

type=”submit”

속성값을 ‘submit’으로 지정하면 전송 버튼(submit button, 제출 버튼)이 만들어진다. 전송 버튼은 폼(form)을 서버로 보내는 역할을 수행한다. 이 때 전송 버튼은 데이터를 보내는 역할만 할 뿐, 어떻게 어디로 보낼 것인가는 FORM 요소에서 정한다. 버튼 이름(버튼 위에 표시되는 이름)은 value 속성에 의해 지정되는데, 만약 value 속성을 지정하지 않으면 브라우저가 지정하는 이름이 표시된다(대개 ‘전송’, ‘제출’이라는 이름으로 지정되어 있다). 따라서 버튼 이름을 원하는 대로 표시하려면 반드시 value 속성을 지정해야 한다.

<input type=”submit” value=”입력확인”>

type=”reset”

속성값을 ‘reset’으로 지정하면 초기화 버튼(reset button)이 만들어진다. 초기화는 폼에 입력된 값을 초기값으로 설정하는 것을 말한다. 입력 필드가 많지 않은 경우에는 별 문제가 없지만, 만약 회원 가입이나 게시물 입력처럼 입력 필드가 많은 경우에는 초기화 버튼의 제공을 신중하게 검토해야 한다. 버튼 이름을 주의 깊게 읽지 않고 선택하는 상황도 있을 수 있으므로 입력 필드가 많은 경우에는 사용자 스스로 초기화 여부를 신중하게 결정하도록 유도하는 것이 바람직하며, 메시지 박스를 이용하여 한번 더 의사를 물어보는 것이 좋다. 이러한 방식으로 설계하려면 별도의 스크립트가 필요하므로 type=”button”으로 지정하여 사용하는 것이 바람직하다.

<input type=”reset”>	Chrome:
	Firefox:
	Safari :
	Opera:
	IE:
<input type=”reset” value=”입력내용 초기화”>	초기화 결정을 신중하게 유도하기 위해 버튼 이름을 알기 쉽게 작성할 필요가 있다.

type=”button”

속성값을 ‘button’으로 지정하면 푸시 버튼(push button)이 만들어진다. 원래 HTML에는 전송 버튼(submit button)이나 초기화 버튼(reset button)만 있었는데, 웹이 발달하면서 다양한 기능을 수행하기 위한 버튼이 필요했고, 이를 위해 제안된 것이 바로 푸시 버튼이다. 전송 버튼이나 초기화 버튼은 한 가지 목적을 위해 실행되는 버튼이고 그 목적을 위한 기본 기능이 포함되어 있는데 반해, 푸시 버튼은 다양한 용도로 실행되므로 기본 기능을 포함하지 않고 있다. 그래서 기능은 자바스크립트과 같은 클라이언트 사이드 스크립트(client-side scripts)에 의해 지정되어야 한다. value 속성으로 입력된 텍스트는 버튼 이름이며, 이 이름은 실제 버튼 위에 나타난다.

- <input type=”button”> : 버튼을 표시한다 🡪

- <input type=”button” value=”실행”> : 버튼 이름을 표시한다 🡪

- <input type=”button” value=”선택” onclick=”runprocess()”> : 기능을 지정한다 🡪

type=”password”

속성값을 ‘password’로 지정하면 패스워드 필드(password field) ^[143]가 만들어진다. 화면 상에서 읽혀지지 않도록 패스워드 필드에 입력된 문자는 별이나 원 모양의 기호로 표시된다.

<input type=”password”>

type=”file”

속성값을 ‘file’로 지정하면 파일 업로드 컨트롤(file upload control)^[144]이 만들어진다. 파일 업로드 컨트롤은 로컬 컴퓨터에 있는 파일을 선택하기 위한 컨트롤이며(실제 업로드는 전송 버튼에 의해 이루어진다), 파일명이 입력되는 텍스트 필드와 파일 탐색기를 호출하기 위한 버튼으로 구성된다. type=”file”은 파일 업로드 컨트롤만 문서에 표현하는 것일 뿐, 실제 파일 선택은 운영체제에서 의해 이루어진다. accept 속성을 사용하면 브라우저가 지정된 파일 형식(file extension)만 찾을 수 있도록 파일 업로드 컨트롤을 구성할 수도 있다.

<input type=”file” accept=”image/jpeg”>

type=”checkbox”

속성값을 ‘checkbox’로 지정하면 체크박스(check box)가 만들어진다. 체크박스는 선택 여부를 확인하기 위한 입력 컨트롤이며, 입력 상태는 선택(checked)과 미선택(unchecked)으로 구분된다. 즉, 저작자의 질문에 사용자가 ‘yes’ 또는 ‘no’, ‘on’ 또는 ‘off’로 답변하는 것이다. 선택된 항목(checked item)은 체크마크가 나타나고 선택되지 않은 항목(unchecked item)은 체크마크가 나타나지 않는데, 이 때 체크마크는 단순히 표시만 할 뿐 데이터를 전송하지는 않는 것이다. 다시 말해, 체크박스는 선택 또는 미선택 상태만 표시하는 입력 컨트롤인 셈이다.
체크박스는 중복 선택(multi-selection)을 위한 컨트롤이므로 여러 개의 체크박스로 구성될 수 있다. 이 때 서로 관련 있는 체크박스라는 사실을 브라우저에게 알려주기 위해서는 name 속성을 알려주어야 한다. name의 속성값이 같으면 서로 연관된 체크박스로 인식하는 것이다. 앞에서 언급한 것처럼 체크박스는 스스로 데이터를 전송하지 않는다. 데이터를 전송하기 위해서는 별도의 전송 버튼이 필요하다. 전송 버튼이 보내는 데이터는 value의 속성값이며, 선택된 체크박스의 속성값만 서버로 보내게 된다. 다음의 예제에서 value=”korea"가 서버를 위한 정보라면 ‘한국’은 사용자를 위한 정보인 셈이다. 기본적으로 체크박스는 미선택 상태로 제공되지만 체크된 상태로 제공할 때도 있는데, 이런 경우 ‘checked’라는 속성을 사용하면 된다. 그리고 텍스트가 있는 체크박스는 컨트롤(체크박스), 텍스트 순으로 구성하는 것이 원칙이다.

<input type=”checkbox” name=”nation” value=”korea” checked=”checked”>한국<br>

<input type=”checkbox” name=”nation” value=”france”>프랑스

type=”radio”

속성값을 ‘radio’로 지정하면 라디오 버튼(radio button)이 만들어진다. 라디오 버튼은 체크박스와 마찬가지로 선택 여부를 확인하기 위한 입력 컨트롤이다. 그러나 체크박스가 중복 선택을 위한 컨트롤이라면, 라디오 버튼은 단일 선택을 위한 컨트롤이라는 점에서 차이가 있다. 즉, 라디오 버튼은 여러 항목들(items) 중에서 반드시 한 가지 항목만을 선택할 때 사용하는데 이를 위해서는 항목들이 서로 배타적이어야 한다(mutually exclusive). 그래서 라디오 버튼은 On-Off 스위치처럼 어떤 항목을 선택하면 다른 항목의 선택은 해제되어야 하므로 최소 두 개 이상의 항목으로 구성되어야 한다.
체크박스는 “원하는 게 있어? 그렇다면 원하는 것은 몇 개라도 좋으니 선택해 봐. 만약 원하는 게 없다면, 선택하지 않아도 좋아.”라는 의도를 담고 있다. 반면에 라디오 버튼은 “(제시된 것 중에서 반드시 한 가지는 선택해야 하는데) 자! 이거 선택할래? 아니면 저거 선택할래?”라는 의도를 담고 있기 때문에 반드시 어느 한 가지 항목은 선택되어야만 한다. 만약 제시된 항목들을 사용자가 선택하지 않은 상태에서 전송 버튼을 누르게 되면, 브라우저는 첫 번째 라디오 버튼을 선택하여 전송하거나 또는 빈 데이터를 전송하게 되므로 어느 한 가지 항목이 선택된 상태로 구성하는 원칙이다.

<input type=”radio” name=”os” value=”ios” checked=”checked”>iPhone</br>

<input type=”radio” name=”os” value=”android”>Android

type=”number”

속성값을 ‘number’로 지정하면 숫자 필드(number field)가 만들어진다. 숫자 필드는 숫자만 입력할 수 있는데, 키보드로 직접 숫자를 입력하거나 스피너(spinner)를 마우스로 조작하여 숫자를 입력할 수 있다.

<input type=”number”>

type=”range”

속성값을 ‘range’로 지정하면 범위 슬라이더(range slider)가 만들어진다. 범위 슬라이더(slider)는 마우스를 이용하여 숫자 형식의 데이터를 입력하는 컨트롤이다. 이 컨트롤은 type=”number”에 의해 만들어지는 숫자 입력 컨트롤과 같은 용도이지만, 조작 방식은 다르다. 슬라이더는 마우스 전용 컨트롤이고, 입력할 수 있는 범위(range)가 눈에 잘 드러난다는 특징을 갖고 있다. 웹에서 슬라이더를 구현하려면 자바스크립트나 플래시를 사용해야 했고 적지 않은 소스 코드를 작성했어야 했다. 그런데 표준 기술로 제정되면서 별도의 프로그래밍 없이 슬라이더를 구현할 수 있게 되었고 이를 위한 소스 코드도 한 줄이면 충분하게 되었다.

<input type=”range”>

type=”color”

속성값을 ‘color’로 지정하면 컬러 필드(color field)가 만들어진다. 컬러 필드는 색을 입력하는 컨트롤이다. 사용자가 원하는 색을 입력해야 할 경우가 많아졌다. 가령, 맞춤 상품처럼 색을 직접 선택해야 하는 경우, 색을 정확하게 입력하는 것은 아주 중요하다. 컴퓨터는 지정된 색(예, red)이 아닌 경우에는 컬러 코드로 색을 인식한다. 그렇다면 사용자가 직접 컬러 코드를 입력해야 하는데, 대부분의 사용자는 컬러 코드를 잘 알지 못한다. 색을 눈으로 보고 원하는 색을 선택하는 방식이 가장 쉽고 정확하다. 운영체제에는 컬러 픽커(color picker)라는 프로그램이 있고, 사용자들이 이 프로그램에 이미 익숙해 있다. 또한 웹에서도 자바스크립트를 이용하여 운영체제의 컬러 픽커를 자주 사용하고 있다. 이런 추세를 반영하여 컬러 픽커를 사용할 수 있는 입력 컨트롤에 관한 규격이 HTML5에 추가되었다.

<input type=”color”>

type=”date”

속성값을 ‘date’로 지정하면 데이트 필드(date field)가 만들어진다. 데이트 필드는 년, 월, 일을 입력하는 컨트롤이다. 날짜를 표기하는 방식은 다양하다. 일반적으로 년-월-일 순의 표기 방식을 주로 사용하지만, 일부 지역에서는 월-일-년 순으로 표기하기도 한다. 사용자가 하나의 텍스트 필드에 ‘12-09-10’라는 날짜 데이터를 입력할 경우, 사람이든 컴퓨터든 어떤 정보가 년, 월, 일인지 구분하기 어렵다. 이런 이유로 날짜 입력은 구조화된 입력 방식을 따르는 것이 효과적이다. 즉, 연도(year)를 위한 필드, 월(month)을 위한 필드, 일(date)을 위한 필드를 각각 제공하는 것이다. 그러다 보니 입력 필드가 많아졌다. 입력 필드가 많아지면, 만드는 사람은 힘들고 입력하는 사람은 번거롭다. 게다가 폼 구성도 복잡해진다. 이럴 때 운영체제에서 제공하는 날짜 픽커(date picker)를 이용하면 날짜를 효율/효과적으로 입력할 수 있을 뿐만 아니라 폼 구성도 간단해진다. 앞에서 살펴본 컬러 픽커와 마찬가지로 날짜 픽커도 표준 기술로 정의됨에 따라 자바스크립트 없이 날짜 픽커를 사용할 수 있게 되었다.
년, 월, 일을 한꺼번에 선택하는 경우도 있지만, 때에 따라선 년, 월, 일 중 어느 한 가지만 선택해야 하는 경우도 있다. 그리고 시간을 선택해야 하는 경우도 많다. 이처럼 날짜와 시간 선택을 용도에 맞게 구성할 수 있도록 다양한 속성값이 정의되었다. 현재까지 제안된 데이트 필드와 관련된 속성값은 총 6가지다.

<input type=”date”>	년, 월, 일을 선택할 수 있다(시간은 선택할 수 없다)
<input type=”month”>	년과 월을 선택할 수 있다(시간은 선택할 수 없다)
<input type=”week”>	주와 년을 선택할 수 있다(시간은 선택할 수 없다)
<input type=”time”>	시간(시, 분, 초)을 선택할 수 있다
<input type=”datetime”>	날짜(년, 월, 일)와 시간(시, 분, 초)를 선택할 수 있다(표준시간대가 있다)
<input type=”datetime-local”>	날짜(년, 월, 일)와 시간(시, 분, 초)를 선택할 수 있다(표준시간대가 없다)

type=”email”

속성값을 ‘email’로 지정하면 이메일 필드(email field)가 만들어진다. 이메일 주소를 입력해야 하는 경우가 많아졌고, 이미 다양한 방식으로 이메일 주소창을 제공하고 있다. 이메일 주소는 반드시 @와 계정 주소(예, gmail.com)를 포함해야 한다. @와 계정 주소를 포함하지 않은 이메일 주소는 잘못된 데이터이므로 입력되더라도 쓸모 없으므로 입력 과정에서 잘못된 데이터가 입력되지 않도록 거르는 과정이 필요하다. 이런 과정을 자바스크립트를 이용해 왔지만, 이메일 필드가 규격화되면서 브라우저가 직접 유효한지 여부를 확인할 수 있게 되었다.

<input type=”email” value=”등록”>

type=”url”^[145]

속성값을 ‘url’로 지정하면 URL 필드(url field)가 만들어진다. URL 필드는 최소 1개 이상의 ‘.’(dot)을 포함해야 하므로 형식에 맞지 않은 데이터를 걸러낼 수 있고, URL 주소 입력에 도움되는 환경을 만들어 줄 수도 있다. 다른 형식의 문자가 입력되면 브라우저가 툴팁을 통해 입력 형식을 알려줄 수도 있다.

<input type=”url”>

<input type=”submit”>

type=”tel”^[146]

속성값을 ‘tel’로 지정하면 전화번호 필드(telephone number field)이 만들어진다. 전화번호 필드에는 숫자만 입력될 수 있으므로 ‘email’이나 ‘url’과 마찬가지로 형식에 맞지 않은 데이터를 걸러낼 수 있고, 전화번호 입력에 도움될 수 있는 환경을 만들어 줄 수도 있다. 전화번호는 다양한 형식으로 존재하기 때문에 전화번호 필드는 텍스트 필드처럼 자유롭게 입력할 수 있는 구조를 갖는다.

<input type=”tel”>

type=”search”^[147]

속성값을 ‘search’로 지정하면 검색 필드(search field)가 만들어진다. 직사각형의 모양, 텍스트를 입력하는 방식 등 검색 필드는 텍스트 필드와 다를 게 없다. 지금까지 텍스트 필드를 이용하여 큰 불편 없이 검색 기능을 구현해 왔다. 그럼에도 검색 필드라는 규격을 별도로 만든 이유는 검색어 자동완성, 검색어 수집, 둥근 형태의 검색 필드(텍스트 필드와의 형태 구분을 위한 기법) 등 검색과 관련된 다양한 기술을 구현하기 위해서는 브라우저가 검색 필드를 명확하게 인식할 수 있어야 하기 때문이다.

<input type=”search”>

type=”image”

속성값을 ‘image’로 지정하면 이미지 버튼(image button)이 만들어진다. 이미지 버튼은 이미지 형식으로 제작된 전송 버튼이다. 이미지를 사용했다는 점만 다를 뿐, 용도와 작동 방식은 같다. 버튼을 시각적으로 강조해야 하거나 다른 요소와의 시각적 균형을 맞추고자 할 때, 전송 버튼 대신 이미지 버튼을 사용한다. 이 때 스크린 리더 사용자를 고려하여 반드시 alt 속성을 제공해야 한다. 물론 스타일 시트를 사용하면 전송 버튼의 형태를 바꿀 수 있지만, 다음과 같은 이유로 스타일 시트 대신 이미지를 사용한다.

- 시각적 표현이 제한되어 있다.
- 브라우저마다 표현 방식이 다르다.
- 작업량이 상대적으로 많다.

<input type=”image” src=”submit\_button.gif” alt=”submit”>

type=”hidden”

속성값을 ‘hidden’으로 지정하면 숨김 필드(hidden field)가 만들어진다. 숨김 필드는 말 그대로 문서에 나타나지 않는 컨트롤로써 데이터를 사용자 입력이 아닌 컴퓨터(브라우저 포함)에 의해 서버로 전송하기 위한 것이다. 컴퓨터에 의해 입력되는 데이터는 여러 가지가 있을 수 있다. 예를 들어, 작성일자나 시간, 작성자 이름이나 아이디 등 서버에서 계산하지 않더라도 로컬 컴퓨터와 브라우저로 충분히 계산할 수 있는 객관적인 데이터가 이에 포함된다. 이러한 데이터는 사용자 처리가 필요 없거나 오히려 방해된다는 이유로 ‘숨김’ 처리한 것이므로 만약 사용자 확인이 필요한 데이터라면 ‘hidden’으로 지정하지 않아야 한다.

<input type=”text” name=”address”>

<input type=”hidden” name=”date” value=”2011-2-15”>

<input type=”submit” value=”전송”>

autofocus 속성^[148]

autofocus 속성은 컨트롤에 자동 포커스(auto-focus)를 지정한다. 일반적으로 포커스는 사용자에 의해 생성되지만, 경우에 따라서는 저작자가 지정한 컨트롤에 포커스가 자동으로 생겨야 할 때도 있다. 이런 경우 autofocus 속성을 사용하는데, 이 속성으로 지정된 컨트롤은 문서 로딩과 동시에 포커스를 받게 된다. 이렇게 되면 검색 서비스는 검색창, 메일 서비스는 아이디 입력창에 입력 받을 준비(prompt)를 미리 해 둘 수 있다. autofocus 속성은 반드시 문서 당 하나의 컨트롤에만 적용할 수 있으며, 두 개가 적용될 경우 순서 상 먼저 지정된 컨트롤에 포커스가 생긴다.

포커스가 자동으로 생긴다는 것은 포커스 생성을 위한 동작이 필요 없다는 것을 의미하므로 그만큼 사용자는 편리해 질 수 있다. 그런데 자동 포커스는 스크린 리더 사용자에게는 오히려 불편함을 줄 수 있다는 점에 유의해야 한다. 스크린 리더 사용자는 화면을 순차적으로 읽어나가며, 이에 따라 저작자도 내용이 순차적으로 전개될 수 있도록 문서를 만든다. 그런데 자동 포커스로 인해 중간 지점으로 건너뛰게 되면, 스크린 리더 사용자는 맥락을 파악하기 어렵기 때문에 문서 시작 지점으로 다시 이동하려고 할 것이다. 이렇게 되면 몇 번의 Shift+Tab 키를 누르거나 아니면 문서 시작 지점으로 이동하기 위한 바로가기 키를 눌러야 할 것이다. 또한 스페이스 바를 이용하여 화면을 스크롤하는 사용자에게도 자동 포커스는 달갑지 않을 것이다. 따라서 자동 포커스는 사용자 대다수가 반드시 필요하다고 판단되었을 때 사용하는 것이 바람직하다.

<input type=”text” autofocus=”autofocus”>

autocomplete 속성

autocomplete 속성은 입력어의 자동완성(autocomplete)을 지정한다. 자동완성은 브라우저가 사용자가 입력한 키워드를 저장해 두었다가 사용자가 입력한 키워드와 저장한 키워드가 일치할 경우, 완성된 입력어를 자동으로 표시해 주는 기능이다. 만약 자동완성을 원하지 않는다면 autocomplete 속성을 ‘off’로 지정하면 된다.

<input type=”text” name=”address” autocomplete=”off”>

required 속성

required 속성은 필수 입력 필드(required input field)를 지정한다.^[149] 이 속성으로 지정된 입력 필드는 사용자가 반드시 입력해야 한다. 만약 필수 입력 필드를 입력하지 않으면 폼은 전송되지 않고, 브라우저는 입력하지 않았다는 사실을 알린다. 과거에는 폼 검사(form validation)를 위해 별도의 스크립트가 필요했는데, required 속성이 표준 기술로 정의됨에 따라 브라우저 스스로 필수 입력 필드의 입력 여부를 검사할 수 있게 되었다.

<input type=”text” required=”required”>

크롬 브라우저의 예

파이어폭스 브라우저의 예

multiple 속성^[150]

multiple 속성은 다중 입력(multiple input)을 지정한다. 이 속성이 지정된 입력 컨트롤은 여러 개의 입력값을 받을 수 있다.

텍스트 필드	<form> 참조: <input type=”email” multiple=”multiple” name=”cc”> </form>
파일 업로드	<form> 파일선택: <input type=”file” multiple=”multiple” name=”file_selection”> <input type=”submit”> </form>

min 속성

min 속성은 최소 값(minimum value)을 지정한다. 이 속성을 지정하면 사용자가 min 속성값보다 큰 입력값만 유효하게 처리하며, 브라우저가 툴팁을 통해 입력할 수 있는 최소값을 알려준다.

<form>

<input type=”number” name=”product\_qty” min=”3”>

<input type=”submit”>

</form>

위 예제의 경우, min 속성값이 “3”으로 지정되었으므로 “3” 이상의 입력값만 유효하게 처리한다.

max 속성

max 속성은 최대 값(maximum value)을 지정한다. 이 속성을 지정하면 사용자가 max 속성값보다 작은 입력값만 유효하게 처리하며, 브라우저가 툴팁을 통해 입력할 수 있는 최대값을 알려준다.

<form>

<input type=”number” name=”product\_qty” max=”3”>

<input type=”submit”>

</form>

위 예제의 경우, max 속성값이 “3”으로 지정되었기 때문에 “3” 이하의 입력값만 유효하게 처리한다.

step 속성^[151]

step 속성은 입력값 단계(value step)를 지정한다. 입력값을 “3, 6, 9…”, “5, 10, 15…”처럼 일정한 단위로 정형화할 경우, step 속성을 사용한다.

<form>

<input type=”number” name=”product\_qty” step=”5”>

<input type=”submit”>

</form>

위 예제의 경우, step 속성값이 “5”로 지정되었기 때문에 입력값은 5, 10, 15 단위로 설정된다.

placeholder 속성

placeholder 속성은 플레이스홀더(placeholder)를 지정한다. “플레이스홀더”는 텍스트 필드 내에 있는 짧은 도움말(short hint)을 말한다. 텍스트 필드처럼 자유롭게 입력할 수 있는 컨트롤에서는 아무래도 불필요하거나 잘못된 데이터가 입력될 가능성이 크다(GIGO).^[152] 그래서 입력어를 기억하기 힘들거나 입력 형식이 주어진 경우 올바른 입력을 유도하기 위해 텍스트 필드 내에 짧은 도움말을 제공할 필요가 있는데, 이럴 때 placeholder 속성을 사용한다.

이 속성을 사용하면 사용자 입력 전까지 도움말이 텍스트 필드 안에 자리 잡게 되며, 속성이 적용된 텍스트는 흐린 색으로 표현되는데 컨트롤에 포커스가 생기면(컨트롤이 활성화되면) placeholder 속성이 적용된 텍스트는 사라진다. 포커스에 의해 사라질 수 있으므로 중요도가 높거나 긴 도움말은 컨트롤 주변에 작성하거나 title 속성으로 처리하는 것이 더 좋다.

<form>

<input type=”text” placeholder=”숫자만 입력하세요”>

<input type=”submit”>

</form>

tabindex 속성

tabindex는 탭 순서(tab-order index)를 지정한다. 키보드 사용자는 탭 키(Tab key)를 이용하여 문서를 돌아다니므로(keyboard navigation) 콘텐츠와 탭 내비게이션의 순서를 일치시키는 것이 원칙이다. 그런데 경우에 따라서는 콘텐츠와 탭 내비게이션 순서를 다르게 구성해야 할 때가 있으며, 이럴 때 tabindex 속성을 사용하여 탭 내비게이션 순서를 바꿀 수 있다.^[153]

문서에 있는 요소 중 A 요소, INPUT 요소처럼 사용자 조작이 필요한 요소는 탭 키에 의해 포커스(focus)를 받을 수 있다.^[154] 즉, 탭 내비게이션의 순서는 포커스를 받는 순서와 다름 없는 셈이며, 일련의 순서에서 해당 요소의 순서가 몇 번째인지를 지정하기 위해 tabindex 속성이 필요한 것이다. tabindex 속성을 지정하는 방법은 간단하다. 내비게이션 순서에 따라 정수(integer) 형식의 숫자를 부여하는데, 숫자는 0~32767 사이에 있어야 한다.^[155]

여기에서 속성값을 지정한다는 것은 곧 순서를 지정하는 것이다. 순서는 정해진 기준에 따른 전후 관계이다. 숫자와는 다른 개념이다. 그래서 어떤 것이 앞에 있는지 또는 뒤에 있는지, 그 위치가 관건이다. 1은 2보다 앞에 있는 것이며, 2는 1보다 뒤에 있는 것이다. 브라우저는 이와 같은 상대적인 위치를 이해하려고 노력한다. 즉, 속성값이 몇 인지 그 숫자 자체가 중요한 것이 아니라, 속성값의 크고 작음을 계산하여 전후 위치를 판단하는 것이다. 그래서 속성값이 1, 2, 3, 4로 지정된 경우와 100, 200, 300, 400으로 지정된 경우는 결과적으로 같다. 다시 말해, 브라우저는 속성값을 통해 몇 번째 위치에 있는지를 알게 되는 것이며, 낮은 속성값에서 높은 속성값의 요소로 탭 내비게이션이 진행된다.

문서 구성이 바뀌지 않는다면, 속성값을 1, 2, 3, 4처럼 간격 없이 지정해도 무방하다. 만약 이렇게 지정된 경우, 문서에 새로운 요소가 추가되면 문서 전체의 tabindex 속성값을 다시 지정해야 하는 불편함이 있다. 따라서 100, 200, 300, 400처럼 요소 사이의 간격을 여유 있게 띄워 놓는 것이 현명한 방법이다. 만약 속성값을 0으로 지정하면 0보다 큰 속성값(예, 1, 2, 3, 4…)에 포커스가 생긴 다음, 맨 마지막에 0으로 지정된 요소에 포커스가 생긴다. 아예 포커스가 생기지 않도록 하려면 속성값을 -1로 지정하면 된다. 만약 속성값이 동일할 경우에는 마크업 순서에 따라 탭 내비게이션의 순서가 정해진다.

탭 키(Tab key)를 누르면 순방향(낮은 속성값  높은 속성값), 시프트 키와 탭 키(Shift+Tab key)를 누르면 역방향(높은 속성값  낮은 속성값)으로 이동하며, 탭 내비게이션은 순환 모델(circular model)이므로 가장 높은 속성값에 도달했을 때 탭 키를 계속 누르면 가장 낮은 속성값에서부터 다시 내비게이션이 진행된다.

다음 예제는 4개의 입력필드, 제출 버튼, 링크로 구성되어 있다. tabindex 속성을 지정하지 않았다면, 예제의 탭 내비게이션 순서는 위에서부터 아래로 순차적으로 이동했을 것이다. 그런데 실제로 탭 키를 누르면 A 🡪 C 🡪 B 🡪 D 🡪 W3C 순으로 포커스가 이동한다. 우선 가장 먼저 포커스가 생기는 곳은 tabindex 속성값을 1로 지정한 “A”이며, 그 다음에 포커스가 생기는 곳은 속성값 2로 지정한 “C”다. 0보다 큰 속성값에 포커스가 생긴 다음 0으로 지정된 “B”에 포커스가 생기고, 그 다음부터는 마크업 순서대로 포커스가 이동한다. 마크업 순서로 보면 “D” 다음에 제출 버튼에 포커스가 생겨야 하지만, 제출 버튼은 속성값이 -1이므로 포커스가 생기지 않는다. 그래서 포커스는 제출 버튼을 건너뛰고 곧바로 W3C 링크에 생긴다.

<p>A : <input type="text" tabindex="1"></p>

<p>B : <input type="text" tabindex=”0”></p>

<p>C : <input type="text" tabindex="2"></p>

<p>D : <input type=”text”></p>

<p><input type="submit" tabindex="-1"></p>

<p><a href=”http://www.w3c.org/”>W3C</p>

disabled 속성

disabled 속성은 컨트롤이 비활성화된 상태(disabled)를 지정한다. 이 속성이 지정되면, 입력 컨트롤은 데이터를 입력할 수 없으며 버튼 컨트롤은 클릭할 수 없게 된다. 그리고 포커스를 받을 수 없으므로 탭 키로 이동할 때 disabled 속성으로 지정된 컨트롤은 건너뛰게 된다. 또한 활성화된 상태의 컨트롤과 시각적으로 구분될 수 있도록 disabled 속성으로 지정된 컨트롤은 입력 필드나 버튼의 색상이 어둡게 처리된다. 컨트롤을 비활성화 상태로 둔 것은 어떤 조건 또는 상황에 따라 활성화 상태로 바뀌는 것을 염두에 둔 것이다. 이를 위해서는 disabled 속성이 조건에 따라 제거되어야 하는데, 이것은 스크립트가 있어야만 가능하다.

활성화 상태	이름: <input type=”text”>
비활성화 상태	번호: <input type=”text” disabled=”disabled”>

checked 속성

checked 속성은 컨트롤이 체크된 상태(checked)를 지정한다. type 속성이 ‘checkbox’, ‘radio’일 때만 사용할 수 있다.

체크되지 않은 상태	<input type="checkbox">체크되지 않은 상태
체크된 상태	<input type="checkbox" checked="checked">체크된 상태

readonly 속성

readonly 속성은 읽기 전용 상태(read-only)를 지정한다. 입력 컨트롤은 입력을 위한 컨트롤이지만, 경우에 따라서는 입력을 제한해야 할 때가 있다. 예컨대, 어떤 조건에 의해 텍스트 필드가 자동 입력되고 입력된 텍스트를 사용자가 마음대로 변경하지 못하도록 폼을 설계한 경우에는 텍스트 필드를 읽기 전용 상태로 제공할 필요가 있으며, 이럴 때 readonly 속성을 사용한다.^[156]

단순히 읽기만 가능하다는 특성을 위해 readonly 속성을 사용한다면, 굳이 입력 컨트롤로 구성할 필요가 없을 것이다. 읽기만 가능하게 처리되었더라도 텍스트 필드는 입력 컨트롤이다. 그래서 포커스를 받을 수 있고, 탭 키에 의한 내비게이션이 가능하다. 이것은 텍스트 필드에 입력된 텍스트가 하이라이팅될 수 있고, 이 상태에서 Ctrl+C를 눌러 해당 텍스트를 손쉽게 복사할 수도 있다는 것을 의미한다. 즉, 본문에 있는 일반 텍스트와는 다른 특성을 갖기 때문에 readonly 속성을 사용하는 것이다.

<input type="text" value="1323-3424-4205-6620" readonly="readonly">

size 속성

size 속성은 입력 컨트롤 크기(size)를 지정한다. 이 크기는 글자 수를 의미한다. size 속성을 지정하지 않으면 기본값이 적용되므로 브라우저에서 지정한 크기가 표시된다.

size 속성값을 지정하지 않았을 때(기본값 적용)	<input type="text">
size 속성값 “2”일 때	<input type="text" size=”2”>
size 속성값 “20”일 때 (기본값이 적용될 때와 같은 크기, 브라우저의 기본값 = 20)	<input type="text" size=”20”>
size 속성값 “60”일 때	<input type="text" size=”60”>

list 속성

list 속성은 미리 작성된 리스트(predefined lists)를 지정한다. 이 속성을 지정하면 INPUT 요소 선택 시 미리 작성된 리스트가 나타나는데, 속성값은 이 리스트가 작성된 DATALIST 요소의 id 속성값이다.^[157]

accept 속성

accept 속성은 승인된 파일 타입(accepted file types)을 지정한다. 이 속성은 파일 업로드 컨트롤(type=”file”)에 사용되는 속성이며 브라우저가 지정된 형식의 파일만 표시하여 사용자 선택이 효율적으로 이루어질 수 있도록 돕는다.

• 오디오 파일 : audio/*
• 비디오 파일 : video/*
• 이미지 파일 : image/*

<input type=”file” accept=”image/jpeg”>

pattern 속성^[158]

pattern 속성은 정규 표현 패턴(the pattern of the regular expression)^[159]을 지정한다. “대문자만 입력 가능”, “소문자만 입력 가능”, “숫자만 입력 가능”, “주민등록번호 뒷자리”, “우편번호 입력” 등 입력 규칙이 정형화되어 있는 경우, pattern 속성을 지정하면 입력된 내용과 정규 표현 패턴을 비교하여 제대로 입력되었는지 여부를 체크할 수 있다. 과거에는 별도로 스크립트를 작성하여 체크했지만, pattern 속성이 추가되어 브라우저가 자바스크립트 정규 표현 패턴^[160]에 따라 직접 체크할 수 있게 되었다.

pattern 속성을 사용한 경우, 입력 규칙을 사용자에게 알려줄 필요가 있다. 입력 규칙을 문서 위에 나타나게 하는 방법과 title 속성을 이용하여 툴팁으로 나타나게 하는 방법이 있는데, 같은 정보를 중복 제공하지 않도록 두 가지 방법 중 한 가지 방법만 제공하는 것이 좋다. title 속성을 사용한 경우, 입력된 문자가 pattern 속성으로 지정된 정규 표현 패턴과 일치하지 않을 경우, title 속성값이 나타난다. (아래 예시 참조)^[161]

<form action="demo_form.asp"> Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" > <input type="submit"> </form>	영문 대소문자 구분 없이 세 글자를 입력해야 하는 규칙에 맞아야만 입력값을 전송한다.
	입력 규칙에 맞지 않으면 title 속성값을 보여준다.

<참고> 입력 패턴 테스트 문서 (html5pattern.com)

검색 영역은 입력 필드와 전송 버튼으로 구성되었고, 이것을 INPUT 요소의 search 속성과 submit 속성으로 마크업하였였다. LABEL 요소를 제공하지 않았기 때문에 title 속성으로 입력 필드의 용도를 밝혔다.

<!DOCTYPE html>

<html lang=”ko”>

<head>

<title>UX DESIGN</title>

중략

</head>

<body>

<header>

중략

<div id=”search”>

<form id=”keyword\_search” method=”get” action=”http://www.example.com/search”>

<input type=”search” id=”keyword\_search” name=”search\_header” size=”20” title=”검색어입력”>

<input type=”submit” value=”검색”>

</form>

</div>

</header>

중략

</body>

</html>

TEXTAREA 요소

카테고리	Flow content, Phrasing content, Interactive content
콘텐츠 속성	글로벌 속성, autofocus, cols, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap
지원 브라우저

TEXTAREA 요소는 텍스트 영역(TEXT AREA)를 표시한다. 텍스트 영역은 텍스트를 입력한다는 측면에서는 텍스트 필드(text field)^[162]와 같다. 텍스트 필드가 한 줄짜리 입력 컨트롤(single-line text input)이라면 텍스트 영역은 여러 줄짜리 입력 컨트롤(multi-line text input)이라는 점에서 다르다. 주로 의견 남기기(comments), 게시물 입력 등 많은 양의 텍스트 입력이 필요할 때 TEXTAREA 요소를 사용한다.

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

…

</textarea>

cols 속성

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

rows 속성

rows 속성은 가로 행(rows)의 개수를 지정한다. 이 속성은 텍스트 영역의 높이(height)를 결정한다. 기본값은 브라우저마다 다소 차이가 있어서 rows 속성을 지정하지 않으면 세 줄 또는 네 줄의 텍스트 영역이 생긴다. 이 속성을 지정하면 텍스트 영역의 모서리를 마우스로 조작하여 높이와 넓이를 조정할 수 있다(일부 브라우저에 한함).

maxlength 속성^[163]

maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수(max length) ^[164]를 지정한다. 이 속성이 지정되면 최대 글자 수가 초과한 경우에는 더 이상 글자가 입력되지 않는다. 예전에는 글자 수 제한을 위해 별도의 스크립트가 필요했지만, maxlength 속성이 제정되면서 브라우저가 직접 글자 수를 제한할 수 있게 되었다. 사용자는 글자 수 제한 여부를 알 수 없으므로 텍스트 영역 주변에 최대 글자 수를 알려주는 문구를 제공하는 것이 좋다.

<label>What are you doing? <input type=”text” maxlength=140></label>

wrap 속성

wrap 속성은 줄 바꿈(wrap)를 지정한다. 이 속성은 텍스트 영역을 서버로 전송할 때, 입력된 텍스트 흐름(text flow)를 어떻게 처리할 것인지를 결정한다. 즉, 텍스트가 한 행을 다 채웠을 때, 자동으로 다음 행으로 줄 바꿈이 이루어지게 할 것인지 말 것인지를 wrap 속성으로 지정할 수 있는 것이다. 줄 바꿈은 엔터 키(Enter key)를 누른 것과 같은 효과인데, 이것을 사소한 문제로 볼 수 있지만 문서 작성에 있어 줄 바꿈은 결코 사소한 문제가 아니다.

텍스트 영역은 사용자 입력을 위한 공간이므로 행의 길이를 적절하게 조절하지 못하는 경우가 많다. 이 때문에 한 행이 너무 길어지지 않도록 줄 바꿈이 이루어지도록 처리하는 것도 좋은 방법이다. 그러나 줄 바꿈은 문단(paragraph)을 만드는 것이며 P 요소를 적용한 것과 다름없기 때문에 텍스트 영역의 넓이가 좁을 경우 줄 바꿈이 잦게 되면 문장의 형태를 나쁘게 만들 수 있다. 따라서 wrap 속성은 텍스트 영역의 넓이(cols 속성)를 고려하여 지정 여부를 결정해야 한다.

• wrap=”off” : 이 속성값은 줄 바꿈이 이루어지지 않는다. 한 행을 다 채우더라도 줄 바꿈은 일어나지 않고 같은 행에서 텍스트 입력이 계속 이루어진다. 대신 텍스트 영역 하단에 스크롤 바가 생긴다.

• wrap=”soft” : 입력된 텍스트를 줄 바꿈 없이 전송한다. 물론 텍스트 영역에서 입력할 때는 한 행을 다 채우면 자동으로 다음 행으로 줄 바꿈이 일어나지만, 전송 시에는 줄 바꿈이 일어나지 않는다. wrap 속성은 soft가 기본값이다.

• wrap=”hard” : 입력된 텍스트를 줄 바꿈이 적용된 상태로 전송한다. 텍스트 영역에서 입력할 때 한 행을 다 채우면 자동으로 다음 행으로 줄 바꿈이 일어나는데, 이 상태를 유지한 채 서버로 전송한다.

댓글 기능은 텍스트 영역과 전송 버튼으로 구성되었고, 이것을 TEXTAREA 요소와 INPUT 요소의 submit 속성으로 마크업하였다.

<!DOCTYPE html>

<html lang=”ko”>

<head>

<title>UX DESIGN</title>

중략

</head>

<body>

중략

<article id=”sub\_comment”>

<h2>댓글</h2>

<form>

<textarea rows=”8” cols=”60” placeholder=”댓글을 입력해 주세요!”>

</textarea>

<p><input type=”submit” value=”등록”></p>

</form>

</article>

중략

</body>

</html>

LABEL 요소

카테고리	Flow content, Phrasing content, Interactive content
콘텐츠 속성	글로벌 속성, form, for
지원 브라우저

LABEL 요소는 컨트롤 레이블(LABEL)을 표시한다. 레이블은 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말한다. 폼은 다양한 컨트롤로 구성되며, 컨트롤은 제각각 나름의 용도를 지니고 있다. 가령, 같은 입력 영역(input field)이더라도 어떤 것은 검색어를 위한 컨트롤이 될 수 있고, 또 어떤 것은 이메일 주소를 입력하기 위한 컨트롤이 될 수 있다. 모양이 다르지 않기 때문에 컨트롤의 용도를 알리려면 컨트롤 주변에 레이블을 제공해야 한다. 그런데 이 레이블을 일반 텍스트로 마크업하게 되면 오로지 시각적으로만 그 용도가 표현되므로 브라우저는 레이블과 컨트롤 사이의 관계를 알 수 없으므로 LABEL 요소를 사용해야 한다.

<label>이름: <input type=”text”></label>

for 속성

for 속성은 레이블과 관련된 컨트롤(a label for the related form control)을 지정한다. 컨트롤에 레이블을 제공하는 방법은 크게 암시적 방법(implicit method)과 명시적 방법(explicit method)로 나뉜다. 암시적 방법은 LABEL 요소 내에 컨트롤을 둔다. 즉, LABEL 요소 내에 있는 컨트롤은 굳이 밝히지 않아도 관련 있다고 보는 것이다. 반면에 명시적 방법은 for 속성을 이용하여 컨트롤의 id값을 정확하게 지정해야 한다. 즉, 레이블이 어떤 컨트롤과 관련 있다는 사실을 명확하게 밝히는 것이다. 명확하게 밝힌다는 것은 기계적인 연결이 가능하다는 것을 의미한다. 이렇게 되면 브라우저는 사용자가 레이블을 클릭하더라도 관련된 컨트롤이 선택되도록 처리할 수 있고^[165], 레이블과 컨트롤이 서로 떨어져 있더라도 둘 사이의 관계를 손쉽게 연결시켜 줄 수 있다.

<form>

<input type="radio" name="color\_select" id=”color” value=”color”>

<label for="color">컬러</label><br>

<input type="radio" name="size\_select” id="size" value="size">

<label for="size">사이즈</label><br>

<input type="submit" value="Submit">

</form>

DATALIST 요소

카테고리	Flow content, Phrasing content
콘텐츠 속성	글로벌 속성
지원 브라우저

DATALIST 요소는 데이터 리스트(DATA LIST)을 표시한다. 데이터 리스트는 사용자가 입력 또는 선택할만한 데이터를 미리 리스트로 만들어 둔 것이다. 이것은 SELECT 요소를 이용한 선택 리스트(option list)와 비슷한 것처럼 보이지만, 실제로는 큰 차이가 있다. 선택 리스트는 드롭다운 리스트(drop-down list) 방식으로 제공되며, 사용자는 제시된 리스트에서 어느 한 가지를 선택하는 것이다. 반면에 데이터 리스트는 일반적인 텍스트 필드(text field) 형태로 제공되며, 사용자는 제시된 리스트에서 어느 한 가지를 선택하거나 또는 키워드 입력 방식으로 선택할 수 있다. 이 방식은 마치 브라우저의 키워드 자동완성(autocomplete)과 같은 효과를 제공한다. 다만, 키워드 자동완성은 브라우저가 사용자가 입력한 키워드를 저장해 두는 것이라면 데이터 리스트는 저작자가 직접 키워드를 리스트화하여 저장해 둔다는 점에서 다르다. 여하튼 키워드 검색의 중요성이 높아짐에 따라 별도의 프로그램(예, 브라우저, 자바스크립트) 없이 자동완성 기능을 이용할 수 있도록 DATALIST 요소가 표준 기술로 제안되었다.

다음 그림에서 알 수 있듯이 데이터 리스트는 사용자 입력이 있어야만 나타나는데, 키보드로 텍스트를 입력하거나 마우스로 텍스트 필드를 클릭하게 되면 사용자 입력이 이루어진다. 이것은 텍스트 필드와 드롭다운 리스트가 결합된 새로운 형태의 사용자 인터페이스이다. 그런데 일반적인 텍스트 필드와 형태적으로 다를 게 없다는 것이 문제다. 경험적으로 텍스트 필드는 텍스트를 입력하는 곳이므로 마우스 클릭이 잘 이루어지지 않을 것이다. 이 부분은 별도의 기획 작업으로 보완할 필요가 있다.

DATALIST 요소는 단순히 데이터 리스트를 표시하는 역할만을 수행하므로 INPUT 요소, OPTION 요소, list 속성을 함께 사용해야 한다. INPUT 요소는 입력 요소라는 특성을 부여하기 위해 필요하고, OPTION 요소는 데이터 리스트를 나열하기 위해 필요하다. 그리고 INPUT 요소와 DATALIST의 대응 관계를 정의하기 위해 list 속성이 필요하다.

<input list="country">

<datalist id="country">

<option value="Korea">

<option value="England">

<option value="France">

<option value="Japan">

</datalist>

<input type="submit">

입력 필드를 선택하면 DATALIST와 OPTION 요소에 의해 정의된 리스트가 나타나는데, 이를 위해서는 INPUT 요소의 list 속성값과 DATALIST의 id 속성값이 상호연결되어야 한다.

SELECT 요소

카테고리	Flow content, Phrasing content, Interactive content
콘텐츠 속성	글로벌 속성, autofocus, disabled, form, multiple, name, required, size
지원 브라우저

SELECT 요소는 선택 컨트롤(SELECTion control)을 표시한다. 선택 컨트롤은 OPTION 요소를 선택하기 위한 컨트롤이며, 옵션 리스트를 메뉴처럼 이용할 수 있도록 만든 것인데 “드롭다운 리스트”(drop-down list)와 비슷하다고 볼 수 있다. SELECT 요소와 OPTION 요소는 함께 사용해야 하는데, SELECT 요소는 선택 컨트롤을, OPTION 요소는 옵션 항목을 표시한다.

<select name="country">

<option value="kr">Korea</option>

<option value="en">England</option>

<option value="fr">France</option>

<option value="jp">Japan</option>

</select>

<input type="submit">

multiple 속성^[166]

multiple 속성은 다중 선택(multiple selection)을 지정한다. 드롭다운 리스트는 기본적으로 한 개의 옵션만 선택할 수 있는데, multiple 속성을 사용하면 한 번에 여러 개의 옵션들을 선택할 수 있도록 4개의 옵션이 노출된다(더 많은 옵션을 노출된 형태로 제공하려면 size 속성을 사용해야 한다). 이 속성을 사용하면 다중 선택을 위해 선택 컨트롤이 리스트 박스 형태로 구현되는데, Windows OS에서는 컨트롤 키(CTRL), Mac OS에서는 커맨드 키(Command)를 누른 상태에서 옵션을 선택하면 다중 선택이 이루어진다. 많은 사용자가 이런 방법을 모르고 있으므로 다중 선택에 대한 설명을 별도로 제공하는 것이 좋다.

<select multiple=”multiple” name="country">

<option value="kr">Korea</option>

<option value="en">England</option>

<option value="fr">France</option>

<option value="jp">Japan</option>

</select>

<input type="submit">

size 속성

size 속성은 선택 컨트롤 크기(size)를 지정한다. 이 크기는 옵션이 노출되는 표시 영역의 크기를 의미한다. 크기를 “1”로 지정하면 표시 영역은 한 줄만 생기고, “4”로 지정하면 표시 영역은 4줄이 된다.

size 속성을 지정하지 않으면 기본적으로 한 줄의 표시 영역만 생기는데 size 속성을 지정하더라도 속성값이 2 이상이면 전체 옵션을 모두 노출시킨다. 즉, 한 개의 옵션만 노출시키든지 전체 옵션을 모두 노출시키든지 둘 중 한 가지만 선택할 수 있는 것이다.

size 속성값이 “1”일 때	<select size="1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
size 속성값이 “2”일 때	<select size="2"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
size 속성값이 “4”일 때	<select size="4"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
size 속성값이 “6”일 때	<select size="6"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

그런데 multiple 속성이 사용되었을 때는 size 속성의 활용성이 더 커진다. 예를 들어, 옵션의 수가 10개인 경우 multiple 속성을 사용하면, 리스트 박스가 10줄이 된다. 이런 경우, 공간 활용을 이유로 6줄의 옵션만 노출시키고 싶다면 size 속성값을 6으로 지정하면 된다(size=”6”).

multiple 속성을 지정하고, size 속성값이 “6”일 때

<select size="6" multiple="multiple"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select>

OPTION 요소

카테고리	해당 사항 없음
콘텐츠 속성	글로벌 속성, disabled, label, selected, value
지원 브라우저

OPTION 요소는 옵션 리스트(OPTION list)을 표시한다. 옵션 리스트는 사용자가 선택할 수 있는 항목들을 모아둔 것이다. OPTION 요소는 SELECT 요소나 DATALIST 요소와 함께 사용하는데, 다른 요소를 포함할 수 없으며 텍스트만 포함할 수 있다.

<select>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="opel">Opel</option>

<option value="audi">Audi</option>

</select>

value 속성

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

selected 속성

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

<select>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="vw">VW</option>

<option selected="selected" value="audi">Audi</option>

</select>

OPTGROUP 요소

카테고리	해당 사항 없음
콘텐츠 속성	글로벌 속성, disabled, label
지원 브라우저

OPTGROUP 요소는 옵션 그룹(OPTion GROUP)^[167]을 표시한다. 옵션 그룹은 한 개 이상의 옵션이 모여서 만들어진 그룹을 의미한다. 옵션 개수가 많은 경우, 비슷한 옵션을 묶어서 구성하면 편의성이 향상된다. 사실 드롭다운 리스트는 사용하기 어려운 컨트롤이다. 여백이 부족해서 읽기가 어렵고, 옵션과 옵션 사이의 간격이 좁아서 선택하기 불편하다. 만약 옵션이 많아져서 옵션 리스트가 길어지면, 더욱 사용하기 어렵고 불편해 진다. 이 점을 보완하려면 OPTGROUP 요소를 사용하여 옵션을 적절하게 묶어주는 것이 좋다.

OPTGROUP 요소는 OPTION 요소의 그룹핑을 위한 요소이므로 OPTGROUP 요소가 부모 요소, OPTION 요소가 자식 요소로 구성된다. label 속성을 지정하면 옵션 그룹의 제목(label)이 생기는데, 이 제목은 그룹을 식별하고 한 데 묶인 옵션들의 성격을 알기 쉽게 이해시키는 역할을 한다. 제목은 굵은 서체와 이탤릭체가 표현된다.

<select name="country">

<optgroup label="Asia">

<option value="kr">Korea</option>

<option value="jp">Japan</option>

</optgroup>

<optgroup label="Europe">

<option value="en">England</option>

<option value="fr">France</option>

</optgroup>

</select>

Podcast의 선택 기능을 SELECTION 요소와 OPTION 요소로 마크업하였다.

<!DOCTYPE html>

<html lang=”ko”>

<head>

<title>UX DESIGN</title>

중략

</head>

<body>

중략

<section id=”video”>

<h3>Podcast</h3>

<form id=”podcast”>

<select name="potcast\_selection">

<optgroup label=”Video”>

<option value="video\_01">Creative Organization Theory</option>

<option value="video\_02">Human Factor for Beginners</option>

<option value="video\_03">Multiple User Interface</option>

</optgroup>

<optgroup label=”Audio”>

<option value="audio\_01">The Psychology of Menu Selection</option>

<option value="audio\_02">Mobile Usability</option>

<option value="audio\_03">Palm OS User Interface Guidelines</option>

</optgroup>

</select>

<input type="submit" value=”확인”>

</form>

중략

</body>

</html>

BUTTON 요소

카테고리	Flow content, Phrasing content, Interactive content
콘텐츠 속성	글로벌 속성, autofocus, disabled, form, name, type, value
지원 브라우저

BUTTON 요소는 버튼(button)^[168]을 표시한다. 버튼은 입력 장치의 한 종류이며, 사용자 선택 시 프로그램 되어 있는 명령어가 선택•실행된다. 앞에서 살펴본 바와 같이, INPUT 요소를 사용하더라도 버튼을 표시할 수 있다. 두 방식은 기능적으로는 차이가 없다. 다만, BUTTON 요소가 버튼을 좀 더 풍부하고 유연하게 표현할 수 있다는 점이 다르다.^[169]

우선 BUTTON 요소는 다른 요소 또는 내용을 포함할 수 있다. 내용은 텍스트이든 이미지이든 상관 없다. 내용을 포함할 수 있다는 사실은 버튼이 어떤 기능성을 갖고 있는지 충분히 설명할 수 있다는 것을 의미한다. 가령, 버튼 내에 LI 요소와 UL 요소를 이용하여 버튼의 주요 기능을 리스트 형태로 보여줄 수도 있다. 이에 반해 INPUT 요소는 내용을 포함할 수 없으므로 버튼 안에 넣을 수 있는 것은 고작해야 버튼 이름(button label)뿐이다. 아래의 설명형 버튼 예제처럼 ‘결제신청’ 부분을 강조하려면, 그 부분에 적절한 마크업을 표시해야 한다. BUTTON 요소는 다른 요소를 포함할 수 있기 때문에 EM 요소를 이용하여 ‘결제신청’ 부분을 효과적으로 강조할 수 있다.

버튼을 어떤 용도로 사용할 것인지 여부는 type 속성값에 의해 결정된다.

<button type=“submit”> : 전송 버튼 (기본값)

<button type=”reset”> : 초기화 버튼

<button type=”button”> : 버튼(스크립트에 의한 작동)

<button type=”submit”><img src=”check.gif” alt=””>이 버튼을 누르면 <em>결제신청</em>이 완료됩니다.</button>

KEYGEN 요소

카테고리	Flow content, Phrasing content, Interactive content
콘텐츠 속성	글로벌 속성, autofocus, challenge, disabled, form, keytype, name
지원 브라우저

KEYGEN 요소^[170]는 키 생성기(KEY GENerator)를 표시한다. 이 요소는 폼을 전송할 때 개인 키(private key)는 로컬(local key database)에 저장되고 공개 키(public key)는 폼 데이터와 함께 서버로 전송될 수 있도록 한 벌의 키(key-pair)를 생성할 수 있는 컨트롤을 만든다.^[171] 인증 또는 보안을 위해서는 클라이언트(브라우저)와 서버 사이의 상호 확인이 필요한데, 이 때 필요한 키 값을 KEYGEN 요소에 의해 생성할 수 있다.

<keygen name=”security”>

<input type=”submit”>

keytype 속성

keytype 속성은 키 타입(key type)을 지정한다. 이 속성은 키 생성을 위한 암호화 방식을 결정하며, 아래와 같은 속성값을 갖는다.

- keytype=”rsa” (기본값)

- keytype=”dsa”

- keytype=”ec”

challenge 속성

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

MARK 요소

카테고리	Flow content, Phrasing content
콘텐츠 속성	글로벌 속성
지원 브라우저

MARK 요소^[172]는 마크된 텍스트(MARKed or highlighted text)를 표시한다. 마크된 텍스트는 사용자 주의를 끌기 위해 다른 텍스트보다 더 강조된 텍스트를 말한다. MARK 요소는 텍스트를 강조한다는 점에서는 EM이나 STRONG 요소와 비슷하지만, 관련 있는 상황을 참조(reference)하기 위해 사용된다는 점에서는 다르다. 따라서 MARK 요소를 사용할 때는 관련 있는 상황이 있는지 없는지 여부를 먼저 따져야 한다. 일반적으로 자주 사용되는 상황은 다음과 같다.

▶ 출처

저작자가 다른 사람의 말이나 다른 곳의 내용을 출처할 때, 원저작자가 강조하지 않은 텍스트를 저작자가 임의로 강조해야 하는 경우에 MARK 요소를 사용한다.

<blockquote lang=”en”>

User experience is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.

</blockquote>

▶ 검색어 하이라이트

검색 결과의 경우, 검색어는 다른 단어보다 더 강조되어야만 검색 결과를 신속하게 처리할 수 있다. 이 때 검색어는 원래부터 중요한 단어가 아니라 특정 검색 상황에서만 중요한 단어이므로 EM 요소나 STRONG 요소를 사용할 수 없다. 스크립트를 이용하여 검색어를 강조할 수 있는데 이것은 어디까지나 시각적 효과에 의존한 방법이므로 MARK 요소를 사용하는 것이 바람직하다.

▶ 강조

EM이나 STRONG 요소와 달리, 현재 처해 있는 상황이나 읽고 있는 주제와 관련된 텍스트를 강조할 때 MARK 요소를 사용한다. 이런 경우, 저작자 의도보다는 상황 요인에 따라 텍스트를 강조했기 때문에 상황이 바뀌면 강조할 이유도 없어질 수 있다.

아래 예제의 경우, “관련 있는 상황”을 강조했다. 이 텍스트 자체가 중요한 것은 아니지만 주제인 “MARK 요소와 STRONG 요소의 차이점”과 관련하여 상대적으로 중요하다고 판단했기 때문에 저작자는 “관련 있는 상황”에 MARK 요소를 사용하였다. 만약 제목이 “MARK 요소”로 바뀌면, 상황 요인이 바뀐 것이므로 “관련 있는 상황”이라는 텍스트를 굳이 강조할 필요가 없을 것이다.

<h2>MARK 요소와 STRONG 요소의 차이점</h2>

<p>MARK 요소는 마크된 텍스트를 표시하며, 텍스트를 강조한다는 점에서는 STRONG 요소와 비슷하지만 <mark>관련 있는 상황</mark>을 참조하기 위해 사용된다는 점에서는 다르다.</p>

METER 요소

카테고리	Flow content, Phrasing content
콘텐츠 속성	글로벌 속성, value, min, max, low, high, optimum
지원 브라우저

METER 요소^[173]는 계기(METER gauge)를 표시한다. 계기는 측정하고자 하는 양이나 방향을 지침의 지시량으로 알아내거나 기록하는 장치^[174]를 말한다. 이 요소가 구현된 모습은 마치 진행 상태 바(progress bar)처럼 보이므로 사용 상의 혼란이 예상된다. 구분하여 설명하면, METER 요소는 “현재 디스크 사용량”과 같이 일정한 크기를 표시하기 위한 표준 기술이지만, 무게, 높이와 같이 크기만 나타내는 스칼라 값(scalar value)^[175]을 표현하는 용도로는 적합하지 않으므로 최소, 최대, 낮음, 높음 등 상대적 크기를 파악하는 용도로 사용해야 한다.

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

<meter min=”0” max=”100” value=”80” title=”퍼센티지”>현재 80%</meter>

low 속성

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

high 속성

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

optimum 속성

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

PROGRESS 요소

카테고리	Flow content, Phrasing content
콘텐츠 속성	글로벌 속성, value, max
지원 브라우저

PROGRESS 요소는 진행 상태(PROGRESS)를 표시한다. METER 요소가 완료 상태를 표현하는 것이라면, PROGRESS 요소는 진행 상태를 표현하는 것이다.^[177] 진행 상태는 정지되어 있는 것이 아니라 가변적인 것이며, 최대 값과 현재 값에 의해 계산된다.

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

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

<progress max=”100” value=”50” title=”퍼센티지”>50%</progress>

max 속성

max 속성은 최대 값(maximum value)을 지정한다. 이 속성을 지정하지 않으면, 속성값은 1이 된다.

value 속성

value 속성은 컨트롤 값(value)를 지정한다. PROGRESS 요소에서는 현재까지 진행된 값(the value of progress)을 지정한다. 이 속성값이 스크립트에 의해 동적으로 설정되면, 자동화된 진행 상태 바를 구현할 수 있다.

OUTPUT 요소^[178]

카테고리	Flow content, Phrasing content
콘텐츠 속성	글로벌 속성, for, form, name
지원 브라우저

OUTPUT 요소는 계산 결과(OUTPUT)를 표시한다. 이 요소는 계산된 데이터를 보여주기 위한 것이며, 데이터가 계산되려면 입력을 위한 INPUT 요소, METER 요소, PROGRESS 요소 등 입력 컨트롤과 계산을 위한 스크립트가 필요하다.

과거에는 웹이 전형적인 문서 모델이었기 때문에 입력 화면과 출력 화면의 구분이 필요했지만, 웹이 점점 애플리케이션처럼 변해가면서 입력과 출력이 한 화면에서 처리되어야 하는 상황(single context)이 많아졌다. 한 화면에서 입력과 출력이 함께 이루어진다면 입력 상황과 출력 상황을 구분시키기 어려우므로 출력된 정보임을 분명하게 밝혀줄 수 있는 요소가 필요하며, 이럴 때 OUTPUT 요소를 사용한다.

<form name="frm\_calculate" id="frm\_calculate">

<input name="number_1" id="number_1" type="number"> +

<input name="number_2" id="number_2" type="number"> =

<output name="fin\_result" onforminput="value=number\_1.valueAsNumber + number\_2.valueAsNumber"></output>

<input type="submit" value="Calculate" />

</form>

주석

[137] 아직까지 브라우저에서 출력 컨트롤을 제대로 지원하지 않고 있기 때문에 예제에서는 출력 컨트롤을 다루지 않았다.

[138] W3C는 입력 필드(input field), 버튼(button) 등 폼을 구성하는 입력 요소를 컨트롤(controls)이라고 부르고 있다.

[139] entity body라고도 부른다.

[140] 보안성이 요구되는 데이터는 G메일처럼 SSL 방식을 사용한다.

[141] (source) HTML: The Complete Reference (Thomas A. Powell, McGraw-Hill)

[142] ‘텍스트 박스’(text box) 또는 ‘텍스트 입력 박스’(text entry box)라고도 불린다.

[143] ‘패스워드’(password)는 인증을 위해 입력하는 문자열을 의미한다. 일반적으로 비밀번호라고 번역하는데, 실제 번호가 아닌 문자만으로 구성된 경우도 많기 때문에 이 책에서는 비밀번호 대신 패스워드라고 부르도록 한다.

[144] 파일 선택 컨트롤(file-select-control)이라고도 불린다.

[145] HTML5에 추가된 속성이다.

[146] HTML5에 추가된 속성이다.

[147] HTML5에 추가된 속성이다.

[148] HTML5에 추가된 속성이다.

[149] HTML5에 추가된 속성이며, INPUT 요소 뿐만 아니라 SELECT 요소, TEXTAREA 요소에서도 사용된다.

[150] HTML5에 추가된 속성이다.

[151] HTML5에 추가된 속성이다.

[152] ‘GIGO’(Garbage In Garbage Out)는 쓸데 없는 것이 입력되면, 출력되는 것도 쓸데 없는 것뿐이라는 뜻으로 컴퓨터에 불완전한 데이터를 입력하면 불완전한 답이 나올 수밖에 없다는 말이다(출처: 두산동아).

[153] 실제로는 tabindex 속성을 사용한 경우는 많지 않고, 브라우저가 이 속성을 지원하지 않는 경우도 있다.

[154] tabindex 속성을 지원하는 요소: A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA 등

[155] 컴퓨터 과학에서는 배열 요소(array element)를 확인하기 위한 정수(integer)를 ‘index’라고 부르며, ‘tab index’는 탭 키에 지정된 정수를 의미한다(저자 주).

[156] readonly 속성은 type=”text”와 type=”password”에서만 사용할 수 있다.

[157] 자세한 내용은 DATALIST 요소 참조(000페이지)

[158] HTML5에 추가된 속성이다.

[159] 정규 표현 패턴: 문자열을 정확하게 표현하기 위한 규칙

[160] 자세한 내용은 http://www.ecma-international.org/publications/standards/Ecma-262.htm, http://www.tutorialspoint.com/javascript/javascript\_regexp\_object.htm 참조

[161] (출처) http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5\_input\_pattern

[162]

<input type=”text”>

[163] HTML5에 추가된 속성이다.

[164] “length”는 공간적 길이를 의미한다.

[165] 사용성 측면을 고려할 때, 라디오버튼이나 체크박스는 작은 크기이므로 컨트롤을 클릭하는 것보다 레이블을 클릭하는 것이 더 낫다.

[166] HTML5에 추가된 속성이다.

[167] 올바른 영어 표현은 “a group of options”다.

[168] 버튼의 종류에는 텍스트 버튼도 있으므로 여기에서 말하는 버튼은 버튼처럼 생긴 “실행 버튼”(action button)을 의미한다고 볼 수 있다.

[169] 일부 브라우저에서 BUTTON 요소를 제대로 지원하지 못하고 있다고 알려져 있고, 이런 이유로 아직까지는 BUTTON 요소를 찾아보기 힘들다.

[170] HTML5에 추가된 속성이다.

[171] 인증이나 보안 관리의 강화를 목적으로 Netscape가 처음 제안하였다.

[172] HTML5에 추가된 속성이다.

[173] HTML5에 추가된 속성이다.

[174] (출처) 산업안전대사전(도서출판 골드)

[175] 뱡향은 없고 크기만 있는 값

[176] 중간 영역은 낮은 영역과 높은 영역을 설정하면 자동적으로 설정된다. 따라서 중간 영역을 위한 표준 기술은 필요 없는 셈이다.

[177] 진행 상태를 동적으로 표현하기 위해서는 별도의 스크립트가 필요하다.

[178] HTML5에 추가된 속성이다.