HTMLの新しいフォーム属性

HTML の新しいフォーム属性

HTML5 の <form> タグには、いくつかの新しい属性が追加されました:

autocomplete

novalidate

<input>

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

高さと幅

リスト

最小値と最大値

複数

パターン (正規表現)

プレースホルダー

必須

step

<form> / <input> autocomplete 属性

autocomplete 属性は、フォームまたは入力フィールドにオートコンプリート機能があることを規定します。 ユーザーがオートコンプリートフィールドに入力を開始すると、ブラウザーはフィールドに入力されたオプションを表示する必要があります。

ヒント: autocomplete 属性は、form 要素ではオンになっていても、input 要素ではオフになっている場合があります。

注: オートコンプリートは、<form> タグだけでなく、テキスト、検索、URL、電話、メール、パスワード、日付ピッカー、範囲、色などの <input> タグでも機能します。

<form> novalidate 属性

novalidate 属性のブール属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。

<input> autofocus 属性

autofocus 属性は、ページのロード時にフィールドが自動的にフォーカスされることを指定します。

<input> form 属性

form 属性は、入力フィールドが属する 1 つ以上のフォームを指定します。

ヒント: 複数のフォームを参照する必要がある場合は、スペースで区切られたリストを使用します。

<input> formaction 属性 formaction 属性は、フォーム送信の URL アドレスを記述するために使用されます。

注: formaction 属性は、type="submit" および type="image" に使用されます。

<input> formenctype 属性

formenctype 属性は、サーバーに送信されるフォームのデータエンコーディングを記述します (method= の場合のみ)フォーム内の「post」 form) Form) formenctype 属性は、form 要素の enctype 属性をオーバーライドします。

主に: この属性は、type="submit" および type="image" と組み合わせて使用されます。

<input> formmethod 属性

formmethod 属性は、フォームの送信方法を定義します。 formmethod 属性は、<form> 要素のメソッド属性をオーバーライドします。

注: この属性は、type="submit" および type="image" とともに使用できます。

<input> formnovalidate 属性

novalidate 属性は、フォームの送信時に <input> 要素を検証する必要がないことを示します。 formnovalidate 属性は、<form> 要素の novalidate 属性をオーバーライドします。

注: formnovalidate 属性は type="submit

と一緒に使用されます。

<input> formtarget 属性

formtarget 属性は、フォーム送信データの受信後の表示を示す名前またはキーワードを指定します。

formtarget 属性は、<form> 要素の target 属性をオーバーライドします。

注: formtarget 属性は、type="submit" および type="image"<input> とともに使用されます。属性

height 属性と width 属性は、image タイプの <input> タグに使用される画像の高さと幅を指定します。 注: 高さと幅の属性は、画像タイプの <input> タグにのみ適用されます。 ヒント: 画像は通常、高さと幅の両方の属性を指定します。画像に高さと幅が設定されている場合、ページの読み込み時に画像に必要なスペースが保持されます。これらの属性がないと、ブラウザは画像のサイズを認識できないため、適切なスペースを予約できません。画像により、読み込みプロセス中に (画像が読み込まれている場合でも) ページレイアウト効果が変化します。

<input> list 属性

list 属性は、入力フィールドのデータリストを指定します。 datalist は、入力フィールドのオプションのリストです。 <input> min 属性と max 属性

min、max、step 属性は、数値または日付を含む入力タイプの制限 (制約) を指定するために使用されます。 注: min、max、step 属性は、日付ピッカー、数値、範囲の <input> タグのタイプに適用されます。

<input> multiple 属性

multiple 属性は、<input> 要素で複数の値を選択できることを指定します。
注: multiple 属性は、電子メールとファイルの <input> タグのタイプに適用されます。 : email、および file.
<input> パターン属性
pattern 属性は、<input> 要素の値を検証するために使用される正規表現を記述します。
注: pattern 属性は、テキスト、検索、URL、電話番号、電子メール、およびパスワードの <input> タグのタイプに適用されます。
ヒント: パターンを説明するためにグローバル title 属性とともに使用されます。
<input> プレースホルダー属性
プレースホルダー属性は、入力フィールドの期待値を説明するヒントを提供します。ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。
注: プレースホルダー属性は、テキスト、検索、URL、電話、メール、パスワードの <input> タグのタイプに適用されます。
<input> 必須属性
必須属性は、送信前に入力フィールドに入力する必要があることを指定します (空にすることはできません)。注: 必須属性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルの <input> タグのタイプに適用されます。
<input> step 属性
step 属性は、入力フィールドの有効な数値間隔を指定します。
step="3" の場合、有効な数値は -3、0、3、6 などです。
ヒント: step 属性を max 属性および min 属性とともに使用して範囲値を作成できます
注: step 属性は次の型です。数値、範囲、日付、日時、ローカル日時、月、時刻、週が一緒に使用されます。

以下のケースでは、よく使用される属性について説明しました。ご覧ください。コードとその隣のコードに直接コメントし、ブラウザの実行結果を比較してその意味を理解してください
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head> <body>  <input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true"> <input type="button" name="" value="搜索">  <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true"> <br/><br/>  <input type="text" name="UserName" value="" required autocomplete="off"> <br/><br/>  选择文件 <input type="file" name="upload" value="" multiple="multiple"> <br/><br/>  区号： <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/>  <input type="submit" name="subsave" value="提交"><br/><br/> <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get"> </form> </body> </html>

学び続ける

||

新しいファイル

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head> <body>  <input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true"> <input type="button" name="" value="搜索">  <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true"> <br/><br/>  <input type="text" name="UserName" value="" required autocomplete="off"> <br/><br/>  选择文件 <input type="file" name="upload" value="" multiple="multiple"> <br/><br/>  区号： <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/>  <input type="submit" name="subsave" value="提交"><br/><br/> <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get"> </form> </body> </html>

提出するリセットコード
自動運転