2011/09/19 글 목록

2011/09/19 에 해당되는 글 2건

2011.09.19 6.7 HTML5 Input Type: Range
2011.09.19 6.6 HTML5 Input Type: Email, URL, Phone

2011. 9. 19. 12:30

6.7 HTML5 Input Type: Range

HTML5 2011. 9. 19. 12:30

Range는 특정 범위 값을 입력할 때 사용하는 필드입니다. 역시나 Range 역시 입력 환경이 제한적인 모바일 환경에서 사용이 특히 유용합니다. 그래서인지 지금 우선 지원하는 브라우저들도 모바일 환경에 강한 브라우저 들입니다.
Range의 사용방법은 아래와 같습니다.

<input id="test" type="range"/>

아래와 같이 사용했을 때 현재 지원하는 브라우저에서 보여지는 모습입니다.

현재 이 Range를 지원하는 웹 브라우저는 Chrome, Safari, Opera 등입니다.

Browsers	Render Range input as Slider
IE 9
Firefox 4
Safari 5	✓
Chrome 8	✓
Opera 11	✓

Range를 사용하기 위해서는 몇 가지 속성을 더 정확하게 써주는것이 좋습니다. 현재 값이나 최대 값, 최소 값 같은 것들입니다.

<input id="slider1" type="range" min="100" max="500" step="10" />

Attribute	Descriptions
value	Value is a common attribute of "Input" element. The value can be any valid floating point number, not neccessary must be an integer number. Default value is minimum value plus half of the maximum value.
min	Minimum value of the range. Default minimum value is 0.
max	Maximum value of the range. Default maximum value is 100.
step	This is Step scale factor of the slider, default value is 1 and only allowing integer number unless minimum value is non integer number.
list	List is the DataList in the past lesson. Datalist can be incorporated into Range type input, however, none of the browser has implemented this feature as of writing.

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Web Form

0 0

2011. 9. 19. 08:30

6.6 HTML5 Input Type: Email, URL, Phone

HTML5 2011. 9. 19. 08:30

Email, Phone, URL등 정형화된 입력 유형의 입력을 도와주는 타입이 HTML5에서 추가 되었습니다. 입력하려는 내용이 구체적으로 명시되면서 입력을 적극적으로 도와 줄 수 있게 되었는데 주로 입력이 불편한 모바일 환경에서 적극적으로 활용되고 있습니다.
아래와 같이 email, url, tel 등 타입을 명시하게 되면 HTML5를 지원하는 웹 브라우저는 여기에 적합한 입력기 형태를 노출해 줍니다. 현재로는 주로 모바일 환경에서 이를 지원하도록 되었습니다.

<input id="email" type="email"/>
<input id="website" type="url"/>
<input id="phone" type="tel" />