1. Home
  2. HTML5フォームのプロパティ

HTML5フォームのプロパティ2024 年の最新の入門チュートリアル。このコースでは HTML5の新しいフォームのプロパティ,<フォーム> / <入力>オートコンプリート属性,例,<フォーム> NOVALIDATEプロパティ,例,<入力>オートフォーカス属性,例,<入力>フォームプロパティ,例,<入力> formactionプロパティ,例,<入力> formenctypeプロパティ,例,<入力> formmethodプロパティ,例,<入力> formnovalidateプロパティ,例,<入力> formtargetプロパティ,例,<入力>高さと幅の属性,例,<入力>リストプロパティ,例,<入力> minとmax属性,例,<入力>複数のプロパティ,例,<入力>パターンプロパティ,例,<入力> placeholder属性,例,<入力>必要な属性,例,<入力>ステップの属性,例,HTML5の<input>タグ, について学習できます。

HTML5フォームのプロパティ

HTML5の新しいフォームのプロパティ

HTML5の<フォーム>と<input>タグは、いくつかの新しいプロパティを追加します。

<フォーム>新しい属性：

  • オートコンプリート
  • NOVALIDATE

<入力>新しいプロパティ：

  • オートコンプリート
  • 自動焦点
  • フォーム
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • 高さと幅
  • リスト
  • minとmax
  • 複数
  • パターン（正規表現）
  • プレースホルダー
  • 必須
  • ステップ

<フォーム> / <入力>オートコンプリート属性

オートコンプリート属性は、フォームや入力フィールドがオートコンプリートを持っている必要があります指定します。

ユーザーがオートコンプリートフィールドに入力を開始すると、ブラウザがこのフィールドに入力するためのオプションが表示されます。

ヒント：オートコンプリート属性可能なフォーム要素がオン状態となり、入力要素にオフされます。

注：オートコンプリートが適用されます。<form>タグ、および<input>タグの次の種類：テキスト、検索、URL、電話、電子メール、パスワード、datepickers、範囲および色。

OperaSafariChromeFirefoxInternet Explorer

例

オープンオートコンプリートでのHTMLフォーム（シャットダウン入力フィールドの自動補完）：

<フォーム アクション = "デモform.php」 >まず名前"に"オートコンプリート= <入力： タイプ = "テキスト" 名前= "fnameに"> <br>姓：<入力 タイプ = "テキスト" 名前= "LNAME"> <br> Eメール：<入力 = "メール"を入力 名前 = "メール" オートコンプリート= "オフ"> <br> <入力 > = "提出" と入力 </フォーム>

»をお試しください

ヒント：一部のブラウザでは、プロパティをピックアップするために、オートコンプリート機能を有効にする必要があります。

<フォーム> NOVALIDATEプロパティ

ブール型プロパティNOVALIDATEプロパティ。

フォーム入力またはドメインを検証するべきではありませんフォームを投稿する際にNOVALIDATE属性を指定します。

OperaSafariChromeFirefoxInternet Explorer

例

確認フォームデータの提出なし

<フォーム アクション = "デモform.php」 NOVALIDATE> Eメール：<入力 = "メール"を入力 名前 = "USER_EMAIL"> <入力 > = "提出" と入力 </フォーム>

»をお試しください

<入力>オートフォーカス属性

オートフォーカス属性は論理属性です。

ドメインが自動的にフォーカスを受け取るページのロード時、オートフォーカス属性が指定されます。

OperaSafariChromeFirefoxInternet Explorer

例

「姓」入力フィールドがページの読み込み時にオートフォーカスを入力してみましょう：

First name:<input type="text" name="fname" autofocus>

»をお試しください

<入力>フォームプロパティ

属性は、フォーム入力フィールドが1つまたは複数の形式に属して指定します。

ヒント：複数のフォームを引用スペースで区切られたリストを使用します。

OperaSafariChromeFirefoxInternet Explorer

例

入力フィールドの外側フォームformに位置（フォームがまだのフォーム入力フォームの一部である）HTMLフォームを参照します。

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

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

»をお試しください

<入力> formactionプロパティ

formactionプロパティは、フォーム送信のURLを記述するために使用されます。

formactionは、action属性で上書き<form>要素を属性。

注：formactionはタイプ= "提出"とタイプ= "画像"属性。

OperaSafariChromeFirefoxInternet Explorer

例

HTMLform次の形式は、2つの異なるアドレスのボタンが含まれています提出します：

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

»をお試しください

<入力> formenctypeプロパティ

formenctype属性は、フォームが（専用フォームのフォームメソッド= "ポスト"フォームの）サーバデータのエンコーディングに提出された説明します

formenctypeプロパティは、enctype属性のフォーム要素を上書きします。

メイン：この属性タイプ=「送信」と併せて使用= "画像"を入力します。

OperaSafariChromeFirefoxInternet Explorer

例

フォームデータを送信するために最初の送信ボタンがデフォルトで符号化され、第二の "multipart / form-data"にフォームデータを送信するためのフォーマットをエンコードするためにボタンを提出します：

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

»をお試しください

<入力> formmethodプロパティ

formmethod属性は、道のフォーム送信を定義します。

<form>要素のmethod属性をカバーするformmethodプロパティ。

注：この属性は、type = "提出"と組み合わせて使用さ= "画像"を入力して使用することができます。

OperaSafariChromeFirefoxInternet Explorer

例

一例として、フォームの送信を再定義：

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

»をお試しください

<入力> formnovalidateプロパティ

NOVALIDATEプロパティは、ブール型プロパティです。

NOVALIDATE属性は、フォームが送信されたときの<input>要素を検証する必要はありませんについて説明します。

formnovalidate属性はNOVALIDATE属性<form>要素を上書きします。

注：formnovalidate属性タイプは、= "で使用するために提出します

OperaSafariChromeFirefoxInternet Explorer

例

2つのボタンが（検証と適用されない）フォームを送信します：

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

»をお試しください

<入力> formtargetプロパティ

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

formtargetプロパティの上書き<form>要素のtarget属性。

注：= formtarget属性タイプを「提出」と併せて使用= "画像"を入力します。

OperaSafariChromeFirefoxInternet Explorer

例

2つのボタンが別のウィンドウに表示されるフォームを送信します：

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

»をお試しください

<入力>高さと幅の属性

<input>タグの画像の高さと幅の画像タイプに指定された高さと幅の属性。

注意：高さと幅のプロパティは画像のみのタイプの<input>タグに適用されます。

ヒント：イメージは、通常、高さと幅の属性を指定します。画像が設定されている場合は、ページがロードされたイメージに必要なスペースの高さと幅は保持されます。 これらの属性の指定がなければ、ブラウザは画像のサイズを知らない、適切なスペースを取っておくことはできません。 （画像がロードされているが）ロード処理中の写真は、変更ページのレイアウトに影響します。

OperaSafariChromeFirefoxInternet Explorer

例

高さと幅の属性を使用し、画像送信ボタンを定義します：

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

»をお試しください

<入力>リストプロパティ

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

OperaSafariChromeFirefoxInternet Explorer

例

<データリスト>内の<input>値で事前定義：

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

»をお試しください

<入力> minとmax属性

MIN、MAX、およびステップ属性は数値や日付リミテッド（制約）を含む入力タイプとして使用されています。

注：MIN、MAX、およびステップの属性は、<input>タグの次のタイプに適用されます。日付ピッカー、番号と範囲。

OperaSafariChromeFirefoxInternet Explorer

例

<入力>最小値と最大値の設定の要素：

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

»をお試しください

<入力>複数のプロパティ

複数の属性は論理属性です。

複数の属性が複数の値を選択するには、<input>要素を指定します。

注意：電子メールやファイル： 複数のプロパティは、<input>タグの次のタイプに適用されます。

OperaSafariChromeFirefoxInternet Explorer

例

複数のファイルをアップロードします。

Select images: <input type="file" name="img" multiple>

»をお試しください

<入力>パターンプロパティ

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

注：テキスト、検索、URL、電話：pattern属性は、<input>タグの次のタイプに適用され、電子メール、およびパスワードを入力します。

ヒント：それは地球のために使用されているタイトルの属性は、モードについて説明します。

ヒント：あなたは私たちでできるJavaScriptのチュートリアルの正規表現の内容について学ぶために

OperaSafariChromeFirefoxInternet Explorer

例

次の例では、3つの文字だけのテキストフィールド（なし数字または特殊文字）が含まれている示しています。

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

»をお試しください

<入力> placeholder属性

placeholder属性は、入力フィールドの期待値を記述し、ヒント（ヒント）を提供します。

短いリマインダは、ユーザ入力値の前に入力フィールドに表示されます。

注：テキスト、検索、URL、電話：placeholder属性は、<input>タグの次のタイプに適用され、電子メールとパスワードを入力します。

OperaSafariChromeFirefoxInternet Explorer

例

入力フィールドプロンプトテキストトン：

<input type="text" name="fname" placeholder="First name">

»をお試しください

<入力>必要な属性

必要な属性は論理属性です。

必要な属性は、入力フィールドが提出する前に、（空でない）満たさなければならないことを指定します。

注：テキスト、検索、URL、電話：<input>タグの次のタイプのために必要な属性、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオおよびファイル。

OperaSafariChromeFirefoxInternet Explorer

例

入力フィールドを空にすることはできません。

Username: <input type="text" name="usrname" required>

»をお試しください

<入力>ステップの属性

入力フィールドのstep属性は、法的な番号間隔を指定します。

ステップ= "3"、法的数字等は、-3,0,3,6することができれば

ヒント：step属性は、地域価値の最大値と最小値の属性を作成することができます。

注：数値、範囲、日付、日時： ステップは、以下のタイプと組み合わせて使用するタイプの属性は、datetime-ローカル、月、時間と週を。

OperaSafariChromeFirefoxInternet Explorer

例

所定の入力ステップステップ3：

<input type="number" name="points" step="3">

»をお試しください

HTML5の<input>タグ

标签 描述
<form> 定义一个form表单
<input> 定义一个 input 域

ホットチュートリアル

お問い合わせ

HTML5フォームのプロパティ
10/30