HTML5の新しいフォーム屬性

HTML5 の新しいフォーム屬性

HTML5 には、<form> タグと

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

autocomplete

novalidate

<input>新しい屬性:

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

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

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

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

例

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(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>填寫(xiě)并提交表單，然后重新刷新頁(yè)面查看如何自動(dòng)填充內(nèi)容。</p>
<p>注意 form的 autocomplete屬性為  "on"（開(kāi)），但是e-mail自動(dòng)為“off”（關(guān)）。</p>
</body>
</html>

プログラムを?qū)g行して試してみる

ヒント:一部のブラウジングこのプロパティを有効にするには、ブラウザーでオートコンプリートを有効にする必要がある場(chǎng)合があります。
<form> novalidate 屬性
novalidate 屬性のブール屬性は、フォームの送信時(shí)にフォームまたは入力フィールドを検証しないことを指定します。 exexample
は、提出されたフォームのデータを確認(rèn)する必要があります
autofocus 屬性は、ページが読み込まれると、フィールドに自動(dòng)的にフォーカスを取得します。例
ページがロードされるときに「メッセージ」入力フィールドに自動(dòng)的にフォーカスを合わせます:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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>
プログラムを?qū)g行して試してください
オートフォーカスを名前入力フィールドに変更して、結(jié)果を比較することができます2 つの実行違いを參照してください
<input> form 屬性
form 屬性は、入力フィールドが屬する 1 つ以上のフォームを指定します。
ヒント: 複數(shù)のフォームを參照する必要がある場(chǎng)合は、スペースで區(qū)切ったリストを使用してください。
インスタンス
フォームの外側(cè)にある入力フィールドは HTML フォームを參照します (入力フォームはまだフォームの一部です):
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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標(biāo)簽的 autofocus 屬性。</p> </body> </html>
プログラムを?qū)g行して試してください
注: 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
屬性は、送信されたフォームのデータエンコーディングを記述しますサーバーへの送信 (フォームフォーム內(nèi)のメソッド = "post" フォームのみ)
formenctype
屬性は、form 要素の enctype 屬性をオーバーライドします。
Main
: この屬性は、type="submit" および type="image" とともに使用されます。
例最初の送信ボタンにはフォームデータを送信するためのデフォルトのエンコーディングがあり、2 番目の送信ボタンには「multipart/form-data」エンコーディング形式でフォームデータが送信されます:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="" id="form1">     姓名: <input type="text" name="fname"><br>     <input type="submit" value="Submit"> </form> <p> "留言" 字段沒(méi)有在form表單之內(nèi)，但它也是form表單的一部分。</p> 留言: <input type="text" name="lname" form="form1"> </body> </html>
プログラムを?qū)g行して試してください
<input> formmethod 屬性
formmethod 屬性は、フォームの送信方法を定義します。
formmethod 屬性は、<form> 要素のメソッド屬性をオーバーライドします。
注: この屬性は、type="submit" および type="image" とともに使用できます。
例
フォーム送信メソッドを再定義する例:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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> 要素が行うことを記述します。フォームの送信時(shí)に確認(rèn)する必要はありません。
formnovalidate 屬性は、<form> 要素の novalidate 屬性をオーバーライドします。
注: formnovalidate 屬性は、type="submit で使用されます
2 つの submit を持つフォーム。ボタン (検証の使用は適用されません):
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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>
プログラムを?qū)g行して試してください<input> formtarget 屬性
formtarget 屬性は、フォーム送信の表示を示す名前またはキーワードを指定しますデータを受信すると、この屬性は <form> 要素の target 屬性をオーバーライドします。
注: formtarget 屬性は、type="submit" および type="image" と組み合わせて使用??されます。
例
別のウィンドウに表示される 2 つの送信ボタンフォーム:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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>
プログラムを?qū)g行して試してみましょう
<input> 高さと幅の屬性
そしてwidth 屬性は、image タイプの <input> タグに使用される畫(huà)像の高さと幅を指定します。
注: 高さと幅の屬性は、畫(huà)像タイプの <input> タグにのみ適用されます。
ヒント: 畫(huà)像は通常、高さと幅の両方の屬性を指定します。畫(huà)像に高さと幅が設(shè)定されている場(chǎng)合、ページの読み込み時(shí)に畫(huà)像に必要なスペースが保持されます。これらの屬性がないと、ブラウザは畫(huà)像のサイズを認(rèn)識(shí)できないため、適切なスペースを予約できません。畫(huà)像により、読み込みプロセス中に (畫(huà)像が読み込まれている場(chǎng)合でも) ページレイアウト効果が変化します。
例
は、高さと幅の屬性を使用して畫(huà)像送信ボタンを定義します:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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="不驗(yàn)證提交"> </form> </body> </html>
プログラムを?qū)g行して試してください
<input> list屬性
list屬性は、入力フィールドのデータリスト。 datalist は、入力フィールドのオプションのリストです。
インスタンス
<datalist>の<input>値:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action=" ">      作者姓名: <input type="text" name="fname"><br>      書(shū)本名: <input type="text" name="lname"><br>     <input type="submit" value="正常提交">     <input type="submit" formtarget="_blank" value="提交到一個(gè)新的頁(yè)面上"> </form> </body> </html>
プログラムを?qū)g行して試してください
<input> 最小、最大ステップ屬性は、數(shù)値または日付を含む入力タイプの制限 (制約) を指定するために使用されます。
注: min、max、step 屬性は、日付ピッカー、數(shù)値、範(fàn)囲の <input> タグのタイプに適用されます。
例
<input>要素の最小値と最大値の設(shè)定:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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>
プログラムを?qū)g行して試してください
注: Internet Explorer 9 以前の IE バージョン、Firefox は最大値と最大値をサポートしていません入力タグの min 屬性。
注: max 屬性と min 屬性は、Internet Explorer 10 の日付と時(shí)刻の入力をサポートしません。IE 10 は、これらの入力タイプをサポートしません。
<input> multiple 屬性 multiple 屬性は、<input> 要素で複數(shù)の値を選択できることを指定します。
注
: multiple 屬性は、電子メールとファイルの <input> タグのタイプに適用されます。 : 電子メール、ファイル。
例
複數(shù)のファイルをアップロードする:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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>
プログラムを?qū)g行して試してみる
<input> パターン屬性は正規(guī)表現(xiàn)を記述します
<input> 要素の値を検証します。 注: pattern 屬性は、テキスト、検索、URL、電話番號(hào)、電子メール、およびパスワードの <input> タグのタイプに適用されます。
ヒント: パターンを説明するためにグローバルタイトル屬性によって使用されます。
ヒント: JavaScript チュートリアルで正規(guī)表現(xiàn)について學(xué)ぶことができます
例
以下の例は、3 文字のみを含めることができるテキストフィールド (數(shù)字と特殊文字を除く) を示しています:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文網(wǎng)(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>     數(shù)量 (在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中文網(wǎng)(php.cn)</title> </head> <body> <form action="">     選擇圖片: <input type="file" name="img" multiple>     <input type="submit"> </form> <p>嘗試選取一張或者多種圖片。</p> </body> </html>
プログラムを?qū)g行して試してください
<input> 必須屬性
必須屬性はブール屬性です。

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

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

學(xué)び続ける

||

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(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>填寫(xiě)并提交表單，然后重新刷新頁(yè)面查看如何自動(dòng)填充內(nèi)容。</p> <p>注意 form的 autocomplete屬性為 "on"（開(kāi)），但是e-mail自動(dòng)為“off”（關(guān)）。</p> </body> </html>

提出するリセットコード
自動(dòng)運(yùn)転