HTML5 フォームのプロパティ


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

& lt; ; 入力 & gt; :

  • オートコンプリート

  • フォーム

フォームアクション

    フォームメソッド

    • formnovalidate

    • formtarget

    • 高さと幅

    • リスト

    • 最小値と最大値

    • 複数

    • パターン(正規表現)

    • プレースホルダー

    • 必須

    • ステップ

  • < form> / < input> autocomplete 属性

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

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

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

    • インスタンス

  • <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><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 属性のブール属性。novalidate 属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<p><strong>注意</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

<input> autofocus属性

autofocus属性はブール属性です。

オートフォーカス属性は「ページが読み込まれるとき、フィールドは自動的にフォーカスを取得します」で指定されます。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

<input>フォーム属性
form属性は、入力フィールドが属します。

ヒント:

複数のフォームを参照する必要がある場合は、スペースで区切ったリストを使用してください。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

<p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1">

<p><b>注意:</b> IE不支持form属性</p>

</body>
</html>

インスタンスを実行する»

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

<input> formaction 属性

formaction 属性は、フォーム送信の URL アドレスを記述するために使用されます。 <form> ; 要素の action 属性をオーバーライドします。

注:

formaction 属性は type="submit" と type="image" に使用されます。

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php" value="提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formaction 属性。</p>

</body>
</html>

Run Instance»
「インスタンスの実行」ボタンをクリックして、オンラインの例を表示します


<input> formenctype 属性

formenctype 属性は、フォームによってサーバーに送信されるデータのエンコードを記述します (フォーム内の Method="post" フォームの場合のみ) Forms)

formenctype 属性は、フォーム要素属性の enctype をオーバーライドします。

主に:

この属性は、type="submit" および type="image" とともに使用されます。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-post-enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formenctype 属性。</p>

</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-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formmethod 属性。</p>

</body>
</html>

インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

<input>formnovalidate属性

novalidate属性はブール属性です。日付属性< ;input> 要素はフォーム送信時に検証する必要がないことを説明します。

formnovalidate 属性は、<form> 要素の novalidate 属性をオーバーライドします。

注:

formnovalidate 属性は、type="submit

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本,或Safari不支持input标签的 formnovalidate 属性。</p>

</body>
</html>

Run Instance»
で使用されます。クリックオンラインの例を表示するための「インスタンスの実行」ボタン

<input> formtarget 属性

formtarget 属性は、フォーム送信データを受信した後の表示を示す名前またはキーワードを指定します

formtarget 属性はターゲットをオーバーライドします<form> 要素の属性。

注:

formtarget 属性は type="submit" および type="image" で使用されます。

例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formtarget 属性。</p>

</body>
</html>

サンプルの実行»

「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します


<input> 高さと幅の属性

高さと幅の属性は、<input> に使用される画像の高さと幅を指定します; 画像タイプ幅のタグ。

注: height 属性と width 属性は、画像タイプの <input> タグにのみ適用されます。

ヒント:画像は通常、高さと幅の両方の属性を指定します。画像で高さと幅を設定する場合、画像に必要なスペース ページの読み込み時に保持されます。これらのプロパティがなければ、 ブラウザは画像のサイズを知らないため、画像を予約できません 適切なスペース。画像は読み込みプロセス中にページ レイアウト効果を変更します。 （画像は読み込まれていますが）。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>


</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します


<input> list属性

list属性は入力フィールドのデータリストを指定します。 datalist は、入力フィールドのオプションのリストです。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<form action="demo-form.php" 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>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します


<input> min 属性と max 属性

min、max、step 属性が使用されます数値を含める、または日付入力タイプに制限 (制約) を指定します。

注: min、max、step 属性は、日付ピッカー、数値、範囲の <input> タグのタイプに適用されます。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

 输入 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>

<p><strong>注意:</strong> Internet Explorer 9及更早IE版本，Firefox不支持input标签的  max 和 min 属性。</p>
<p><strong>注意:</strong>
在Internet Explorer 10中max 和 min属性不支持输入日期和时间，IE 10 不支持这些输入类型。</p>

</body>
</html>

インスタンスを実行します

オンラインインスタンスを表示するには、「インスタンスを実行」ボタンをクリックしてください


<input> 複数の属性はブール属性です。

複数属性の規定 ;input>要素内では複数の値を選択できます。

注:

multiple 属性は、電子メールとファイルの <input> タグのタイプに適用されます。 : 電子メール、ファイル。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  选择图片: <input type="file" name="img" multiple>
  <input type="submit">
</form>

<p>尝试选取一张或者多种图片。</p>

<p><strong>注意:</strong>  Internet Explorer 9及更早IE版本不支持input标签的 multiple 属性。</p>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

<input> パターン属性

pattern 属性は、<input> 要素の値を検証するために使用される正規表現を記述します。

注: pattern 属性は、テキスト、検索、URL、電話番号、電子メール、パスワードなどの <input> タグに適用されます。

ヒント: は、グローバル タイトル属性によって使用されます。 pattern.

ヒント: JavaScript チュートリアルで正規表現について学ぶことができます

例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

<p><strong>注意:</strong>  Internet Explorer 9及更早IE版本，或Safari不支持input标签的 pattern 属性。</p>

</body>
</html>

例の実行»

オンラインの例を表示するには、「例の実行」ボタンをクリックしてください


< ;input> プレースホルダー属性

プレースホルダー属性は、入力フィールドの期待値を説明するヒントを提供します。

ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。

注: プレースホルダー属性は、テキスト、検索、URL、電話、メール、パスワードの <input> タグのタイプに適用されます。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 placeholder 属性。</p>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください


<input>必須属性

必須属性はブール属性です。

必須属性 送信する前に入力フィールドに記入することが規定されています（空にすることはできません）。

注: required 属性は、テキスト、検索、URL、電話、メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルの <input> タグのタイプに適用されます。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本，或Safari不支持input标签的 required 属性。</p>

</body>
</html>

インスタンスの実行 »

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください


<input> ステップ属性は、インスタンスの有効な数の間隔を指定します。入力フィールド。

step="3" の場合、有効な数値は -3、0、3、6 などです。

ヒント:

step 属性は次のように使用できます。 max 属性と min 属性は範囲値を作成します

注:

step 属性は、数値、範囲、日付、日時、日時ローカル、月、時刻、週の型で使用されます。

例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  <input type="number" name="points" step="3">
  <input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本，或Firefox不支持input标签的 step 属性。</p>

</body>
</html>

サンプルの実行»
[サンプルの実行] ボタンをクリックしてオンラインサンプルを表示します

HTML5 <input> タグ

タグ & lt;フォーム><input>
←
→

PHP中国語ウェブサイト

ホームページホームページコースコース記事記事に質問に質問辞書辞書マニュアルマニュアルダウンロードダウンロード検索検索APPダウンロード APPダウンロード
説明
フォームの定義
入力フィールドを定義します