HTML5의 양식

HTML4에 비해 HTML5의 요소와 기능은 더 높은 수준의 의미적 마크업을 제공하고 스크립트와 스타일로 인해 HTML4에 존재하는 중복 요소를 많이 제거합니다. HTML5 양식 기능은 다양한 웹사이트에서 양식이 보다 일관되게 작동하도록 하고 사용자 입력 데이터에 적시에 응답함으로써 사용자에게 더 나은 경험을 제공합니다. 이러한 경험은 브라우저 스크립팅을 비활성화한 사용자에게도 적용됩니다.

이 항목에서는 Gecko/Firefox4 이상에서 지원되는 몇 가지 새로운 기능이나 변경 사항에 대해 설명합니다.

요소의 유형 속성에는 더 많은 값이 있습니다.

search: 이 요소는 검색 상자를 렌더링합니다. 개행 문자는 입력 값에서 제거되지만 다른 구문 개선 사항은 없습니다.

tel: 이 요소는 전화번호 편집을 위한 입력 컨트롤로 사용할 수 있습니다. 전화번호 국제화 차이가 매우 명백하기 때문에 입력 값에서 개행 문자가 제거되고 기타 구문 개선이 이루어지지 않습니다. 패턴, 최대 길이 등의 속성을 사용하여 컨트롤에 입력되는 값을 제한할 수 있습니다.

url: 이 요소는 URL 편집을 위한 입력 컨트롤을 렌더링합니다. 줄 바꿈과 선행 및 후행 공백은 자동으로 제거됩니다.

email: 이 요소는 이메일 주소를 렌더링합니다. 줄바꿈은 자동으로 제거됩니다. 잘못된 이메일 주소 설정이 가능하지만, 입력 상자의 제약 조건을 충족하는 경우 ABNF(Extended Backus Normal Form)의 사양을 준수해야 합니다: 1( atext / "." ) "@" ldh-str 1( "." ldh-str ) 여기서 atext는 RFC 5322 섹션 3.2.3에 정의되어 있고 ldh-str은 RFC 1034 섹션 3.5에 정의되어 있습니다. .

참고: 다중 속성이 설정된 경우 영역에 여러 개의 이메일을 쉼표로 구분하여 입력할 수 있지만 Firefox에서는 이를 지원하지 않습니다. .

list:

패턴: 컨트롤의 값을 확인하는 데 사용되는 정규식으로, 유형 값이 text, tel, search, url, email인 입력 요소에 적용할 수 있습니다.

form: 이 입력이 속한

요소를 나타내는 문자열입니다. 입력은 하나의 형식으로만 존재할 수 있습니다.

formmethod: 양식이 제출될 때 사용할 HTTP 메소드(GET 또는 POST)를 나타내는 문자열입니다. 정의된 경우 요소의 메소드 속성을 재정의할 수 있습니다. formmethod는 유형 값이 image 또는 submit이고 form 속성이 설정된 경우에만 적용됩니다.

x-moz-errormessage: 양식 필드 유효성 검사가 실패할 때 오류 메시지를 표시하는 문자열입니다. 이 값은 Mozilla 확장이며 표준이 아닙니다.

요소에는

novalidate라는 새로운 기능이 있습니다. 이 기능을 설정하면 양식이 제출되기 전에 유효성이 검사되지 않습니다.

요소의 목록 속성을 사용하여 특정 입력을 특정

요소

요소는 계산 결과를 나타냅니다.

for 속성을 사용하여

요소를 작업에 영향을 미치는 문서의 다른 요소(예: 입력 또는 매개변수)와 연결할 수 있습니다. for 속성의 값은 공백으로 구분된 다른 요소의 ID 목록입니다.

Gecko 2.0(다른 브라우저의 경우는 해당되지 않음)은

요소에 대한 유효성 제약 조건 및 오류 메시지 사용자 정의를 지원합니다: :invalid, :valid, :-moz. -ui-invalid 및 :-moz-ui-valid. 이는 계산 결과가 비즈니스 규칙을 위반하지만 특정 입력 값의 오류로 인한 것이 아닌 경우에 유용할 수 있습니다(예: "총 백분율이 100을 초과할 수 없습니다").

placeholder 속성

placeholder 속성은 및 요소에서 작동하며 이 필드에 입력할 수 있는 콘텐츠를 사용자에게 알려줍니다. 자리 표시자의 텍스트에는 캐리지 리턴 및 줄 바꿈을 포함할 수 없습니다. </p> <p>autofocus 속성 </p> <p>autofocus 속성을 사용하면 사용자가 다른 컨트롤에 값을 입력하는 등의 방법으로 재정의하지 않는 한 페이지가 로드될 때 자동으로 포커스를 받는 양식 컨트롤을 지정할 수 있습니다. 문서 내에서 하나의 양식만 부울 값인 autofocus 속성을 가질 수 있습니다. 이 속성은 <input>, <button>, <select> 및 <textarea> 요소에 적용됩니다. 예외적으로 자동 초점 요소의 유형 속성 값이 숨김으로 설정된 경우 자동 초점이 적용되지 않습니다. 즉, 숨겨진 컨트롤이 자동으로 초점을 얻도록 할 수 없습니다.

label.control DOM 속성

HTMLLabelElement DOM 인터페이스는 요소에 해당하는 속성 외에 추가 속성을 제공합니다. 컨트롤 속성은 for 속성(정의된 ​​경우) 또는 첫 번째 하위 요소 컨트롤에 의해 결정된 대로 레이블이 적용되는 컨트롤인 레이블이 지정된 컨트롤을 반환합니다.

제약조건 유효성 검사

HTML5는 클라이언트측 양식 유효성 검사를 위한 구문과 API를 제공합니다. 물론 이러한 기능은 보안 및 데이터 무결성을 위해 여전히 필요한 서버 측 유효성 검사를 대체할 수는 없지만 클라이언트 측 유효성 검사는 입력 데이터에 대한 즉각적인 피드백을 통해 좋은 사용자 경험을 제공할 수 있습니다.

제목 속성으로 요소를 설정한 경우 유효성 검사에 실패하면 프롬프트 메시지에 속성 값이 표시됩니다. 제목이 빈 문자열로 설정된 경우 프롬프트 메시지가 표시되지 않습니다. title 속성이 설정되지 않은 경우 표준 유효성 검사 정보(예: x-moz-errormessage 속성을 통해 지정되거나 setCustomValidity() 메서드 호출 등)가 대신 표시됩니다.

참고: 제약 조건 유효성 검사는 양식의 요소를 지원하지 않습니다. 양식의 유효성 검사 결과에 따라 버튼 스타일을 변경하려면 :-moz-를 사용할 수 있습니다. 제출 유효하지 않은 의사 클래스. 제약 조건 유효성 검사를 위한 HTML 구문

HTML5 구문의 다음 항목은 양식 데이터에 대한 제약 조건을 지정하는 데 사용됩니다.

, 및 요소의 필수 속성은 해당 요소에 값을 제공해야 함을 지정합니다. (<input> 요소에서 필수는 특정 유형 속성 값과 결합된 경우에만 적용됩니다.) </p> <p><input> 요소의 패턴 속성은 요소 값이 특정 유형과 일치하도록 제한하는 데 사용됩니다. 특정 정규식 모드. </p> <p><input> 요소의 min 및 max 속성은 요소에 입력할 수 있는 최대값과 최소값을 제한합니다. </p> <p><input> 요소의 step 속성(min 및 max 속성과 함께 사용됨)은 입력 값 사이의 간격을 제한합니다. 값이 허용되는 값의 단계와 일치하지 않으면 유효성 검사에 실패합니다. </p> <p><input> 및 <textarea> 요소의 maxlength 속성은 사용자가 입력할 수 있는 최대 문자 수(유니코드 코드 포인트 내)를 제한합니다. </p> <p> 유형의 url 및 email 값은 각각 입력 값이 유효한 URL인지 이메일 주소인지를 제한하는 데 사용됩니다. </p> <p>또한 양식에서 제약 조건 유효성 검사를 방지하려면 <form> 또는 <button> 및 <input> 요소(유형이 submit 또는 image인 경우)에 novalidate 속성을 설정할 수 있습니다. formnovalidate 속성을 설정하십시오. 이러한 속성은 양식이 제출될 때 유효성 검사가 수행되지 않음을 지정합니다. </p> <p>제약 조건 유효성 검사 API</p> <p>다음 DOM 속성은 메서드 및 제약 조건 유효성 검사와 관련되어 있으며 클라이언트 스크립트에서 사용할 수 있습니다. </p> <p>HTMLFormElement 개체의 checkValidity() 메서드, 양식의 관련 요소가 제약 조건 유효성 검사를 통과한 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다. </p> <p>양식 관련 요소: </p> <p>willValidate 속성에서 요소의 제약 조건이 충족되지 않으면 값은 false입니다. </p> <p>validity 속성은 요소의 현재 유효성 검사 상태(즉, 제약 조건의 성공 또는 실패 여부)를 나타내는 ValidityState 개체입니다. </p> <p>validationMessage 속성은 요소와 관련된 제약 조건의 실패 정보를 설명하는 데 사용됩니다. </p> <p>checkValidity() 메서드는 요소가 제약 조건을 하나도 만족하지 않으면 false를 반환하고, 그렇지 않으면 true를 반환합니다. </p> <p>setCustomValidity() 메서드는 사전 정의된 정보를 재정의하기 위해 제약 조건을 구현하고 확인하는 데 사용되는 사용자 지정 유효성 검사 정보를 설정합니다. </p> <p>HTML5 문서</p> <p>HTML </p> <p>오디오/비디오 캔버스 WebGL SVG MathML WebForms AppCache Microformats SemanticTags</p> <p>JavaScript </p> <p>스토리지 IndexedDB WebSockets WebWorkers 이벤트 드래그/드롭 프로토콜 핸들러 위치정보 포커스</p> <p>CSS </p> <p>NewSelectors 타이포그래피 시각 효과</p> <p>HTML5의 양식과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트에 주목하세요! </p></output></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML5 웹 작업자" href="https://m.php.cn/ko/faq/350834.html">HTML5 웹 작업자</a></span><span>다음 기사：<a class="dBlack" title="HTML5 웹 작업자" href="https://m.php.cn/ko/faq/350849.html">HTML5 웹 작업자</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/348281.html" title="AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성" class="aBlack">AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348372.html" title="HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)" class="aBlack">HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348373.html" title="HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명" class="aBlack">HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348374.html" title="정규 표현식과 새로운 HTML5 요소" class="aBlack">정규 표현식과 새로운 HTML5 요소</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348469.html" title="NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법" class="aBlack">NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>