フォームformactionformenctype
formmethodformnovalidateformtarget高さと幅
リスト
最小値と最大値
複数
パターン(正規表現)
プレースホルダー
必須
ステップ
<フォーム> ;input> autocomplete 属性
ユーザーがオートコンプリート フィールドに入力を開始すると、ブラウザーはフィールドに入力されたオプションを表示する必要があります。
ヒント: autocomplete 属性は、form 要素ではオンになっていても、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>
<input type="submit">
</form>
<form> novalidate 属性
novalidate 属性のブール属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。 例
送信されたフォームデータを検証する必要はありません<form action="demo-form.php" novalidate>
電子メール: <input type="email" name="user_email " >
<input type="submit">
</form> 名:<input type="text" name="fname" autofocus> ;input> form 属性 form 属性は、入力フィールドが属する 1 つ以上のフォームを指定します。 例 姓: <input type="text" name="lname"><br> <input type="submit" value="Submit"> br＆gt; & lt;input> ; formenctype 属性 formenctype 属性は、サーバーに送信されるフォームのデータ エンコーディングを記述します (フォーム フォーム内の Method="post" フォームのみ) formenctype 属性は、フォーム要素。 例最初の送信ボタンはデフォルトでフォーム データを送信するようにエンコードされており、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 属性 名: <input type="text" name ="fname"><br> 姓: <input type="text" name="lname"><br> <input type="submit" value " Submit"> ;/form> <input> formnovalidate 属性 novalidate 属性はブール型属性です。 formnovalidate 属性は、<form> 要素の novalidate 属性をオーバーライドします。注: formnovalidate 属性は、type="submit で使用されます。例 < フォーム action="demo-form.php"> <input type="submit" formnovalidate value="検証なしで送信"> </form> formtarget 属性は、フォーム送信データを受信した後の表示を示す名前またはキーワードを指定します。 formtarget 属性は、<form> 要素の target 属性をオーバーライドします。 2 つの送信ボタンがあるフォームが表示されます。別のウィンドウ: <form action="demo-form.php"> <input type="submit" value="通常どおり送信"> <input type="submit" formtarget="_blank" value="新しいウィンドウに送信"> <input> width 属性 注: height 属性と width 属性は、画像タイプの <input> タグにのみ適用されます。 ヒント: 通常、画像は高さと幅の両方の属性を指定します。画像に高さと幅が設定されている場合、ページの読み込み時に画像に必要なスペースが保持されます。これらの属性がないと、ブラウザは画像のサイズを認識できないため、適切なスペースを予約できません。画像により、読み込みプロセス中に (画像が読み込まれている場合でも) ページ レイアウト効果が変化します。 例 <input type="image" src="img_submit.gif" alt="送信" width="48" height=" 48 "> <input list="browsers"> <データリスト id="ブラウザ"> <オプション値="Internet Explorer"> <オプションvalue = "Chrome"> <input> min 属性と max 属性 min、max、step 属性は、数値または日付を含む入力タイプの制限 (制約) を指定するために使用されます。 例 <input> 要素の最小値と最大値の設定: 1980-01-01 より前の日付を入力してください: <input type="date" name="bday " max="1979-12-31"> 2000-01-01 以降の日付を入力してください: 数量 (1 から 5 の間): <input type="number" name="quantity" min="1" max="5 " > <input> 複数の属性 注: multiple 属性は、電子メールとファイルの <input> タグのタイプに適用されます。 : メール、ファイル。例複数のファイルをアップロード: 画像を選択: <input type="file" name="img" multiple> 国コード: <input type="text" name="country_code" pattern="[A-Za- z] {3}"title="3 文字の国コード"> <input> <input> プロパティを指定します入力フィールドの有効な数値間隔。 step="3" の場合、有効な数値は -3、0、3、6 などです。 ヒント: step 属性を max および min 属性とともに使用して、範囲値を作成できます。 例 HTML5 では、書き込まれた出力など、さまざまなタイプの出力結果を表す新しい要素 <output> も導入されていますスクリプトによって。 for 属性を使用して、出力要素と、計算に影響を与えるドキュメント内の他の要素 (たとえば、入力ソースまたはパラメーターとして) との関係を指定することもできます。 for 属性の値は、他の要素の ID のスペースで区切られたリストです。 プレースホルダー属性 <input type="text" name="search" placeholder="search the web"/> この属性は、最新のバージョンでのみ使用できます。 Mozilla、Safari、Chrome ブラウザのバージョンをサポートします。 required 属性 <input type="text" name="search" required/> この属性は、Mozilla、Safari、Chrome の最新バージョンでのみサポートされています。ブラウザ。
<input> autofocus 属性
autofocus 属性は、ページのロード時にフィールドが自動的にフォーカスを取得することを指定します。
例
ページの読み込み時に「名」入力フィールドに自動的にフォーカスを設定します:
フォームの外側にある入力フィールドは HTML フォームを参照します (入力フォームは依然としてフォームの一部です):<input> formaction 属性
formaction 属性は URL アドレスを記述するために使用されますフォーム送信の。
formaction 属性は、<form> 要素の action 属性をオーバーライドします。
注: formaction 属性は、type="submit" および type="image" に使用されます。
例次の HTMLform フォーム2 つの異なるアドレスが含まれています 送信ボタン:
<
form action="demo-form.php">
formmethod 属性は、フォームの送信方法を定義します。 formmethod 属性は、<form> 要素のメソッド属性をオーバーライドします。 注: この属性は、type="submit" および type="image" とともに使用できます。 例
フォーム送信メソッドを再定義する 例:
<form action="demo-form.php" method="get">
電子メール: <input type="email" name="userid"><br>
名: <input type="text" name="fname"><br>
姓: <input type="text" name="lname"><br>
<input> list 属性
list 属性は、入力フィールドのデータリストを指定します。 datalist は、入力フィールドのオプションのリストです。
OperaSafariChromeFirefoxInternet Explorer
インスタンス
<datalist>の事前定義された値:
<input type="date" name="bday" min=" 2000 -01-02">
<input> パターン属性
pattern 属性は、<input> 要素の値を検証するために使用される正規表現を記述します。
注: pattern 属性は、テキスト、検索、URL、電話番号、電子メール、パスワードのタイプの <input> に適用されます。
ヒント: パターンを説明するためにグローバル title 属性とともに使用されます。以下の例は、3 文字のみを含めることができるテキスト フィールド (数字と特殊文字を除く) を示しています:
<input> プレースホルダー属性 プレースホルダー属性は、入力フィールドの期待値を説明するヒントを提供します。 ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。
注: プレースホルダー属性は、テキスト、検索、URL、電話、メール、パスワードの <input> タグのタイプに適用されます。
例
入力フィールドのプロンプトテキスト t:
required 属性はブール型属性で、送信前に入力フィールドに入力する必要があることを指定します (空にすることはできません)。 注: 必須属性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルの <input> タグのタイプに適用されます。 例空にすることはできない入力フィールド:
ユーザー名: <input type="text" name="usrname" required>
では、入力ステップのステップ サイズが 3 であると規定しています:
<input type="number " name="points" step=" 3">
HTML5 では、プレースホルダーと呼ばれる新しい属性が導入されています。 <input> 要素と <textarea> 要素のこの属性は、フィールドに入力できる内容に関するヒントをユーザーに提供します。プレースホルダー文字にはキャリッジ リターンやライン フィードを含めることはできません。
次は、placeholder 属性の簡単な構文です:
これで、HTML5 では required と呼ばれる新しい属性が導入され、次のように使用できるため、送信できない空のテキスト ボックスなどのクライアント側の検証を処理するために JavaScript を使用する必要がなくなりました。入力ボックスに次の値があることを確認します: <!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>
<!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>
