HTML5 양식은 이전 버전보다 훨씬 더 많은 기능을 제공하지만 정의하기도 쉽습니다.
HTML5는 실제로 많은 새로운 필드 유형을 제공합니다. 현재 브라우저의 지원은 이미 비교적 잘 되어 있습니다. 여기서는 실용적으로 사용할 수 있는 필드 유형만 소개하겠습니다.
색상 선택기
방문자에게 색상을 선택할 수 있는 옵션을 제공할 수 있습니다.
이러한 필드를 클릭하면 일반적인 색상 선택기가 열립니다.
이 선택기를 사용하여 원하는 색상을 선택할 수 있습니다. 이러한 색상 선택기는 <입력 유형="색상">을 통해 정의됩니다.
원하는 색상 선택: <입력 유형="색상" 이름="lf" />
필드에는 항상 값이 할당되어야 합니다. 값이 없거나 유효하지 않으면 자동으로 #000 (예: 검은색)이 사용됩니다.
날짜 및 시간
HTML5에는 특히 날짜 및 시간 정보에 대한 필드 유형과 관련하여 수많은 혁신이 있습니다. 그리고 이러한 필드 유형 중 일부는 실제로 모든 것을 갖추고 있습니다. 예를 들어 방문자에게 날짜 선택 필드를 제공하려는 경우 필요한 단계를 생각해 보세요. 일반적으로 JavaScript(또는 플래시)가 없으면 아무것도 할 수 없습니다. HTML5 덕분에 이제 이 작업이 훨씬 쉬워졌습니다. 날짜 유형의 입력 필드를 정의하기만 하면 됩니다.
<input type="date" />
캘린더를 표시하고 구현하는 것은 전적으로 브라우저의 책임입니다. 브라우저는 캘린더를 표시하기 위해 해당 위젯을 표시해야 합니다. Google Chrome에서 애플리케이션은 다음과 같이 표시됩니다:
캘린더는 날짜별로 정의되며, 사용자는 원하는 날짜를 선택하는 데 사용할 수 있습니다. 날짜는 선택 후 자동으로 텍스트 필드로 옮겨집니다.
시간 필드도 마찬가지로 쉽게 만들 수 있습니다. 여기에는 시간 유형 필드가 사용됩니다.
<입력 유형="시간" /> <입력 유형="시간" />
브라우저는 시간을 사용하여 시간을 선택하기 위한 컨트롤을 표시해야 합니다.
주 역시 마찬가지로 간단한 방식으로 작동합니다. 주를 선택할 수 있는 필드가 그 위에 표시됩니다.
<입력 유형="week" />
월 필드를 표시할 수도 있습니다.
<input type="month" />
두 필드 유형 모두 원하는 정보를 설정하는 데 사용할 수 있는 제어 요소를 표시합니다.
Tim 및 Date는 날짜 또는 시간 중 하나만 선택할 수 있는 반면, datetime 및 datetime-local은 두 가지 변형을 모두 조합할 수 있습니다.datetime을 사용하면 날짜 필드와 시간을 선택할 수 있는 필드가 나란히 표시됩니다. (날짜/시간은 현재 Safari와 Opera에서만 지원됩니다).
이 섹션에 제시된 양식 필드는 아직 모든 브라우저에서 지원되지 않는다고 이미 언급했습니다. 그래도 해당 필드를 사용하려면 해당 JavaScript 솔루션을 사용하면 됩니다. jQuery 및 Dojo와 같은 주요 JavaScript 프레임워크는 적합한 스크립트를 제공합니다. jQuery UI를 사용하면 다음과 같이 표시됩니다:
<!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> /* <![CDATA[ */ $(document).ready(function() { $("#datepicker").datepicker(); }); /* ]]> */ </script> </head> <body> <input type="text" id="datepicker" /> </body> </html>따라서 브라우저가 클래식 날짜를 지원하지 않더라도 안심할 수 있습니다.
숫자를 위한 필드
숫자를 사용하면 숫자를 입력하기 위해 특별히 고안된 필드가 제공됩니다.
가장 간단한 경우 숫자 필드의 정의는 다음과 같습니다.
<입력 유형="숫자" />
이러한 필드에는 두 가지 방법으로 숫자를 입력할 수 있습니다:
- 키보드를 통해
- 제어 요소를 통해
추가 속성을 지정하면 숫자 필드를 더욱 자세히 설명할 수 있습니다. 먼저 필드의 값 범위를 결정하는 데 사용할 수 있는 최소 및 최대 속성이 두 가지 있습니다.
- 최소 - 가능한 가장 작은 값
- 최대 - 가능한 가장 작은 값
그러나 이 두 속성은 브라우저 제어 요소에만 적용됩니다. 키보드를 통한 사용자의 수동 입력에 영향을 주는 데는 사용할 수 없습니다.
정수 및 부동 소수점 숫자는 두 속성 모두에 할당할 수 있습니다.단계 속성은 브라우저 제어 요소에서 유지 관리할 단계를 지정하는 데 사용할 수 있습니다.
<입력 유형="숫자" 최소="0" 최대="8" 단계="2" />
이 경우 브라우저의 제어 요소를 사용하여 0, 2, 4, 6, 8 값만 선택할 수 있습니다.
슬라이더
범위 유형 필드를 사용하면 정의된 값 범위 내에서 값을 선택할 수 있습니다.
브라우저는 범위 필드를 슬라이더로 해석합니다.
<입력 유형="범위" 최소="0" 최대="10" 단계="2" 값="6">
최소 속성을 통해 가능한 가장 작은 값을 지정합니다. 최대 속성은 가능한 가장 큰 값을 나타냅니다. 최소 및 최대 속성이 누락된 경우 브라우저는 두 값을 0과 100으로 가정합니다.
단계 순서는 step을 통해 정의할 수 있습니다.
검색 필드 만들기
검색은 처음에는 아무런 기능이 없습니다. 오히려 이 필드 유형은 기존 텍스트 입력 필드를 보완하는 것으로 보아야 합니다. 검색 필드의 목적은 단순히 단순한 텍스트 필드와 시각적으로 구분하기 위한 것입니다. 일반적으로 브라우저는 검색 필드의 표시를 대신해야 합니다.
<입력 유형="검색" />
이를 궁극적으로 구현하는 방법은 제조업체에 달려 있습니다. 좋은 조합은 결과 속성을 추가하는 것입니다.
<입력 유형="검색" 결과="5" 자리 표시자="검색..." />
결과는 필드에 표시할 이전 검색 항목의 수를 지정하는 데 사용됩니다.
하지만 주의: 결과 속성은 HTML5 사양의 일부가 아닙니다.
