HTML5 フォームの新しい属性の詳細な紹介-H5 チュートリアル-php.cn

HTML5 フォームの新しい属性の詳細な紹介

黄舟

リリース： 2017-03-13 17:20:50

オリジナル

2156 人が閲覧しました

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

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

H5 では、ページ上の任意の場所にフォームを配置し、次のフォーム属性を指定できます。要素、属性値はフォームの ID です。これにより、要素が指定されたフォームに属することを宣言できます

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

ログイン後にコピー

2。H4 では、フォーム内の要素の formaction 属性です。フォーム送信メソッド

<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. テキストボックス

のパターン属性は、入力された値が要件を満たしているかどうかを判断するためにHTML部分で直接

正規表現

を使用することと同等です。内容を入力してください:

このコードは、入力が間違っている場合は数字と 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.

checkboxのindeterminate属性

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

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

width:指定图片按钮中图片的宽度；

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

ログイン後にコピー

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

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

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