HTML5 のフォームの新しい属性の分析

この記事では、主に HTML5 フォームの新しい属性を詳しく紹介し、シンプルでわかりやすい分析例を添付します。必要な友達、一緒に見てみましょう

1. フォーム内の要素の form 属性

H5 では、ページ上の任意の場所にフォームを配置し、その要素に form 属性を指定できます。属性値はフォームの 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 属性は上記と同じで、すべての要素に影響します。コードは

と省略されます。6. 要素

の autofocus 属性は、に autofocus 属性を追加します。テキスト ボックス、選択ボックス、ボタン コントロールは、画面が開くと自動的にフォーカスされます。

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

ページ上で autofocus 属性を持つことができるコントロールは 1 つだけであり、悪用することはできません

7. 必須属性

は、入力値が空の場合、送信されません。許可されている場合、ブラウザはユーザーにコンテンツの入力を求めるテキスト情報を表示します。

8. ラベル属性

は、フォームのすべての要素にラベル属性を追加できます。属性値は、要素にバインドされたラベル要素のコレクションを表します。

<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. ラベルのcontrol属性

ラベル(label)内にform要素を配置し、ラベルのcontrol属性を通じてform要素にアクセスできます。

<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.テキストボックスのプレースホルダー属性

または textarea) 選択状態のときにプロンプ​​ト情報 (灰色) を入力します

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

11. テキストボックスの list 属性

を 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>

テキストボックスに「あなた」と入力すると、下に「あなたは人間です」、「あなたは豚です」、「あなたは犬です」の３つのプロンプトが表示されます。キーワードを入力した場合、プロンプトは表示されません

12. テキスト ボックスの autocomplete 属性には、「on」、「off」、および「" (指定なし) の 3 つの値があります。指定しない場合は、ブラウザのデフォルト値が使用されます。使用方法は以下の通りです

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

テキストボックスに「私は人間です」などと入力して送信をクリックすると、前のページに戻ってテキストボックスに「私」と入力すると、メッセージが表示されます「私は人間です」と言って現れます。

13. テキストボックス

のpattern属性は、HTML部分で正規表現を直接使用して、入力された値が要件を満たしているかどうかを判断するのと同じです。

内容を入力してください: 5f8e73e983da88a4e1fe29bcfdda8e59

このコードは、入力が間違っている場合は数字と 3 文字の大文字を入力する必要があります。 , 「要求されたコンテンツと一致してください（Google）」というメッセージが表示されます。

14. テキストボックス

のselectionDirection属性は、inputのtext要素とtextarea要素に使用されます。ユーザーがこれら2つの要素でテキストの一部を選択すると、この要素を使用して選択範囲を取得できます。方向。

<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 を使用して、チェックボックスの「明示的に選択されていない」ステータスを説明します。

16. 画像送信ボタンの高さ属性と幅属性

高さ: 画像ボタン内の画像の高さを指定します

幅: 画像の幅を指定します。画像ボタン内;

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

17. textarea要素のmaxlength属性とwrap属性

maxlength：入力できるテキストの数を制限するために整数値を使用して設定します。テキストエリア要素。

wrap: 属性値をソフトまたはハードに指定できます。属性がハードの場合、Enter キーが使用されていない場合でも、テキストが指定された行の範囲を超えて自動的に改行されます。フォーム送信時の改行部分のロゴ。

以上がHTML5 のフォームの新しい属性の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。