HTML5 양식 입력 형식 날짜, 색상 및 범위 살펴보기

양식은 웹 사이트 어디에서나 볼 수 있습니다. 페이스 북, 트위터, 구글 - 폼을 통해 사이트에 로그인하거나 사이트에 등록하도록 요구합니다. 사실 우리는 양식을 사용하여 소셜 사이트에서 트위터와 상태를 업데이트합니다. 간단히 말해서, 양식은 웹 사이트와 상호 작용할 수있는 매우 중요한 부분입니다..

웹 양식은 입력으로 작성되었습니다. 과거에는 입력 유형에 대해 몇 가지 옵션 만있었습니다. 와 같은 본문, 암호, 라디오, 확인란 과 제출하다. 이제 HTML5는 크게 개선되었으며 사양에 많은 새로운 입력 유형을 도입했습니다..

그래서이 포스트에서 우리는 새로운 흥미로운 작품을 HTML5 양식 우리는 당신이 그들을 시도해야한다고 생각합니다; 그들을 확인하자..

날짜 선택기

우리가 살펴보고 싶은 첫 번째 것은 데이트 피커. 날짜를 선택하는 것은 등록 양식에서 찾을 수있는 공통된 사항입니다. 특히 항공편 및 호텔 예약과 같은 일부 사이트 또는 응용 프로그램의 경우.

날짜 선택 도구를 만들 수있는 JavaScript 라이브러리가 많이 있습니다. 이제 HTML5 입력을 사용하여 더 쉽게 만들 수 있습니다. 날짜, 다음과 같이;

그만큼 날짜 선택기 HTML5의 경우 기본적으로 JavaScript 라이브러리와 매우 유사하게 작동합니다. 우리가 현장에 집중하면 달력이 튀어 나옵니다. 그런 다음 몇 달에서 몇 년 사이를 탐색하여 날짜를 선택할 수 있습니다.

그러나 현재 각 브라우저를 지원하는 각 브라우저는 날짜 입력 유형, 즉 Chrome, Opera 및 Safari는이 입력 유형을 약간 다르게 표시하므로 사용자 환경에서 불일치 문제가 발생할 수 있습니다.

위의 스크린 샷에서 한 눈에 볼 수있는 몇 가지 주목할만한 차이점이 있습니다. Opera는 Sun, Mon, Thu 등의 요일 이름에 영어로 된 3 자리 약어를 사용했지만 Chrome은 현지 언어를 사용했지만 Safari는 다소 이상하게 작동합니다. 캘린더를 표시하지 않습니다. 조금도.

또한 몇 가지 새로운 기능이 있습니다. 입력 ~에 유형 더 구체적으로 날짜 또는 시간 선택; 달, 주, 시각, 날짜 시간 과 datetime-local, 우리는 키워드 자체가 그것이하는 일을 알기에 꽤 desctiptive하다고 확신합니다..

아래의 링크를 통해 모든 것을 볼 수 있지만 Opera 11 및 그 이상 버전에서 볼 수 있도록하십시오. 서면으로 볼 때 모든 입력 유형을 지원하는 유일한 브라우저이기 때문입니다.

• Datepicker 데모

색상 선택기

색상 선택기 이 CSS3 그라디언트 생성기와 같은 특정 웹 기반 응용 프로그램에서 종종 필요하지만 이번에는 웹 개발자도 jsColor와 같은 JavaScript 라이브러리를 사용하여 작업을 수행합니다. 하지만 이제는 HTML5로 기본 브라우저 색상 선택기를 만들 수 있습니다. 색깔 입력 유형;

다시 한번, 브라우저 (이 경우 Chrome과 Opera)는이 입력 유형을 약간 다르게 렌더링합니다.

오페라는 클릭시 기본 색상 옵션을 드롭 다운에서 선택한 색상의 16 진수 및 16 진수 형식으로 표시하지만 클릭하면 새로운 색상 팔레트가 색상 표로 바로 표시됩니다.

또한 기본 색상을 값 다음과 같이

이렇게하면 지원되지 않는 브라우저에서 볼 때 입력 텍스트 필드에서 성능이 저하되고 사용자에게 입력란에 입력해야하는 종류의 힌트를 줄 수있는 기본값이 표시됩니다..

색상 값 표시

포토샵을 열어 복사하는 것보다 마녀 색상 형식을 사용하는 경우 생성 된 색상이 이미 16 진수이므로 실제로이 입력 유형에 간단한 도구를 만들어 작업을 수행 할 수 있습니다.

먼저 ID를 추가합니다. 색상 선택기 입력에 추가하고 빈 div 이드와 헥스 컬러 옆에 값이 들어 있습니다..

우리는 jQuery가 머리 우리 문서의 그런 다음 색상 값과 새로 추가 된 값을 저장합니다. div 변수 에서처럼;

 var color = $ ( '# colorpicker') .Val (); hexcolor = $ ( '# hexcolor'); 

에서 초기 값 가져 오기 #색상 선택기;

 hexcolor.html (color); 

... 마지막으로 선택 색상이 변경 될 때 값을 변경합니다.

 $ ( '# colorpicker'). on ( 'change', function () hexcolor.html (this.value);); 

그게 전부 야. 지금 행동에서 보자..

• Colorpicker 데모

범위

그만큼 범위 입력 형식을 사용하면 jQuery UI에서 찾을 수있는 범위의 숫자를 선택하기위한 브라우저에 슬라이더를 추가 할 수 있습니다.

위의 스 니펫은 기본 구현입니다. 범위 입력 유형. 다음과 같이 CSS를 사용하여 슬라이더 방향을 수직으로 변경할 수도 있습니다.

 입력 [유형 = 범위] 너비 : 20px; 높이 : 200px; -webkit-appearance : slider-vertical;  

또한 Google은 최소 과 최대 숫자의 범위, 예를 들면;

아래 스 니펫에서 우리는 최소 0으로 225 최대. 명시 적으로 지정하지 않으면 기본적으로 브라우저가 0 최소한 100 최대의.

번호 표시

그러나 하나의 제약이 있습니다. 숫자는 보이지 않습니다. 브라우저의 슬라이더에서 생성 된 숫자 / 값을 볼 수 없습니다. 우리가 약간의 JavaScript 또는 jQuery를 추가 할 필요가있는 숫자를 표시하려면 여기에 우리가하는 방법이 있습니다.

먼저 빈을 추가합니다. div 입력 옆에 div 상자처럼 보일 정도로 충분히.

그런 다음 위의 코드와 동일한 코드를 strongcolor picker에서 사용하는 다음 코드를 추가합니다. 이제 슬라이더에서 값을 가져옵니다..

 $ ( '# 슬라이더'). change (function (()); $ ( '# 슬라이더'). ) output.html (this.value););); 

이제 데모를 볼 수 있습니다. Firefox 및 IE는 Chrome, Opera 및 Safari와 같이 이러한 브라우저에서 데모를 볼 수 있습니다. 범위 현재 입력 유형.

• 레인지 데모

최종 단어

HTML5는 많은 새로운 입력 유형을 도입함으로써 우리의 삶을 훨씬 쉽게 만들어줍니다. 그러나 다른 HTML5 기능과 마찬가지로 지원은 특히 구 브라우저에서 매우 제한적이므로이 새로운 기능을 신중하게 사용해야합니다. 특히이 게시물에서 설명한 새로운 입력 유형을 사용해야합니다. 날짜, 색상 및 범위.

그러나 궁극적으로 우리는 이제 당신이 더 많은 통찰력을 가지기를 바랍니다. HTML5 양식. 이 게시물을 읽어 주셔서 감사 드리며 즐겁게 보내시기 바랍니다..

• 데모
• 소스 다운로드

더 읽을 거리

다음은 HTML 양식에 대해 더 자세히 알아볼 수있는 몇 가지 유용한 링크입니다..

• HTML5의 새로운 양식 기능 - Opera Dev.
• HTML5 양식의 현재 상태 - Wufoo
• HTML5 양식 속성 - w3school.org
• HTML5 양식은 언제 사용할 수 있습니까? - CanIUse.com