HTML5の新しいフォーム属性

HTML5 の新しいフォーム属性

HTML5 には、<form> タグと

<form> の新しい属性が追加されています。

autocomplete

novalidate

<input>新しい属性:

オートフォーカス
フォーム
フォームアクション
formenctype
formmethod
formnovalidate
formtarget
高さと幅
リスト
最小値と最大値
複数の
パターン(正規表現)
プレースホルダー
必須
ステップ

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

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

注: オートコンプリートは、<form> タグのほか、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲、色などの <input> タグに適用されます。

例

HTMLフォームでオートコンプリートをオンにする(1つの入力フィールドがオートコンプリートをオフにする):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" autocomplete="on">
    姓名:<input type="text" name="fname"><br/>
    留言<input type="text" name="content"><br/>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
</form>
<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form的 autocomplete属性为  "on"（开），但是e-mail自动为“off”（关）。</p>
</body>
</html>

プログラムを実行して試してみる

ヒント:一部のブラウジングこのプロパティを有効にするには、ブラウザーでオートコンプリートを有効にする必要がある場合があります。
<form> novalidate 属性
novalidate 属性のブール属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。 exexample
は、提出されたフォームのデータを確認する必要があります
autofocus 属性は、ページが読み込まれると、フィールドに自動的にフォーカスを取得します。例
ページがロードされるときに「メッセージ」入力フィールドに自動的にフォーカスを合わせます:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="" novalidate>     E-mail: <input type="email" name="user_email">     <input type="submit"> </form> <p><strong>注意</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p> </body> </html>
プログラムを実行して試してください
オートフォーカスを名前入力フィールドに変更して、結果を比較することができます2 つの実行違いを参照してください
<input> form 属性
form 属性は、入力フィールドが属する 1 つ以上のフォームを指定します。
ヒント: 複数のフォームを参照する必要がある場合は、スペースで区切ったリストを使用してください。
インスタンス
フォームの外側にある入力フィールドは HTML フォームを参照します (入力フォームはまだフォームの一部です):
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     姓名: <input type="text" name="fname" ><br>     留言: <input type="text" name="content" autofocus><br>     <input type="submit"> </form> <p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p> </body> </html>
プログラムを実行して試してください
注: IE はそうしますform 属性はサポートされません
<input> formaction 属性
formaction 属性は、フォーム送信の URL アドレスを記述するために使用されます
formaction 属性は、<form> の action 属性をオーバーライドします。 ; 要素。
注: formaction 属性は type="submit" と type="image" に使用されます。
例
次の HTML フォームには、異なるアドレスを持つ 2 つの送信ボタンが含まれています。上記のプログラムの 1 つは、demo.php ページに送信され、1 つは admin.php ページに送信されます

<input> formenctype 属性
formenctype
属性は、送信されたフォームのデータエンコーディングを記述しますサーバーへの送信 (フォームフォーム内のメソッド = "post" フォームのみ)
formenctype
属性は、form 要素の enctype 属性をオーバーライドします。
Main
: この属性は、type="submit" および type="image" とともに使用されます。
例最初の送信ボタンにはフォームデータを送信するためのデフォルトのエンコーディングがあり、2 番目の送信ボタンには「multipart/form-data」エンコーディング形式でフォームデータが送信されます:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="" id="form1">     姓名: <input type="text" name="fname"><br>     <input type="submit" value="Submit"> </form> <p> "留言" 字段没有在form表单之内，但它也是form表单的一部分。</p> 留言: <input type="text" name="lname" form="form1"> </body> </html>
プログラムを実行して試してください
<input> formmethod 属性
formmethod 属性は、フォームの送信方法を定義します。
formmethod 属性は、<form> 要素のメソッド属性をオーバーライドします。
注: この属性は、type="submit" および type="image" とともに使用できます。
例
フォーム送信メソッドを再定義する例:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="demo.php">     姓名: <input type="text" name="fname"><br>     密码: <input type="text" name="lname"><br>     <input type="submit" value="提交"><br>     <input type="submit" formaction="admin.php" value="提交"> </form> </body> </html>
上記のコードの 1 つは get メソッドでページに渡され、もう 1 つは formmethod メソッドで送信メソッドを再定義して送信するものです。 PHP ページの emo-post
<input> formnovalidate 属性
novalidate 属性は、<input> 要素が行うことを記述します。フォームの送信時に確認する必要はありません。
formnovalidate 属性は、<form> 要素の novalidate 属性をオーバーライドします。
注: formnovalidate 属性は、type="submit で使用されます
2 つの submit を持つフォーム。ボタン (検証の使用は適用されません):
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="" method="post">     name: <input type="text" name="fname"><br>     <input type="submit" value="提交">     <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交"> </form> </body> </html>
プログラムを実行して試してください<input> formtarget 属性
formtarget 属性は、フォーム送信の表示を示す名前またはキーワードを指定しますデータを受信すると、この属性は <form> 要素の target 属性をオーバーライドします。
注: formtarget 属性は、type="submit" および type="image" と組み合わせて使用されます。
例
別のウィンドウに表示される 2 つの送信ボタンフォーム:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="" method="get">      姓名: <input type="text" name="fname"><br>     密码: <input type="text" name="lname"><br>     <input type="submit" value="提交">     <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交"> </form> </body> </html>
プログラムを実行して試してみましょう
<input> 高さと幅の属性
そしてwidth 属性は、image タイプの <input> タグに使用される画像の高さと幅を指定します。
注: 高さと幅の属性は、画像タイプの <input> タグにのみ適用されます。
ヒント: 画像は通常、高さと幅の両方の属性を指定します。画像に高さと幅が設定されている場合、ページの読み込み時に画像に必要なスペースが保持されます。これらの属性がないと、ブラウザは画像のサイズを認識できないため、適切なスペースを予約できません。画像により、読み込みプロセス中に (画像が読み込まれている場合でも) ページレイアウト効果が変化します。
例
は、高さと幅の属性を使用して画像送信ボタンを定義します:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     E-mail: <input type="email" name="userid"><br>     <input type="submit" value="提交"><br>     <input type="submit" formnovalidate="formnovalidate" value="不验证提交"> </form> </body> </html>
プログラムを実行して試してください
<input> list属性
list属性は、入力フィールドのデータリスト。 datalist は、入力フィールドのオプションのリストです。
インスタンス
<datalist>の<input>値:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action=" ">      作者姓名: <input type="text" name="fname"><br>      书本名: <input type="text" name="lname"><br>     <input type="submit" value="正常提交">     <input type="submit" formtarget="_blank" value="提交到一个新的页面上"> </form> </body> </html>
プログラムを実行して試してください
<input> 最小、最大ステップ属性は、数値または日付を含む入力タイプの制限 (制約) を指定するために使用されます。
注: min、max、step 属性は、日付ピッカー、数値、範囲の <input> タグのタイプに適用されます。
例
<input>要素の最小値と最大値の設定:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     First name: <input type="text" name="fname"><br>     Last name: <input type="text" name="lname"><br>     <input type="image" src="http://img3.imgtn.bdimg.com/it/u=4163745010,2599120287&fm=21&gp=0.jpg"  alt="Submit" width="100" height="80"> </form> </body> </html>
プログラムを実行して試してください
注: Internet Explorer 9 以前の IE バージョン、Firefox は最大値と最大値をサポートしていません入力タグの min 属性。
注: max 属性と min 属性は、Internet Explorer 10 の日付と時刻の入力をサポートしません。IE 10 は、これらの入力タイプをサポートしません。
<input> multiple 属性 multiple 属性は、<input> 要素で複数の値を選択できることを指定します。
注
: multiple 属性は、電子メールとファイルの <input> タグのタイプに適用されます。 : 電子メール、ファイル。
例
複数のファイルをアップロードする:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="" method="post">     <input list="browsers" name="">     <datalist id="browsers">         <option value="Internet Explorer">         <option value="Firefox">         <option value="Chrome">         <option value="Opera">         <option value="Safari">     </datalist>     <input type="submit"> </form> </body> </html>
プログラムを実行して試してみる
<input> パターン属性は正規表現を記述します
<input> 要素の値を検証します。 注: pattern 属性は、テキスト、検索、URL、電話番号、電子メール、およびパスワードの <input> タグのタイプに適用されます。
ヒント: パターンを説明するためにグローバルタイトル属性によって使用されます。
ヒント: JavaScript チュートリアルで正規表現について学ぶことができます
例
以下の例は、3 文字のみを含めることができるテキストフィールド (数字と特殊文字を除く) を示しています:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     输入 1980-01-01 之前的日期:     <input type="date" name="bday" max="1979-12-31"><br>     输入 2000-01-01 之后的日期:     <input type="date" name="bday" min="2000-01-02"><br>     数量 (在1和5之间):     <input type="number" name="quantity" min="1" max="5"><br>     <input type="submit"> </form> </body> </html>
Runプログラムを試してみましょう
<input> プレースホルダー属性
placeholder 属性は、入力フィールドの期待値を説明するヒントを提供します。
ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。
注: プレースホルダー属性は、テキスト、検索、URL、電話、メール、パスワードの <input> タグのタイプに適用されます。
例
入力フィールドのプロンプトテキスト:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     选择图片: <input type="file" name="img" multiple>     <input type="submit"> </form> <p>尝试选取一张或者多种图片。</p> </body> </html>
プログラムを実行して試してください
<input> 必須属性
必須属性はブール属性です。

必須属性は必須です送信する前に入力フィールドに入力してください (空にすることはできません)。
注: 必須属性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルの <input> タグのタイプに適用されます。
例
空にできない入力フィールド:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     请输入3位字母: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">     <input type="submit"> </form> </body> </html>
確認するにはプログラムを実行し、入力せずに送信してください
<input> step属性は有効です。入力フィールドの数値間隔。 step="3" の場合、有効な数値は -3、0、3、6 などです。
ヒント
: step 属性は、max 属性と min 属性を使用して範囲値を作成できます。
注 : step 属性次のタイプで使用されます: 数値、範囲、日付、日時、ローカル日時、月、時刻、および週
は、入力ステップ 3 を指定します。試してみてください

注: Internet Explorer 9 以前の IE バージョン、または Firefox は、input タグの step 属性をサポートしていません。
HTML5 <input> タグ
<入力>
ラベル 説明
フォームフォーム
入力フィールドを定義します

学び続ける

||

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="" autocomplete="on"> 姓名:<input type="text" name="fname"><br/> 留言<input type="text" name="content"><br/> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> <p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p> <p>注意 form的 autocomplete属性为 "on"（开），但是e-mail自动为“off”（关）。</p> </body> </html>

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