HTML5 フォームの新しい要素と属性-H5 チュートリアル-php.cn

HTML5 フォームの新しい要素と属性

PHPz

リリース： 2017-03-12 15:56:09

オリジナル

1209 人が閲覧しました

1. タグ control属性

HTML5では、タグ内にform要素を配置し、タグのcontrol属性を通じてform要素にアクセスできます。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9     function setValue(){10         var label=document.getElementById("label");11         var textbox=label.control;12         textbox.value=510006;13     }14 </script>15     <form>16     <label id="label">17     邮编：18         <input id="txt_zip" maxlength="6">19         <small>请输入六位数字</small>20     </label>21     <input type="button" value="设置默认值" onclick="setValue()">22     </form>23 </body>24 </html>

ログイン後にコピー

テキストボックスプレースホルダー属性

プレースホルダーとは、テキストボックスが未入力状態のときに表示される入力プロンプトを指します。テキストボックスが未入力状態でカーソルフォーカスがない場合、入力プロンプトのテキストはぼやけます。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Placehoder属性</title> 6 </head> 7 <body> 8     <input type="text" placeholder="请输入用户名"> 9 </body>10 </html>

ログイン後にコピー

テキストボックス

リスト属性

HTML5では、単一行のテキストボックスにリスト属性が追加され、この属性の値は特定のデータリスト要素のIDになります。 datalist 要素も HTML5 の新しい要素です。この要素は選択ボックスに似ていますが、ユーザーが設定したい値が選択リストにない場合は、ユーザーが自分で入力することができます。 datalist 要素自体は表示されませんが、テキストボックスにフォーカスが置かれたときに入力を求めるプロンプトとして表示されます。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>List属性</title> 6 </head> 7 <body> 8     <form> 9         <input type="text" name="zkdir" list="zkdir">10         <datalist id="zkdir" style="display: none;">11         <option value="HTML5学习">HTML5学习</option>12         <option value="CSS3学习">CSS3学习</option>13         <option value="JavaScript学习">JavaScript学习</option>14         </datalist>15     </form>16 </body>17 </html>

ログイン後にコピー

テキストボックスのAutoCompleteプロパティ

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>文本框AutoComplete属性</title> 6 </head> 7 <body> 8     <form> 9         <input type="text" name="zkdir" autocomplete="on" list="zkdir"> <!--autocomplete有两个值：on&off，不填写取决于当前浏览器的默认值-->10         <datalist id="zkdir" style="display: none;">11         <option value="HTML5学习">HTML5学习</option>12         <option value="CSS3学习">CSS3学习</option>13         <option value="JavaScript学习">JavaScript学习</option>14         </datalist>15     </form>16 </body>17 </html>

ログイン後にコピー

テキストボックスのパターンプロパティ

テキストボックスの選択

Direction

プロパティ

checkbox

不定属性

画像投稿ボタン

」

高さ属性と幅属性

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