실제로, HTML5의 형식 특성은 작년에 알아야 할 제 28 조 HTML5 기능, 팁 및 기술에 도입되었습니다. 그러나이 부분의 도입이 비디오 형태로 표시되는 것은 약간 유감입니다. 실제로 비디오라면 괜찮습니다. 열쇠는 Toutube 비디오이며, 감시해야합니다. 글쎄, 단지 으스스한 사람인 나와 같은 좋은 시민은 승무원을 제외한 다른 상황에서 속보로 너무 게으르기 때문에 비디오 의이 부분에 표시되는 내용은 실제로 비어 있습니다.
따라서 다음은 콘텐츠 의이 부분을 개선하기위한 패치가 있습니다. 이 기사의 일반적인 내용은 다음과 같습니다.
# <입력 유형 = 번호 />
# <입력 유형 = 범위 />
# <입력 유형 = 날짜 /> 및 기타 시간 선택기 컨트롤
# <입력 유형 = 색상 /> 색상 선택기
# <입력 유형 = 검색 />
# <datalist> 요소 및 목록 속성
# HTML5 형식 검증과 CSS3 간의 모호한 관계
유형 = 숫자 인 HTML 양식 요소를 사용하면 키를 눌러 텍스트 상자의 값을 변경할 수 있습니다. 이 효과는 종종 다음과 같은 Windows 시스템에서 볼 수 있습니다.
게으른 사람들은 오히려 의자에 누워서 마우스를 클릭하고 키보드를 누릅니다. 따라서 키보드 입력과 비교하여 클릭 및 입력 시장도 있습니다. 이것이 HTML5 형태로 수치 선택 제어가있는 이유입니다.
거친 HTML 코드는 다음과 같습니다.
사람 수 : <입력 유형 = 번호 값 = 1 />
도트에 적합한 폭 제한을 추가하면 크롬의 효과 (추정 UI가 시스템 테마와 관련이 있음)는 다음과 같습니다.
현재 지원되는 브라우저는 Opera 11이지만 오페라 아래에서 값을 추가하고 빼는 버튼은 약간 비뚤어진 것처럼 보이고 추상적 인 스타일이 있습니다.
여기에서 열심히 클릭 할 수 있습니다 : HTML5 Form Nubmer Control Demo
2. 유형 = 범위범위의 중국어 의미 가치 값 범위, 그리고 이러한 종류의 효과는 다음 스크린 샷과 같이 창 시스템에서도 일반적입니다.
HTML5에서 유사한 효과를 가진 입력 제어가 있습니다. 유형을 범위로 정의하면 쉽게 정의하십시오!
드래그 범위 : <입력 유형 = 범위 값 = 50 />
기본적으로 값 범위는 0 ~ 100이므로 값 = 50이면 드래그 막대가 영역 범위의 중간에 있습니다. 아래 그림과 같이 :
내 Firefox는 현재 버전 3.6 이며이 기능은 아직 지원되지 않았습니다. 그러나 Chrome, Opera 및 Safari 4는 모두 영향을 미치지 만 결국 동일한 아버지는 아니므로 외관에는 약간의 차이가 있으므로 이러한 차이는 여기에 표시되지 않습니다.
여기서 열심히 클릭 할 수 있습니다 : HTML5 Form Range Control Demo
28 개의 HTML5 기능, 트릭 및 기술의 마지막 항목, 즉 28 번째 항목의 훌륭한 효과 예는 범위 컨트롤에 구현 된 효과이며 여기에는 최소, 최대 속성 및 단계 속성도 포함됩니다. 관찰하고 학습 할 가치가있는 예입니다. 이 예제 데모와 관련하여 여기를 가혹하게 클릭 할 수 있습니다.
3. type = 날짜 및 기타 시간 컨트롤이것은 시간 선택기 제어입니다. 오랫동안 선택한 경우 JS 플러그인을 귀찮게하지 마십시오. 날짜 속성 만 있으면 커피를하는 동안 옆에 바닥을 휩쓸었던 노부인과 의사 소통 할 수 있습니다. 당신이 그것을 믿지 않으면,보세요 :
날짜를 선택하십시오 : <입력 유형 = 날짜 값 = 2011-01-04 />
결과적으로 오페라와 같은 지원되는 브라우저에서 다음과 같은 효과가 있습니다.
이것은 살아 있지 않은 시간 선택기입니다!
그의 못생긴 외모 외에도 다른 사람들은 매우 기뻐합니다.
시간 수업 공간, 날짜 유형뿐만 아니라 시간 유형뿐만 아니라 DateTime, Week 및 Month.
분명히, 이름에서 알 수 있듯이 날짜 유형은 날짜를 선택하는 것입니다. 시간 유형은 시간을 선택하는 것입니다. Datetime은 날짜와 시간을 선택하는 것입니다. 주간은 주를 선택하고 월은 월을 선택합니다.
여기에서 열심히 클릭 할 수 있습니다 : html5 양식 시간 수업 공간 데모
테스트하고 Safari를 버전 5.0으로 업그레이드했습니다. 현재 오페라 브라우저가 이러한 유형의 시간 제어를 지원한다는 것을 알았습니다. 효과는 다음과 같습니다.
type = time 인 경우 효과는 유형 = 숫자와 다소 유사합니다. 클릭하여 이벤트를 전환 할 수 있습니다. 기본적으로 모든 지점은 한 번이며 시간이 1 분 동안 전환되며 마우스가 길어지고 마우스도 유효합니다.
시간을 선택하십시오 : <입력 유형 = 시간 값 = 22 : 52 />
시간 선택 :
유형 = 주에서 마우스가 지나가면 각 줄의 날짜 (주 1 주를 나타내는)의 배경색은 아래 그림과 같이 집단적으로 더 어두워집니다.
유형 = 월이면 아래 그림과 같이 한 달의 배경색이 어두워집니다.
두 가지를 선택한 후 데이터 값은 다음과 같습니다.
4. 유형 = 색상이것은 색상 선택기 컨트롤이며 매우 강력합니다. 다음과 같이 사용하기가 매우 간단합니다.
색상을 선택하십시오 : <입력 유형 = 색상 값 =#34538b />
오페라 브라우저의 기본 효과는 다음과 같습니다.
기본 입력 컨트롤에는 #34538b의 둥근 색상 배경이 있습니다. 우리는 클릭하여 드롭 다운하면 결과는 웹 색상 패널을 닦고 확장합니다.
아래 버튼을 다른 ... 단어로 클릭하고 결과적으로 화려한 색상 선택 패널이 확장되었습니다.
멋지다, 사용하기가 매우 쉽다, 오 hehe.
여기서 열심히 클릭 할 수 있습니다 : HTML5 양식 색상 선택 제어 데모
5. 유형 = 검색검색 기능입니다. 검색 유형 입력 상자에 자동으로 검색 유리 아이콘이 있다는 것을 알았을 때 기억합니다. 그러나이 테스트를 보지 못했고 (꿈에서)이 속성의 UI 효과는 매우 낮고 차갑습니다. WebKit Core 브라우저에서 값이 있으면 아래와 같이 입력 상자 뒤에 섹시한 크로스가 나타납니다.
나는 다른 것에 대해 특별한 것을 찾지 못했기 때문에 방금 이것을 언급했습니다. 여기에서 열심히 클릭 할 수 있습니다 : HTML5 검색 유형 제어 데모
6. <datalist> 요소 및 목록 속성Datalist는 데이터 목록 풀다운 효과를 구현하는 매우 드문 요소이며 UI 스타일은 자동 완성과 약간 유사합니다.
간단한 예를 들기 위해 :
다음 HTML 코드 :
목록 : <입력 유형 = 텍스트 목록 = MyData 자리 표시기 = 인기있는 영화 순위/> <datalist id = myData> <옵션 레이블 = TOP1 value = 총알 fly let fly the Bullet fly the Bullets fly the intion label = top2 value = one 2> <옵션 레이블 = top3 value = 옵션 레이블 = 옵션 레이블 = zhao> </datal valse> </datalic at the lovet the the Lought the the Lought About About About About About About About Aboud
결과는 입력 상자가 초점을 맞춘 후에 다음과 같습니다.
이 속성은 좋은 것입니다. 걸어 다니지 말고 최신 오페라 브라우저에서만 영향을 미친다는 것을 알지 마십시오. 다른 브라우저가 향후 다른 브라우저를 지원할 지 여부는 알려져 있지 않습니다.
HTML5를 사용하면 CSS3의 선택기 부분에도 일부 새로운 의사 클래스가 나타났습니다.
예를 들어 다음 CSS 및 HTML 코드는 다음과 같습니다.
입력 [유형 = 텍스트] : 초점 : 유효한, 입력 [유형 = 이메일] : Focus : 유효한, 입력 [유형 = 숫자] : 포커스 : In-Range {개요 : 2PX Green Solid; } 입력 [type = text] : 초점 : 무효, 입력 [type = email] : 초점 : 무효, 입력 [type = 숫자] : 초점 : 범위 외 {개요 : 2px 빨간색 고체; }<p> 일반 입력 상자 : <입력 유형 = 텍스트 /> < /p> <p> 메일 입력 상자 : <입력 유형 = 이메일 /> < /p> <p> 숫자 입력 상자 : <입력 유형 = 숫자 min = 0 max = 10 /> (0 ~ 10) < /p>
메일 입력 상자를 예로 들어 보겠습니다. 입력 텍스트가 법적 사서함이 아닌 경우 입력 상자의 개요는 빨간색 경고 테두리를 표시합니다.
문자 입력으로 사서함이 합법적 일 때 테두리 빨간색은 안전한 녹색 테두리로 닦습니다.
검증 작업 및 관련 스타일 디스플레이 등은 모두 브라우저 및 CSS에 의해 완료됩니다. 나는 10 년 후에 그것에 대해 생각했다. 와우, 그것은 웹입니다. 모든 것이 너무 아름답습니다.
필요한, 자동 초점, 자리 표시 자, 패턴 등과 같은 HTML5 형식의 다른 기능이 알아야 할 28 개의 HTML5 기능, 팁 및 기술에 설명되어 설명되어 있으므로 여기에서는 자세히 설명하지 않습니다.
HTML5에 관심이 있다면 개인적으로 28 가지에 대한 이전 기사를 읽는 것이 좋습니다. 이 기사의 내용은 특정 지점 (HTML5 양식의 기타 새로운 기능)에 대한 추가 개선 및 보충이라고 할 수 있습니다. 전자는 큰 문제이며,이 기사는 기껏해야 높은 수준의 간장 소스입니다.
마지막으로, 그것은 모든 HTML5 일이기 때문에, 지금 당신이하려는 브라우저가 IE라면, 브라우저를 잠시 동안 날아가더라도 이러한 시선을 사로 잡는 효과를 보지 못할 것입니다. 따라서 최신 버전의 최신 브라우저로 이동하는 것이 좋습니다.
참조 기사 :html5의 새로운 형태 기능 : http://dev.opera.com/articles/view/new-form-features-in-html5/