HTML5 양식 : 새로운 컨트롤

html5는 5 가지 새로운 양식 요소를 소개합니다 : , , <datalist></datalist>, <output></output> 및 는 각각 고유 한 목적을 제공합니다. <keygen></keygen> <progress></progress> <meter></meter> 요소는 게이지 역할을하며 지정된 범위 내의 값을 시각적으로 나타냅니다. 결정적으로, 그것은

속성이 없으며 양식으로 제출되지 않습니다. 최소값은 기본값이 0 또는 미터의 값 (어느 쪽이든), 최대 기본값은 1 또는 미터의 값 (어느 쪽이 더 높은지). 요소는 및 속성을 ​​사용하여 작업 완료 백분율을 표시합니다. 회색 (0%)에서 파란색 (100%)까지 부분적으로 채워진 막대로 렌더링됩니다. 생략

는 불확실한 진행률 표시기 (종종 애니메이션 바 또는 점)를 초래합니다.

<meter></meter> 요소는 계산 된 결과를 표시합니다. 다른 양식 필드에서 파생 된 가치는 양식으로 제출됩니다. JavaScript는 종종이 값을 동적으로 업데이트합니다 name (Alexis Goldstein, Louis Lazaris 및 Estelle Weyl의 "Html5 & Css3, Real World, 2nd Edition"에서 발췌. 상점과 eBook에서 제공됩니다.) 우리는 새로운

속성과 일반적인 형식 요소 속성을 탐색했습니다. 그러나 HTML5는 더 많은 것을 제공합니다! 및

를 검토하고 및 를 검사합시다. max 및 value 요소 는 범위 내에서 값을 표시하는 게이지를 만듭니다 (, value, 최대 1에서 1 또는

입니다. 변동하는 값 (예 : 테스트 점수, 연료 레벨)에 사용하십시오. 지원되는 브라우저 (iOS7 또는 IE11은 아님)는 색상 코드 게이지 (값 범위에 따라 노란색, 녹색, 빨간색)를 표시합니다.

는 진행을 나타내지 않아야합니다. 대신 <output></output>를 사용하십시오. 는 및 를 사용하여 작업 완료 (0-100%)를 보여줍니다. 브라우저는 백분율을 막대로 계산하고 표시합니다. 지정되지 않은 는 불확실한 진행 지표를 만듭니다. 와 달리

는 를 향해 증가합니다. 기본값은 로, 너비와 높이 조정을 허용합니다 (높이는 막대 높이가 아닌 간격에 영향을 미칩니다).

요소 는 사용자에게 보이지만 직접 편집 할 수없는 계산 결과를 표시합니다. 자바 스크립트를 통해 종종 업데이트되는 그 값은 다른 양식 필드에서 파생되어 양식으로 제출됩니다. <output></output> 속성은 관련 입력 필드에 연결합니다 공공-민간 키 쌍을 생성하여 공개 키를 제출합니다. 지원은 브라우저에 따라 다릅니다 (오페라, 크롬, 사파리, 안드로이드, Firefox는 iOS7 또는 IE11이 아닙니다).

및

(현재

)은 그 속성입니다 for 속성 표준 양식 요소가 불충분 한 상황 (예 : 인라인 wysiwyg 편집기)이있는 상황의 경우 속성 (또는 )은 요소를 편집 할 수있게합니다. 자동으로 제출되지는 않지만 JavaScript는 서버 측 제출을 처리 할 수 ​​있습니다. 이것은 종종 편집 가능한 프로파일에서 볼 수 있습니다. 를 추가하면 요소와 그 후손을 편집 할 수 있습니다 (명시 적으로 로 설정되지 않는 한). 클라이언트 측 DOM 업데이트에는 저축을 위해 JavaScript가 필요합니다 기존 양식 컨트롤로 변경

요소 html5는

(기본 유효성 검사없이 제출), <keygen></keygen> (현재 페이지에 대한 기본값), challenge (특정 제출 버튼의 경우 keytype)를 생략하여 rsa를 향상시킵니다. 는

요소에 직접 적용 할 수 있습니다.

요소 html5는 다단계 선택 메뉴에 대한 중첩 contenteditable 요소를 허용합니다

요소

's contenteditable 및 contenteditable="true" 속성은 더 이상 필요하지 않습니다 (크기 크기에 CSS를 사용). 속성 (값 : contenteditable 또는 )은 제출시 줄을 제어합니다. contenteditable="false" 결론 여기에는 많은 html5 양식 향상이 포함됩니다. 브라우저 지원이 커지면 유효성 검사 및 UI 개선에 대한 JavaScript 의존도가 줄어 듭니다. 레거시 브라우저는 지속되지만 적절한 폴리 플릴로 HTML5 양식을 채택하는 것이 좋습니다. 다음 장에서는 HTML5의 비디오 및 오디오 기능을 탐구합니다 자주 묻는 질문 (FAQS)

(FAQS 섹션은 원본 텍스트에 제시된 정보를 정확하게 반영하기 때문에 크게 변하지 않습니다.)

새로운 양식 요소, 스타일링, 유효성 검사, 이벤트 처리 및 모바일 사용에 관한 질문과 답변 제공된 텍스트와 적절하게 해결되고 일치합니다. 그러므로 여기에서 그것들을 재현하는 것은 중복 될 것입니다.

위 내용은 HTML5 양식 : 새로운 컨트롤의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!