フォーム関連の新規要素と属性4

56574 ワード

HTML 5 フォームm formation formmethod labels input

4.1フォーム要素の新規および廃棄属性
フォームの新しい属性は2つに分けることができます:コミットクラス:サブ武器にコミットする関連属性、formaction、formmcthod、formtype制御クラス:required、antofocus、labels
4.1.1 formフォームのプロパティ
H 5の前に、フォーム内のすべての依存ラベル(下位ラベル)は、formラベルの内部に書かなければならない.H 5:ラベルはどこにでも書くことができますが、2つのステップが必要です:[1]formにidを設定[2]要素にform属性を設定し、form属性の値がformid属性の値です.

<body>
<form action="XXX.api" id="testForm">
    
         ：<input name="psd" type="password"/><br>
    <input type="submit"/>
form>
     ：<input form="testForm" name="date" type="text"/><br>
body>

4.1.2 formation
H 5の前に、フォーム内のすべてのsubmitは、統一されたアドレス、すなわち指定されたactionにのみコミットされ、H 5は各submitに異なるactionを設定することができ、formaction属性を設定することによって実現される.

<body>
<form id="testForm">
         ：<input name="date" type="text"/><br>
         ：<input name="psd" type="password"/><br>
    <input type="submit" value="  1" formaction="XXX1.api"/>
    <input type="submit" value="  2" formaction="XXX2.api"/>
form>
body>

4.1.3 formmethod


         ："date" type="text"/>
         ："psd" type="password"/>
    type="submit" value="  1"  formmethod="GET"/>

4.1.4 formenctype符号化方式

<body>
<form id="testForm" enctype="text/plain">
         ：<input name="date" type="text"/><br>
         ：<input name="psd" type="password" form="testForm"/><br>
    <input type="submit" value="  1" formaction="XXX1.api" formmethod="get"/>
    <input type="submit" value="  2" formaction="XXX2.api" formmethod="post"/>
form>
body>

4.1.5 formtarget

<body>
<form id="testForm">
         ：<input name="date" type="text"/><br>
         ：<input name="psd" type="password" form="testForm"/><br>
    <input formaction="XXX1.api" formtarget="_self" type="submit" value="  1"/>
    <input formaction="XXX2.api" formtarget="_blank" type="submit" value="  2"/>
form>
body>

4.1.6 autofocus入力ボックスまたはボタンにautofocus属性を追加し、ページが開くと、その要素は自動的にカーソル焦点を取得する.注:複数の要素にautofocusが設定されている場合は、最初にautofocusが設定されている要素のみが有効になります.

<body>
<form id="testForm">
         ：<input name="date" type="text"/><br>
    
         ：<input name="psd" type="password"/><br>
    <input autofocus formaction="XXX1.api" formtarget="_self" type="submit" value="  1"/>
    <input formaction="XXX2.api" formtarget="_blank" type="submit" value="  2"/>
form>
body>

4.1.7 required入力ボックスにこの属性が設定されている場合、入力ボックスに入力内容がない場合は、「このフィールドに記入してください」と発行ボタンをクリックします.

<body>
<form id="testForm">
         ：<input name="date" type="text" required/><br>
         ：<input name="psd" type="password" required/><br>
    <input formaction="XXX1.api" formtarget="_self" type="submit" value="  1"/>
    <input formaction="XXX2.api" formtarget="_blank" type="submit" value="  2"/>
form>
body>

4.1.8 .output注意:IEブラウザはこのラベルをサポートしていません.

<body>
<form id="testForm">
    <div>
        <label for="date">     ：label>
        <input id="date" name="date" type="text"/><br>
    div>
    <div>
        <label for="psd">      ：label>
        <input id="psd" name="psd" type="password" required/>
        <label for="psd">label>
        <label for="psd">label><br>
    div>
    <input type="button" onclick="validate()" value="  "/>
form>
body>
<script>
    function validate() {
        var psd = document.getElementById("psd");
        psd.labels[1].innerHTML = "  ";
        psd.labels[1].setAttribute("style","font-size:9px;color:red");

    }
script>

4.1.9テキストボックスlabels入力ボックスに内容がない場合、placeholderの値がぼやけて表示されます.入力ボックスに内容がある場合placeholderは非表示になります

<body>
<form id="testForm">
    <div>
        <input id="date" name="date" placeholder="     " type="text"/><br>
    div>
    <div>
        <input id="psd" name="psd" placeholder="     " type="password" required/>
    div>
    <input type="button" onclick="validate()" value="  "/>
form>
body>

4.1.10.テキストボックスplaceholder入力ボックスに内容がない場合、placeholderの値がぼやけて表示されます.入力ボックスに内容がある場合placeholderは非表示になります

<body>
<form id="testForm">
    <div>
        <input id="date" name="date" placeholder="     " type="text"/><br>
    div>
    <div>
        <input id="psd" name="psd" placeholder="     " type="password" required/>
    div>
    <input type="button" onclick="validate()" value="  "/>
form>
body>

4.1.11テキストボックスlist H 5にlist属性が追加され、属性値はdatelistのidの値である.DatelistもH 5の新しい要素です.リスト属性が設定されており、この入力ボックスには「検索」機能があり、datelistから入力に関連するものが検索されます.

<body>
<form id="testForm">
    <div>
        <input list="languageList" placeholder="           " type="text"/><br>
        <datalist id="languageList">
            <option>JSoption>
            <option>JAVAoption>
            <option>C#option>
            <option>Object-Coption>
        datalist>
    div>
form>
body>

4.1.12 pattern inputが入力した内容は、pattern属性に合わせて検証することで、pattern書き込み検証の正規表現を行うことができる.

<body>
<form id="testForm">
    <div>
        <input pattern="[A-Z]{5}" placeholder="   5      " type="text"/><br>
    div>
    <input type="submit">
form>
body>

4.1.12テキストボックスinput type=imageのwidthとheight一般的にinputタグ設定widthとheightは効果がありませんが、type=imageの場合はwidthとheightを設定できます.
4.2 HTML 5改良のinput要素の種類
1.色入力ボックス入力ボックスのtype属性がcolorに設定されている場合、システムが提供するパレットを直接呼び出すことができます.唯一の欠点は、透明度のデバッグ機能が欠けていることです.この属性には互換性の問題があり、iPhoneの携帯電話の微信ブラウザでは窓の色タブを弾くことができないことが分かった.

<body>
<form action="#" method="get">
         ：<input type="text"><br>
         ：<input type="color" name="color"><br>
    <input type="submit" value="  "><br>
form>
body>

2.アドレス入力ボックス入力ボックスtype属性がURLに設定されている場合は、アドレス入力のみを受け付け、入力されたアドレスやフォーマットに誤りがある場合は、コミットは許可されません.自己検出機能を備えています.モバイル側の仮想キーボードでは、Webサイトに関連する入力ページに自動的に切り替わります.(www./.com)

<body>
<form action="#" method="get">
         ：<input type="text"><br>
         ：<input type="color" name="color"><br>
         ：<input type="url" name="url"><br>
    <input type="submit" value="  "><br>
form>
body>

3.メールボックス入力ボックス入力ボックスtype属性がemailに設定されている場合、入力ボックスには、入力内容がメールボックスでないか、メールボックスのフォーマットが間違っている場合、その入力ボックスはコミットできません.モバイル側の仮想キーボードでは、Webサイトに関連する入力ページに自動的に切り替わります.(@/.)

<body>
<form action="#" method="get">
         ：<input type="text"><br>
         ：<input type="color" name="color"><br>
         ：<input type="url" name="url"><br>
         ：<input type="email" name="email" multiple><br>
    <input type="submit" value="  "><br>
form>
body>

4.電話入力ボックス入力ボックスtype属性がtelに設定されている場合、この入力ボックスは電話番号専用に設定されていますが、検査ルールはありません.patternを設定することで設定できます.モバイル端末で仮想キーボードを使用すると、携帯電話のデジタルキーボードに自動的に切り替えられます.

<body>
<form action="#" method="get">
         ：<input type="text"><br>
         ：<input type="color" name="color"><br>
         ：<input type="url" name="url"><br>
         ：<input type="email" name="email" multiple><br>
         ：<input type="tel" name="tel"><br>
    <input type="submit" value="  "><br>
form>
body>

5.検索入力ボックスsearchタイプの入力ボックスは、キーワードを検索するためのテキストボックスであり、searchタイプとtextタイプは外形的にのみ異なる.

<body>
<form action="#" method="get">
         ：<input type="search" name="search"><br><br>
         ：<input type="number" name="number"><br><br>
         (  )：<input type="number" name="number" min="1" max="2"><br><br>
    <input type="submit" value="  "><br>
form>
body>

6.数字入力ボックスinputのtype属性をnumberとし、入力ボックスが受け入れる数字の入力ドメインを設定し、min,maxで入力数字の範囲を制御することができる.7.range入力ボックスのプロパティが「range」に設定されている場合、範囲内の数値のテキストボックスを設定することができます.そのタイプはスライダとして表示され、minとmaxの制御範囲を設定することができます.デフォルト範囲は0-100です.stepプロパティを設定している場合、ドラッグのステップ幅を指定できます.typeが設定されているinputについては、input入力ボックスが空であれば、コミット時にチェックはしませんが、内容が記入されていて、記入されている内容のフォーマットが間違っていると、コミットされた受信にプロンプトボックスが表示され、マウスカーソルがその入力ボックスにフォーカスします.

<body>
<form action="#" method="get">
              ：<input type="text"><br><br>
              ：<input type="color" name="color"><br><br>
              ：<input type="url" name="url"><br><br>
              ：<input type="email" name="email" multiple><br><br>
              ：<input type="tel" name="tel" pattern="/^{[1]|[3]|[9]}$/"><br><br>
              ：<input type="search" name="search"><br><br>
              ：<input type="number" name="number"><br><br>
         (  )：<input type="number" name="number" min="1" max="2"><br><br>
              ：<input type="range" name="range" min="1" max="100" step="10"><br><br>
    <input type="submit" value="  "><br>
form>
body>

時間コントロール:
1、dateカレンダー(了解すればいい、互換性の問題がある)

  ：type="date" name="date" value=""/>

dateはinput要素の属性がカレンダー形式でユーザーに表示されますが、欠点はこの属性がグーグルブラウザでしかサポートされていないことで、他のブラウザに表示されるのは普通のテキストボックスです.
2、time時間(了解すればいい、互換性の問題がある)

<body>
<form action="#" method="get">
      ：<input type="date" name="date" value=""><br><br>
      ：<input type="time" name="time" value=""><br><br>
      ：<input type="time" name="time" value="1:10"><br><br>
    <input type="submit">
form>
body>

timeプロパティはinput要素の時間を入力するテキストボックスで、ユーザーが入力した時間を受け入れ、入力に誤りがあるかどうかを判断します.同様に、このプロパティは現在グーグルブラウザでしかサポートされていません.
3、datetime(了解すればいい、互換性の問題がある)

<body>
<form action="#" method="get">
         ：<input type="date" name="date" value=""><br><br>
         ：<input type="time" name="time" value=""><br><br>
         ：<input type="time" name="time" value="1:10"><br><br>
      +  ：<input type="datetime" name="datetime" value="2017-08-25"><br><br>
    <input type="submit">
form>
body>

Datetimeと最初の2つの違いは、テキストボックスが直接現れ、ユーザーに入力させることです.
4、datetime-local(了解すればいい、互換性の問題がある)

<body>
<form action="#" method="get">
         ：<input type="date" name="date" value=""><br><br>
         ：<input type="time" name="time" value=""><br><br>
         ：<input type="time" name="time" value="1:10"><br><br>
      +  ：<input type="datetime" name="datetime" value="2017-08-25"><br><br>
      &  ：<input type="datetime-local" name="datetime-local"><br><br>
    <input type="submit">
form>
body>

Datetimeはinputで時間と日付の属性を統合し、この効果はグーグルブラウザにのみ表示されます.
5、week週間(了解すればいい、互換性の問題がある)

<body>
<form action="#" method="get">
         ：<input type="date" name="date" value=""><br><br>
         ：<input type="time" name="time" value=""><br><br>
         ：<input type="time" name="time" value="1:10"><br><br>
      +  ：<input type="datetime" name="datetime" value="2017-08-25"><br><br>
      &  ：<input type="datetime-local" name="datetime-local"><br><br>
         ：<input type="week" name="week"><br><br>
    <input type="submit">
form>
body>

Inputの新しいプロパティには、主に日付の数週目が表示されます.注意:週のみ表示されます.
6、month属性(了解すればいい、互換性の問題がある)

<body>
<form action="#" method="get">
         ：<input type="date" name="date" value=""><br><br>
         ：<input type="time" name="time" value="10:25"><br><br>
      +  ：<input type="datetime" name="datetime" value="2017-08-25"><br><br>
      &  ：<input type="datetime-local" name="datetime-local"><br><br>
         ：<input type="week" name="week"><br><br>
         ：<input type="month" name="month"><br><br>
    <input type="submit">
form>
body>

monthプロパティには主に月が表示され、dateと比較して月はinput要素で後の日数が少なくなります.

アルゴリズムコンテスト入門経典読書ノート第一章

HTML 5 js jq制御による再生一時停止