HTML5의 새로운 태그 2

* 폼의 새로운 속성

- HTML5에서는 폼의 input 요소의 type 속성의 값이 큰 폭으로 확장됨.

 

속성	기능
search	검색 키워드 입력
tel	전화번호 입력
url	URL 입력
email	메일 주소 입력
month	연월 입력
week	주 입력
date	날짜 입력
time	시각 입력
datetime	UTD(협정 세계시) 입력
datetime-local	현지 날짜와 시각 입력
number	수치 입력
range	지정 범위의 수치 입력  min 속성으로 최소값, max 속성으로 최대값을 지정함. (생략 시는 0~100)
color	색 입력  서버에는 '#ffeaf()' (이스케이프하면 '%23ffeat()')와 같이 문자열이 보내짐.

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
search	X	O	O	O	O
tel	X	O	O	O	O
url	X	O	O	X	O
email	X	O	O	X	O
month	X	X	O	X	X
week	X	X	O	X	X
date	X	X	O	X	X
time	X	X	O	X	X
datetime	X	X	O	X	X
datetime-local	X	X	O	X	X
number	X	X	O	O	O
range	X	X	O	O	O
color	X	X	O	X	X

 

* 기타 폼 관련 태그

- 속성 이외의 폼 관련 태그.

- meter 요소와 progress 요소에는 요소를 지원하지 않는 웹 브라우저를 위한 대체 콘텐츠를 넣을 수 있음.

 

태그	기능	작성 예
<datalist>	입력 후보의 목록을 만듦.  한 줄 문자열 입력란 등과 연결시키면 직접 문자열을 입력하거나 입력 후보로부터 항목을 선택하여 입력할 수도 있음. 각 항목은 이 요소 안에 <option> 요소를 지정하여 정의함. 연결하려면 대상이 되는 <input> 요소의 list 속성에 이 요소의 id 속성 값을 지정해야 함.	<input type="text" list="deptlist">  <datalist id="deplist">      <option value="총무부"></option>      <option value="홍보부"></option>      <option value="기술부"></option>  </datalist>
<meter>	지정한 범위 내에 있는 값을 막대그래프로 나타냄.  예를 들어 디스크 사용량을 표시하는 데 적합함. min 속성으로 최소값, max 속성으로 최대값을 지정함. 또한 low, high, optimum 속성은 '낮음', '높음', '최적'의 범위를 나타내는데 사용함. (보통 막대그래프의 색이 바뀜.)	디스크 용량:  <meter min="0" max="1024" value="195">      195GB/1T  </meter>
<progress>	프로그레스 바(진행 막대)를 표시함.  max 속성으로 최대값을 지정함.	<progress max="100" value="60">      조사중...  </progress>
<output>	폼 안에서 계산 결과를 나타냄.  JavaScript를 사용하여 계산한 결과를 표시하는 데 사용함.  관련되는 입력 폼의 id를 for 속성에 지정할 수 있음.	<form onsubmit="return false" oninput="r.value = v1.valueAsNumber + v2.valueasNumber">     <input type="number" name="v1" value=0>     +<input type="number" name="v2" value=0>     =<output name="r"></output> </form>

 

* 사용자 조작

- 사용자가 조작할 수 있는 요소.

 

태그	기능	작성 예
<details>	보통은 접혀져 있지만 사용자의 조작에 따라 표시되는 상세 정보나 각종 부품을 나타냄.  open 속성을 지정하면 열린 상태로 작성됨.	<details open>      <summary>      옵션      </summary>      <p><label>      <input type="checkbox" name="cnf">      </label></p>  </details>
<summary>	details 요소에서 지정한 내용의 모음을 나타냄.  접혀 있을 때는 이 부분만 표시됨.

 

 

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
<datalist>	X	O	O	X	X
<meter>	X	X	O	X	O
<progress>	X	O	O	X	O
<output>	X	O	O	O	O
<details>	X	X	X	X	O
<summary>	X	X	X	X	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)