HTML5 양식의 새로운 속성에 대한 자세한 소개-H5 튜토리얼-php.cn

HTML5 양식의 새로운 속성에 대한 자세한 소개

黄舟

풀어 주다： 2017-03-13 17:20:50

원래의

2158명이 탐색했습니다.

본 글에서는 HTML5폼의 새로운 속성을 중심으로 자세하게 소개하고, 간단하고 이해하기 쉬운 예시 분석을 첨부합니다. 필요하신 친구들 함께 살펴보세요

1. 폼에 있는 요소의

for

m 속성에 폼을 넣을 수 있습니다. H5의 페이지 어디에서나 요소에 대한 양식 속성을 지정하면 속성 값은 양식의 ID이므로 해당 요소가 지정된 양식

에 종속됨을 선언할 수 있습니다.

<form id="testform">
     <input type="text">
    </form>
    <textarea form="testform"></textarea>

로그인 후 복사

2. 양식 요소의 formaction 속성

H4에서는 양식 제출 방법

<form action="1.jsp">
</form>

로그인 후 복사

폼 전체 제출

H5에서는 제출한 jsp 페이지를 폼의 각 속성에 추가할 수 있습니다

<form action="1.jsp">
     <input type="submit" action="1-1.jsp">提交到1页面</form>
     <input type="submit" action="1-2.jsp">提交到2页面</form>
     <input type="submit" action="1-3.jsp">提交到3页面</form>
    </form>

로그인 후 복사

3. 양식 요소의 formmethod 속성

양식 요소마다 제출 방법을 지정할 수 있습니다

<form action="1.jsp">
     <input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form>
     <input type="submit" action="1-2.jsp" formmethod="get">提交到2页面，get提交方法</form>
    </form>

로그인 후 복사

4 . 양식 요소의 formenctype 속성

위와 동일하며 모든 요소에 적용되며 코드는 축약됩니다.

5. 양식의 formtarget 속성

위와 동일하며 모든 요소에서 작동하며 코드는

요소의 자동 초점 속성을 추가합니다. 텍스트 상자, 선택 상자 및 버튼 제어 등에 대한 자동 초점 속성. 화면이 열리면 자동으로 초점을 맞춥니다.

<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>

로그인 후 복사

페이지에서 하나의 컨트롤만 자동 초점 속성을 가질 수 있으며 남용될 수 없습니다.

7 필수 속성

대부분의 입력 요소에 사용할 수 있습니다. 입력 값이 비어 있으면 브라우저에 내용을 입력해야 한다는 텍스트 정보가 표시됩니다.

8. 레이블 속성

은 양식의 모든 요소에 레이블 속성을 추가할 수 있습니다. 속성 값은 요소에 바인딩된 레이블 요소를 나타내는 NodeList 개체입니다. . 수집.

<script type="text/javascript">
        window.onload = function () {
         var text = document.getElementById(&#39;text&#39;);
            var btn = document.getElementById(&#39;btn&#39;);
            var form = document.getElementById(&#39;form&#39;);
            btn.onclick = function() {
                if (text.value.trim() =="") {
                 //alert(text.labels.length)
                 if(text.labels.length==1) {
                  var label = document.createElement("label");
                  label.setAttribute("for","text");
                  form.insertBefore(label,btn);
                  text.labels[1].innerHTML = "请输入姓名";
                  text.labels[1].setAttribute(
               "style","font-size:9px;color:red");
                 }
                }
                else if(text.labels.length>1)
                 form.removeChild(text.labels[1]);
                }
        }
 </script>
    <form id="form"> 
     <label id="label" for="text">姓名：</label>
     <input id="text">
     <input id="btn" type="button" value="验证">
    </form>

로그인 후 복사

사용자가 아무 값도 입력하지 않고 확인을 클릭하면 레이블 요소가 텍스트 상자 옆에 동적으로 추가됩니다. 레이블 요소는 "이름을 입력하세요. "; 사용자가 텍스트 상자에 입력하면 "이름을 입력하세요"라는 텍스트가 있는 레이블이 삭제됩니다.

9. 라벨의 컨트롤 속성

레이블 내부에 양식 요소를 배치하고 라벨의 컨트롤 속성을 통해 양식 요소에 액세스할 수 있습니다.

<script type="text/javascript">
        function setValue() {
         console.log(1);
         var label =document.getElementById("label");
         var textbox = label.control;
         textbox.value = "231456"
        }
         </script>
             <form>
     <label id="label">
      邮编：
      <input id="txt_zip" maxlength="6">
      <small>请输入6位数字</small>
     </label>
     <input type="button" value="设置默认值" onclick="setValue()">
    </form>

로그인 후 복사

브라우저에서 페이지를 열고 "기본값 설정" 버튼을 클릭하면 텍스트 상자에 231456이 표시됩니다.

10. 텍스트 상자의 자리 표시자 속성

텍스트 상자(텍스트 또는 텍스트 영역)가 선택된 상태일 때 프롬프트 정보(회색)를 입력합니다.

<input type="text" palceholder="hahah">

로그인 후 복사

11. 텍스트 상자

의 목록 속성이 h5의 새로운 datalist 요소와 결합되어 프롬프트 상자

<를 만듭니다. 🎜>

text:<input type="text" name="greeting" list="greetings">
    <!-- 使用style="display:none";将datalist元素设置为不显示 -->
    <datalist id="greetings" style="display:none">
     <option value="你是人">你是人</option>
     <option value="你是猪">你是猪</option>
     <option value="你是狗">你是狗</option>
    </datalist>

로그인 후 복사

텍스트 상자에 있을 때 에 "당신"을 입력하면 아래에 "당신은 인간입니다", "당신은 돼지입니다", "당신은 개입니다"라는 3개의 프롬프트가 나타납니다. 키워드가 없으면 프롬프트가 표시되지 않습니다.

12. 텍스트 상자의 자동 완성 속성

autocomplete에는 "on", "off", 및 ""(지정되지 않음). 지정하지 않으면 브라우저의 기본값이 사용됩니다. 사용 방법은 다음과 같습니다

<input type="text" name="greeting" list="greetings" autocomplete="on">

로그인 후 복사

텍스트 상자에 "나는 인간입니다"를 입력하고 제출을 클릭하면 이전 페이지로 돌아가서 "I"를 입력합니다. 텍스트 상자에 "나는 인간입니다"라는 메시지가 나타납니다.

13. 텍스트 상자

의 패턴 속성은 html 부분의

정규 표현식 을 직접 사용하여 값을 결정하는 것과 같습니다. 입력이 요구 사항을 충족합니다.

내용을 입력하세요:

이 코드에는 숫자 3을 입력해야 합니다. 대문자 문자를 잘못 입력하면 '요청한 내용(Google)과 일치하도록 해주세요'라는 메시지가 나타납니다.

14. 텍스트 상자

의 SelectionDirection 속성은 사용자가 마우스로 텍스트의 일부를 선택할 때 사용됩니다. 두 개의 요소를 사용할 수 있습니다. 이 요소는 선택 방향을 얻는 데 사용됩니다.

<script type="text/javascript">
        function alertSelectionDirection() {
         var control = document.forms[0][&#39;text&#39;];
         var Direction = control.selectionDirection;
         alert(Direction);
        }
 </script>
 <form>
     <input type="text" name="text">
     <input type="button" value="惦记我" onclick="alertSelectionDirection()" >
        </form>

로그인 후 복사

15. 체크박스의 불확정 속성

체크박스의 경우 과거에는 선택 및 선택되지 않은 상태 HTML5에서는 js의 이 요소에 indeterminate 속성을 사용하여 확인란의 "명시적으로 선택되지 않음" 상태를 나타낼 수 있습니다.

  <script>
        var cb = document.getElementById("cb");
        //将indeterminate的属性设置为true
        cb.indeterminate = true;
        </script>
        <input type="checkbox" indeterminate id="cb">indeterminate属性测试

로그인 후 복사

16. 이미지 제출 버튼의 height 속성과 width 속성

높이: 이미지 버튼에 이미지 높이를 지정합니다.
width:指定图片按钮中图片的宽度；

<input type="image" src="img/2.png" width="23" height="23">

로그인 후 복사

17. textarea元素的maxlength属性与wrap属性

maxlength :使用整数值进行设定，用于限定textarea元素中可输入文字的个数。
wrap:可指定属性值为soft与hard.当属性为hard时，在没有用回车键而是文字超出一排规定范围而自动换行时，提交表单时会在换行处添加一个换行标志。

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