HTML5の新しいフォーム屬性

HTML5 の & lt; フォーム & gt; および & lt; フォーム & gt; 新しい屬性:

PleteuAutofocus

フォームformactionformenctype

formmethod

formnovalidateformtarget高さと幅
リスト
最小値と最大値
複數(shù)
パターン(正規(guī)表現(xiàn))
プレースホルダー
必須
ステップ

<フォーム> ;input> autocomplete 屬性

autocomplete 屬性は、フォームまたは入力フィールドにオートコンプリート機(jī)能が必要であることを指定します。

ユーザーがオートコンプリートフィールドに入力を開(kāi)始すると、ブラウザーはフィールドに入力されたオプションを表示する必要があります。
ヒント: autocomplete 屬性は、form 要素ではオンになっていても、input 要素ではオフになっている場(chǎng)合があります。

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

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

<form action="demo-form.php" autocomplete="on">

名: <input type="text" name="fname"><br>

姓: <input type="text" name="lname"><br> -mail : <input type="email" name="email" autocomplete="off"><br>

</form>

<form> novalidate 屬性

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

送信されたフォームデータを検証する必要はありません

<form action="demo-form.php" novalidate>
電子メール: <input type="email" name="user_email " >

<input type="submit">

</form>

<input> autofocus 屬性
autofocus 屬性は、ページのロード時(shí)にフィールドが自動(dòng)的にフォーカスを取得することを指定します。
例
ページの読み込み時(shí)に「名」入力フィールドに自動(dòng)的にフォーカスを設(shè)定します:

名:<input type="text" name="fname" autofocus> ;input> form 屬性 form 屬性は、入力フィールドが屬する 1 つ以上のフォームを指定します。

ヒント: 複數(shù)のフォームを參照する必要がある場(chǎng)合は、スペースで區(qū)切られたリストを使用します。
例
フォームの外側(cè)にある入力フィールドは HTML フォームを參照します (入力フォームは依然としてフォームの一部です):<input> formaction 屬性

formaction 屬性は URL アドレスを記述するために使用されますフォーム送信の。
formaction 屬性は、<form> 要素の action 屬性をオーバーライドします。
注: formaction 屬性は、type="submit" および type="image" に使用されます。
例次の HTMLform フォーム2 つの異なるアドレスが含まれています送信ボタン:
<
form action="demo-form.php">

名: <input type="text" name="fname"> ;br>
姓: <input type="text" name="lname"><br>
<input type="submit" value="Submit"> br＆gt; & lt;input> ; formenctype 屬性
formenctype 屬性は、サーバーに送信されるフォームのデータエンコーディングを記述します (フォームフォーム內(nèi)の Method="post" フォームのみ) formenctype 屬性は、フォーム要素。
主に: この屬性は type="submit" および type="image" とともに使用されます。
例最初の送信ボタンはデフォルトでフォームデータを送信するようにエンコードされており、2 番目の送信ボタンは「multipart/form-data」エンコード形式でフォームデータを送信します:
<form action="demo- post_enctype.php " Method="post">
名: <input type="text" name="fname"><br>
<input type="submit" value="Submit"> submit" formenctype="multipart/form-data"
value="Multipart/form-data として送信">
</form>
<input> formmethod 屬性

formmethod 屬性は、フォームの送信方法を定義します。 formmethod 屬性は、<form> 要素のメソッド屬性をオーバーライドします。 注: この屬性は、type="submit" および type="image" とともに使用できます。例
フォーム送信メソッドを再定義する例:

<form action="demo-form.php" method="get">
名: <input type="text" name ="fname"><br>
姓: <input type="text" name="lname"><br>
<input type="submit" value " Submit">
;/form>
<input> formnovalidate 屬性 novalidate 屬性はブール型屬性です。
novalidate 屬性は、フォームの作成時(shí)に <input> 要素を検証する必要がないことを示します。が提出されます。
formnovalidate 屬性は、<form> 要素の novalidate 屬性をオーバーライドします。注: formnovalidate 屬性は、type="submit で使用されます。例
2 つの送信ボタン (検証ありおよび検証なし) を持つフォーム:
< フォーム action="demo-form.php">

電子メール: <input type="email" name="userid"><br>

=" submit" value="送信"><br>
<input type="submit" formnovalidate value="検証なしで送信">
</form> formtarget 屬性は、フォーム送信データを受信した後の表示を示す名前またはキーワードを指定します。 formtarget 屬性は、<form> 要素の target 屬性をオーバーライドします。
注: formtarget 屬性は、type="submit" および type="image" と組み合わせて使用??されます。
2 つの送信ボタンがあるフォームが表示されます。別のウィンドウ:
<form action="demo-form.php">
名: <input type="text" name="fname"><br>

姓: <input type="text" name="lname"><br>
<input type="submit" value="通常どおり送信"> <input type="submit" formtarget="_blank"
value="新しいウィンドウに送信">
<input> width 屬性
height 屬性と width 屬性は、image タイプの <input> タグに使用される畫(huà)像の高さと幅を指定します。
注: height 屬性と width 屬性は、畫(huà)像タイプの <input> タグにのみ適用されます。ヒント: 通常、畫(huà)像は高さと幅の両方の屬性を指定します。畫(huà)像に高さと幅が設(shè)定されている場(chǎng)合、ページの読み込み時(shí)に畫(huà)像に必要なスペースが保持されます。これらの屬性がないと、ブラウザは畫(huà)像のサイズを認(rèn)識(shí)できないため、適切なスペースを予約できません。畫(huà)像により、読み込みプロセス中に (畫(huà)像が読み込まれている場(chǎng)合でも) ページレイアウト効果が変化します。例
は、高さと幅の屬性を使用して畫(huà)像送信ボタンを定義します:
<input type="image" src="img_submit.gif" alt="送信" width="48" height=" 48 ">

<input> list 屬性
list 屬性は、入力フィールドのデータリストを指定します。 datalist は、入力フィールドのオプションのリストです。
OperaSafariChromeFirefoxInternet Explorer
インスタンス
<datalist>の事前定義された値:

<input list="browsers">
<データリスト id="ブラウザ">
<オプション値="Internet Explorer">
<オプションvalue = "Chrome">

<input> min 屬性と max 屬性
min、max、step 屬性は、數(shù)値または日付を含む入力タイプの制限 (制約) を指定するために使用されます。
注: min、max、step 屬性は、日付ピッカー、數(shù)値、範(fàn)囲の <input> タグのタイプに適用されます。
例
<input> 要素の最小値と最大値の設(shè)定:
1980-01-01 より前の日付を入力してください:
<input type="date" name="bday " max="1979-12-31"> 2000-01-01 以降の日付を入力してください:

<input type="date" name="bday" min=" 2000 -01-02">

數(shù)量 (1 から 5 の間):
<input type="number" name="quantity" min="1" max="5 " >
<input> 複數(shù)の屬性
multiple 屬性は、<input> 要素で複數(shù)の値を選択できることを指定します。
注: multiple 屬性は、電子メールとファイルの <input> タグのタイプに適用されます。 : メール、ファイル。例複數(shù)のファイルをアップロード:
畫(huà)像を選択: <input type="file" name="img" multiple>

<input> パターン屬性
pattern 屬性は、<input> 要素の値を検証するために使用される正規(guī)表現(xiàn)を記述します。
注: pattern 屬性は、テキスト、検索、URL、電話番號(hào)、電子メール、パスワードのタイプの <input> に適用されます。
ヒント: パターンを説明するためにグローバル title 屬性とともに使用されます。以下の例は、3 文字のみを含めることができるテキストフィールド (數(shù)字と特殊文字を除く) を示しています:

國(guó)コード: <input type="text" name="country_code" pattern="[A-Za- z] {3}"title="3 文字の國(guó)コード">

<input> プレースホルダー屬性プレースホルダー屬性は、入力フィールドの期待値を説明するヒントを提供します。ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。
注: プレースホルダー屬性は、テキスト、検索、URL、電話、メール、パスワードの <input> タグのタイプに適用されます。
例
入力フィールドのプロンプトテキスト t:

<input type="text" name="fname" placeholder="First name">
<input>
required 屬性はブール型屬性で、送信前に入力フィールドに入力する必要があることを指定します (空にすることはできません)。注: 必須屬性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番號(hào)、チェックボックス、ラジオ、ファイルの <input> タグのタイプに適用されます。例空にすることはできない入力フィールド:

ユーザー名: <input type="text" name="usrname" required>

<input> プロパティを指定します入力フィールドの有効な數(shù)値間隔。 step="3" の場(chǎng)合、有効な數(shù)値は -3、0、3、6 などです。 ヒント: step 屬性を max および min 屬性とともに使用して、範(fàn)囲値を作成できます。
注: step 屬性は、範(fàn)囲値を作成します。次のタイプで使用されます: 數(shù)値、範(fàn)囲、日付、日時(shí)、ローカル日時(shí)、月、時(shí)刻、週。
例
では、入力ステップのステップサイズが 3 であると規(guī)定しています:
<input type="number " name="points" step=" 3">

<output> 要素
HTML5 では、書(shū)き込まれた出力など、さまざまなタイプの出力結(jié)果を表す新しい要素 <output> も導(dǎo)入されていますスクリプトによって。
for 屬性を使用して、出力要素と、計(jì)算に影響を與えるドキュメント內(nèi)の他の要素 (たとえば、入力ソースまたはパラメーターとして) との関係を指定することもできます。 for 屬性の値は、他の要素の ID のスペースで區(qū)切られたリストです。
プレースホルダー屬性
HTML5 では、プレースホルダーと呼ばれる新しい屬性が導(dǎo)入されています。 <input> 要素と <textarea> 要素のこの屬性は、フィールドに入力できる內(nèi)容に関するヒントをユーザーに提供します。プレースホルダー文字にはキャリッジリターンやラインフィードを含めることはできません。
次は、placeholder 屬性の簡(jiǎn)単な構(gòu)文です:
<input type="text" name="search" placeholder="search the web"/>
この屬性は、最新のバージョンでのみ使用できます。 Mozilla、Safari、Chrome ブラウザのバージョンをサポートします。
required 屬性
これで、HTML5 では required と呼ばれる新しい屬性が導(dǎo)入され、次のように使用できるため、送信できない空のテキストボックスなどのクライアント側(cè)の検証を処理するために JavaScript を使用する必要がなくなりました。入力ボックスに次の値があることを確認(rèn)します:
<input type="text" name="search" required/> この屬性は、Mozilla、Safari、Chrome の最新バージョンでのみサポートされています。ブラウザ。
インスタンス 1:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> <p> "Last name" 字段沒(méi)有在form表單之內(nèi)，但它也是form表單的一部分。</p> Last name: <input type="text" name="lname" form="form1"> <p><b>注意:</b> IE不支持form屬性</p> </body> </html>
インスタンス 2:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 標(biāo)簽。</p> </body> </html>

學(xué)び続ける

||

新しいファイル

<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action=""> 輸入 1970-01-01 之前的日期: <input type="date" name="bday" max="1969-12-31"><br> 輸入 2010-12-31 之后的日期: <input type="date" name="bday" min="2011-01-01"><br> 數(shù)量 (在1和9之間): <input type="number" name="quantity" min="1" max="9"><br> <input type="submit"> </form> </body> </html>

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