HTML5の新しいフォーム属性

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

PleteuAutofocus

フォームformactionformenctype

formmethod

formnovalidateformtarget高さと幅
リスト
最小値と最大値
複数
パターン(正規表現)
プレースホルダー
必須
ステップ

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

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

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

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

例 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 属性のブール属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。 例

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

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

<input type="submit">

</form>

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

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

ヒント: 複数のフォームを参照する必要がある場合は、スペースで区切られたリストを使用します。
例
フォームの外側にある入力フィールドは 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 属性は、サーバーに送信されるフォームのデータエンコーディングを記述します (フォームフォーム内の 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 属性は、フォームの作成時に <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> タグに使用される画像の高さと幅を指定します。
注: height 属性と width 属性は、画像タイプの <input> タグにのみ適用されます。ヒント: 通常、画像は高さと幅の両方の属性を指定します。画像に高さと幅が設定されている場合、ページの読み込み時に画像に必要なスペースが保持されます。これらの属性がないと、ブラウザは画像のサイズを認識できないため、適切なスペースを予約できません。画像により、読み込みプロセス中に (画像が読み込まれている場合でも) ページレイアウト効果が変化します。例
は、高さと幅の属性を使用して画像送信ボタンを定義します:
<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 属性は、数値または日付を含む入力タイプの制限 (制約) を指定するために使用されます。
注: min、max、step 属性は、日付ピッカー、数値、範囲の <input> タグのタイプに適用されます。
例
<input> 要素の最小値と最大値の設定:
1980-01-01 より前の日付を入力してください:
<input type="date" name="bday " max="1979-12-31"> 2000-01-01 以降の日付を入力してください:

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

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

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

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

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

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

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

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

<output> 要素
HTML5 では、書き込まれた出力など、さまざまなタイプの出力結果を表す新しい要素 <output> も導入されていますスクリプトによって。
for 属性を使用して、出力要素と、計算に影響を与えるドキュメント内の他の要素 (たとえば、入力ソースまたはパラメーターとして) との関係を指定することもできます。 for 属性の値は、他の要素の ID のスペースで区切られたリストです。
プレースホルダー属性
HTML5 では、プレースホルダーと呼ばれる新しい属性が導入されています。 <input> 要素と <textarea> 要素のこの属性は、フィールドに入力できる内容に関するヒントをユーザーに提供します。プレースホルダー文字にはキャリッジリターンやラインフィードを含めることはできません。
次は、placeholder 属性の簡単な構文です:
<input type="text" name="search" placeholder="search the web"/>
この属性は、最新のバージョンでのみ使用できます。 Mozilla、Safari、Chrome ブラウザのバージョンをサポートします。
required 属性
これで、HTML5 では required と呼ばれる新しい属性が導入され、次のように使用できるため、送信できない空のテキストボックスなどのクライアント側の検証を処理するために JavaScript を使用する必要がなくなりました。入力ボックスに次の値があることを確認します:
<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" 字段没有在form表单之内，但它也是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 标签。</p> </body> </html>

学び続ける

||

新しいファイル

<!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> 数量 (在1和9之间): <input type="number" name="quantity" min="1" max="9"><br> <input type="submit"> </form> </body> </html>

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