새로운 HTML5 기능의 목적은 비디오 및 오디오와 같은 임베딩 지원을 향상시키고 개발자와 최종 사용자에게 간단한 프로그래밍과 더 나은 사용자 경험을 제공하는 것입니다. 이제 인터넷 세계가 기다리고 있으며 브라우저는 업데이트 될 때 새 버전의 HTML5를 지원할 수 있습니다. HTML5는 Safari, Chrome, Firefox, Opera, IE9와 같은 많은 브라우저에서 지원되었습니다. 뒤로 호환되지만 오늘날의 브라우저는 HTML5와 완전히 호환 될 수 없습니다.
웹 사이트를 HTML5로 업그레이드하는 것은 HTML4와 호환되므로 매우 쉽습니다. DocType를 수정하면됩니다. 이 새로운 업데이트는 상황을 간단하게 만드는 데 도움이되므로 이제 모든 웹 사이트를 업데이트 할 수 있으며 모든 HTML4 태그가 여전히 HTML5에서 100% 지원되므로 충돌하지 않습니다.
HTML5 양식은 12 개 이상의 새로운 입력 유형과 기능을 정의하며 이러한 새로운 요소를 통해 프로그래머가 더 쉽게 프로그래밍 할 수 있습니다. 아래의 새로운 기능에 대해 이야기 해 봅시다.
1. 입력 상자 자리 표시 자
HTML4에서 개발자는 JavaScript와 JQuery를 입력 상자 자리 표시 자로 사용하고 HTML5에서는 개발자가 자리 표시자를 쉽게 표시 할 수 있습니다. 자리 표시자는 무엇입니까? 자리 표시기는 입력 상자에 나타나는 프롬프트 텍스트입니다. 입력 필드를 클릭하면 자동으로 사라집니다. 사용자가 텍스트 상자에 입력해야한다는 텍스트 샘플을 프롬프트 할 수 있습니다. 오히려 자리 표시 자 [email protected]을 설정할 수있는 이메일 입력 상자가 있으며 클릭하면 사라집니다.
IE FF SAFARI Chrome Opera iPhone Android
-3.7+ 4+ 4+ 11+ 4+ -
2. 자동 초점 이벤트
HTML5는 웹 페이지를로드하면 웹 페이지가 JavaScript와 같이 초점을 특정 입력 상자로 자동 이동합니다. 차이점은 무엇입니까? 지금은 HTML 태그이므로 사용자는 브라우저 에서이 속성을 쉽게 비활성화 할 수 있습니다. 모든 브라우저가 자동 초점을 지원하는 것은 아니지만 브라우저는이 속성을 무시하지는 않습니다. 모든 브라우저가 작동하려면 새로운 HTML5 자동 초점 특성을 추가 한 다음 브라우저가 자동 초점을 지원하는지 확인하십시오. 가능하다면 자동 초점 스크립트를 사용할 필요가 없습니다. 없으면 자동 초점 스크립트를 추가해야합니다.
FF IE SAFARI Chrome Opera iPhone Android
-4+ 4+ 3+ 10+ - -
3. HTML 새로 정의 된 입력 유형
1. 이메일
내가 말할 첫 번째 입력 상자는 이메일 주소입니다. 새로운 유형을 지원하지 않는 구형 브라우저도 단순히 텍스트 상자로 취급하며, 99%의 사용자가 양식을 제출할 때 까지이 변경 사항을 알지 못할 것입니다 (현재 양식 검증이있을 것입니다).
2. 웹 사이트
URL 입력 상자에 대해 이야기 해 봅시다. URL을 입력 해야하는 경우 http://www.vevb.com과 같이 URL을 입력해야합니다. 이제 URL 유형 입력 상자에서 가변 가상 키보드가 iPhone에서처럼 나타납니다. 사용자는 슬래시와 .com을 쉽게 입력 할 수 있습니다. 마찬가지로, 사용자는 양식을 제출하기 전에이를 알지 못합니다.
3. 숫자
html4에서 일치하는 숫자를 얻으려면 jQuery 스크립트를 사용하여 확인을 돕습니다. html5는 숫자 유형을 추가합니다. 일부 추가 속성 (선택 사항) : Min : 입력 상자에서 허용 할 수있는 최소 입력 번호를 지정합니다. MAX : 입력 할 수있는 최대 수입니다. 단계 : 속성 입력 도메인의 법적 간격, 기본값은 1입니다.
위의 그림과 같이, 숫자 만 허용됩니다 (대부분의 경우 제출시 오류가 표시 될 때까지 오류가 표시 될 때까지 알 수 없습니다), 0, 2, 4 만 합법적입니다 (6은 10이기 때문에 불법이며 법적은 0, 10, 20 ...)입니다.
4. 디지털 슬라이더
HTML5를 사용하면 Range라는 새 유형을 사용할 수 있으며 입력 상자는 슬라이더가됩니다. 귀하의 웹 사이트 양식은 슬라이더를 사용할 수 있습니다. 속성 태그는 숫자 유형과 동일하며 유형 설정 유형 = '번호'를 type = '범위'로 변경하십시오.
5. 캘린더
날짜와 dateTime이라는 날짜 선택기 유형 (시간, 주, 월 및 지역 캘린더와 같은 다른 추가 날짜/시간 유형이 있습니다). JQuery UI 및 YIU와 같은 많은 JavaScript 프레임 워크에는 이미 이러한 컨트롤이 있지만 캘린더 선택기를 추가하는 것은 매우 성가신 일입니다. HTML5는 페이지에 스크립트를 사용하지 않아도되는 새로운 로컬 날짜 선택기를 정의합니다. 현재 오페라는이 기능을 완전히 지원하는 유일한 Opera이며 다른 브라우저의 경우 브라우저가 지원하지 않는 경우 대체 스크립트를 수행 할 수 있습니다. 그러나 궁극적으로 모든 브라우저가 업데이트됩니다.
6. 검색
HTML5는 검색 입력 상자 유형을 추가합니다. 이것은 아무것도 아니지만 일부 사용자에게는 좋은 변화입니다. 입력 상자의 가장자리를 자동으로 동그라 할 수 있으며 입력을 시작하면 오른쪽에 작은 x가 있습니다. 모든 브라우저가 현재 지원하는 것은 아닙니다.
7. 색상
HTML5는 또한 유형의 색상을 정의하여 색상을 선택하고 16 진수 값을 반환 할 수 있습니다. Opera11은 이러한 유형의 브라우저를 지원하는 유일한 브라우저입니다. 그러나이 유형을 사용하는 사람은 많지 않아야하므로 지원하지 않는 것은 큰 문제가 아닙니다.
8. 형태 확인
가장 흥미로운 새로운 기능은 양식 검증입니다. 대부분의 개발자는 클라이언트 또는 서버의 양식 검증을합니다. HTML5의 Form Validator는 서버 측 확인을 대체하지 않을 수도 있지만 결국 클라이언트 측 확인을 대체 할 것입니다. JavaScript Verification의 문제점은 사용자가 쉽게 우회 할 수 있다는 것입니다. JavaScript를 비활성화하면 쉽게 우회 할 수 있습니다. 이제 html5가 걱정되었으므로 걱정할 필요가 없습니다. 오류는 모두 기본 HTML5 프롬프트이며 JavaScript는 사용되지 않습니다.
IE FF SAFARI Chrome Opera iPhone Android
-4+ 5+ 10+ 9+ - -
9. 필수 필드
HTML5의 양식 검증은 검증 필드 유형에 국한되지 않으며, 새로운 추가 태그를 호출 할 수 있습니다. 이 새로운 속성을 사용하면 개발자가 JavaScript를 사용하지 않고 입력 상자에 채워 졌는지 확인할 수 있습니다.
요약 : 위의 업데이트는 개발주기를 단축하고 사용자 경험을 향상시키는 데 중요합니다. 모든 브라우저가 HTML5를 수락하면 차세대 웹 사이트가 모든 사람의 기대를 초과합니다. HTML5는 번거 로움이 아니며 개발자를 크게 돕고 사용자 경험을 향상시킬 것입니다.