HTMLの新しいフォーム屬性
HTML の新しいフォーム屬性
HTML5 の <form> タグには、いくつかの新しい屬性が追加されました:
autocomplete
novalidate<input>autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
高さと幅
リスト
最小値と最大値
複數(shù)
パターン (正規(guī)表現(xiàn))
プレースホルダー
必須
step
<form> / <input> autocomplete 屬性
autocomplete 屬性は、フォームまたは入力フィールドにオートコンプリート機(jī)能があることを規(guī)定します。 ユーザーがオートコンプリートフィールドに入力を開(kāi)始すると、ブラウザーはフィールドに入力されたオプションを表示する必要があります。
ヒント: autocomplete 屬性は、form 要素ではオンになっていても、input 要素ではオフになっている場(chǎng)合があります。
注: オートコンプリートは、<form> タグだけでなく、テキスト、検索、URL、電話、メール、パスワード、日付ピッカー、範(fàn)囲、色などの <input> タグでも機(jī)能します。
<form> novalidate 屬性
novalidate 屬性のブール屬性は、フォームの送信時(shí)にフォームまたは入力フィールドを検証しないことを指定します。
<input> autofocus 屬性 autofocus 屬性は、ページのロード時(shí)にフィールドが自動(dòng)的にフォーカスされることを指定します。<input> form 屬性
form 屬性は、入力フィールドが屬する 1 つ以上のフォームを指定します。ヒント: 複數(shù)のフォームを參照する必要がある場(chǎng)合は、スペースで區(qū)切られたリストを使用します。
<input> formaction 屬性 formaction 屬性は、フォーム送信の URL アドレスを記述するために使用されます。
注: formaction 屬性は、type="submit" および type="image" に使用されます。
<input> formenctype 屬性
formenctype 屬性は、サーバーに送信されるフォームのデータエンコーディングを記述します (method= の場(chǎng)合のみ)フォーム內(nèi)の「post」 form) Form) formenctype 屬性は、form 要素の enctype 屬性をオーバーライドします。
主に: この屬性は、type="submit" および type="image" と組み合わせて使用??されます。
<input> formmethod 屬性
formmethod 屬性は、フォームの送信方法を定義します。 formmethod 屬性は、<form> 要素のメソッド屬性をオーバーライドします。
注: この屬性は、type="submit" および type="image" とともに使用できます。
<input> formnovalidate 屬性novalidate 屬性は、フォームの送信時(shí)に <input> 要素を検証する必要がないことを示します。 formnovalidate 屬性は、<form> 要素の novalidate 屬性をオーバーライドします。
注: formnovalidate 屬性は type="submitと一緒に使用されます。
<input> formtarget 屬性
formtarget 屬性は、フォーム送信データの受信後の表示を示す名前またはキーワードを指定します。
formtarget 屬性は、<form> 要素の target 屬性をオーバーライドします。
注: formtarget 屬性は、type="submit" および type="image"<input> とともに使用されます。屬性
height 屬性と width 屬性は、image タイプの <input> タグに使用される畫像の高さと幅を指定します。 注: 高さと幅の屬性は、畫像タイプの <input> タグにのみ適用されます。 ヒント: 畫像は通常、高さと幅の両方の屬性を指定します。畫像に高さと幅が設(shè)定されている場(chǎng)合、ページの読み込み時(shí)に畫像に必要なスペースが保持されます。これらの屬性がないと、ブラウザは畫像のサイズを認(rèn)識(shí)できないため、適切なスペースを予約できません。畫像により、読み込みプロセス中に (畫像が読み込まれている場(chǎng)合でも) ページ レイアウト効果が変化します。
<input> list 屬性
list 屬性は、入力フィールドのデータリストを指定します。 datalist は、入力フィールドのオプションのリストです。 <input> min 屬性と max 屬性
min、max、step 屬性は、數(shù)値または日付を含む入力タイプの制限 (制約) を指定するために使用されます。 注: min、max、step 屬性は、日付ピッカー、數(shù)値、範(fàn)囲の <input> タグのタイプに適用されます。 <input> multiple 屬性 pattern 屬性は、<input> 要素の値を検証するために使用される正規(guī)表現(xiàn)を記述します。 プレースホルダー屬性は、入力フィールドの期待値を説明するヒントを提供します。 ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。 <input> 必須屬性 必須屬性は、送信前に入力フィールドに入力する必要があることを指定します (空にすることはできません)。 注: 必須屬性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番號(hào)、チェックボックス、ラジオ、ファイルの <input> タグのタイプに適用されます。 <input> step 屬性 step 屬性は、入力フィールドの有効な數(shù)値間隔を指定します。 step="3" の場(chǎng)合、有効な數(shù)値は -3、0、3、6 などです。 ヒント: step 屬性を max 屬性および min 屬性とともに使用して範(fàn)囲値を作成できます 注: step 屬性は次の型です。數(shù)値、範(fàn)囲、日付、日時(shí)、ローカル日時(shí)、月、時(shí)刻、週が一緒に使用されます。 以下のケースでは、よく使用される屬性について説明しました。ご覧ください。コードとその隣のコードに直接コメントし、ブラウザの実行結(jié)果を比較してその意味を理解してください<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head>
<body>
<!--
placeholder:用于在文本框未輸入時(shí)提示作用
autofocus:用于控件自動(dòng)獲取焦點(diǎn)
-->
<input type="search" name="key" value="" results="s" placeholder="君樂(lè)寶" autofocus="true">
<input type="button" name="" value="搜索">
<!--
novalidate:在控件中加入了required、emial、url等驗(yàn)證后，如果想讓這些驗(yàn)證失效，可以在表單中將novalidate設(shè)置為tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<br/><br/>
<!--
required:必填
autocomplete:在網(wǎng)頁(yè)的文本框中輸入部分內(nèi)容或者雙節(jié)時(shí)，經(jīng)常會(huì)看到在下面顯示輸入過(guò)的內(nèi)容，
這就是html5的新特性：自動(dòng)完成，如果不想使用此功能，將其設(shè)置為off即可
-->
<input type="text" name="UserName" value="" required autocomplete="off">
<br/><br/>
<!--
multiple:在選擇文件時(shí)，默認(rèn)只能單選，加上這個(gè)屬性后，則可以使用鼠標(biāo)選中多個(gè)文件進(jìn)行上傳
-->
選擇文件
<input type="file" name="upload" value="" multiple="multiple">
<br/><br/>
<!--
list：這個(gè)屬性要和datalist元素一起使用，指定此文本框的可選擇項(xiàng)，另外其相較于select的優(yōu)點(diǎn)在于還可以輸入
-->
區(qū)號(hào)：
<input type="text" name="age" value="" list="list1">
<br/><br/>
<datalist id="list1">
<option value="0312">保定</option>
<option value="0311">石家莊</option>
<option value="010">北京</option>
<option value="0313">唐山</option>
</datalist>
<br/><br/>
<!--
formaction:可以更改點(diǎn)擊此按鈕式提交到服務(wù)器的處理程序
formmethod:可以更改向服務(wù)器提交數(shù)據(jù)的方式
-->
<input type="submit" name="subsave" value="提交"><br/><br/>
<input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>
</html>
