HTML : HTML5 Form 개념, 특성 알아보기

 

 

HTML5를 사용한 오디오와 비디오 임베딩 등 HTML5와 함께 제공되는 새로운 기능들을 놓쳤는데, 가장 흥미롭게 생각하는 기능 중 하나는 새로운 HTML5 form 기능입니다.

HTML5에는 양식과 관련된 많은 새로운 것들이 함께 제공됩니다. Javascript와 양식, 대부분의 작업을 HTML5로 수행할 수 있습니다. 이제 검증, 날짜 선택기, 슬라이더, 색상 선택기 등을 쉽게 추가할 수 있습니다.

HTML5 양식과 함께 새로운 입력 유형이 함께 제공됩니다. 이전 HTML에서는 텍스트, 확인란, 라디오, 단추 및 제출과 같은 정보를 얻을 수 있습니다. 하지만 이제 입력 유형이 더 많아졌습니다.

새로운 입력 유형에는 다음이 포함됩니다. 웹 사이트의 검색 필드에서 사용된 search는 표준 텍스트 입력 유형과 동일하게 작동합니다.

 

• URL :  URL 입력 유형이 자동으로 확인되며 값이 유효한 URL이어야 합니다.
• Email : 전자 메일 입력 유형이 양식이 제출될 때 자동으로 확인되며 값이 유효한 전자 메일 주소여야 하는 URL과 동일합니다.
• Datetime, date, month, week, time 및 datetime-local 날짜 선택기를 제공합니다.
• Number : 숫자 입력 유형은 이 텍스트 상자에 숫자만 입력할 수 있음을 의미합니다.
• Range : Range 입력 유형은 슬라이더를 생성하여 최소 및 최대 범위에서 숫자를 선택합니다.
• Color : Color 입력 유형은 양식에서 색 선택기를 제공합니다. 

 

이 모든 기능을 사용할 수 있으며 Javascript를 쓸 필요가 없습니다.

새로운 입력 유형과 함께 새로운 입력 유형을 제어하는 데 도움이 되는 몇 가지 새로운 특성도 제공됩니다. 다음은 HTML5를 사용하여 얻을 수 있는 몇 가지 새로운 특성입니다.

 

• Max and Min — 유효한 날짜/시간 및 숫자 유형을 제한합니다.
• Pattern - 정규식을 사용하여 유효성을 검사할 수 있습니다.
• Placeholder — 입력에 포커스가 있을 때 텍스트가 제거될 기본 텍스트를 표시합니다.
• Required - 양식을 제출하기 전에 필수 입력 사항인지 확인합니다.

 

 

No Javascript

이러한 새로운 기능의 가장 좋은 점은 Javascript를 쓸 필요가 없다는 것입니다. 위에 나열된 기능은 대부분의 양식에서 수행해야 하는 매우 일반적인 form 기능입니다. 이제 HTML5에서 입력 유형에 새 속성을 추가하기만 하면 됩니다.

HTML5 form의 가장 좋은 기능은 form에서 얻는 유효성 검사입니다. 이것은 모든 양식에서 필요한 것이며, 이제 필요한 속성만 사용해도 쉽게 이 작업을 수행할 수 있습니다. HTML5는 사용자가 form의 이 필드를 입력해야 한다는 것을 알리기 위해 제출 시 도구 설명도 추가합니다. 

 

브라우저 지원 사양은 아래와 같습니다.

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	5.1
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	5.1
search	No	4.0	11.0	10.0	No
color	No	No	11.0	12	No

 

오늘날 대부분의 최신 브라우저는 이러한 기능을 지원하므로 지금 웹 사이트에 추가하셔도 좋습니다.