HTML フォームの詳細な紹介

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。 HTML5 入力では、複数の新しいフォーム入力タイプを使用して、より優れた入力制御と検証を提供します。

フォーム

編集

フォームとは、フォーム要素を含む領域です。

フォーム要素は、ユーザーがフォームに情報を入力できるようにする要素です (テキストフィールド、ドロップダウンリスト、ラジオボタン、チェックボックスなど)。

フォームは、form タグ (

入力タイプ

編集

HTML5 には複数の新しいフォーム入力タイプがあります。これらの新機能により、入力制御と検証が向上します。

1.入力タイプ - email

email タイプは、電子メール アドレスを含める必要がある入力フィールドに使用されます。フォームを送信すると、電子メールフィールドの値が自動的に検証されます。

url タイプは、URL アドレスを含む必要がある入力フィールドに使用されます。フォームを送信すると、URL フィールドの値が自動的に検証されます。

数値タイプは、数値を含む必要がある入力フィールドに使用されます。受け入れられる数値に制限を設定することもできます:

rangerange タイプは、特定の範囲内の数値を含む必要がある入力フィールドに使用されます。

範囲タイプはスライダーとして表示されます。

受け入れられる数値に制限を設定することもできます:

日付ピッカーHTML5には日付と時刻を選択するための新しい入力タイプがいくつかあります:

date - 日、月、年を選択します

month - 月、年を選択します

week - 週と年を選択します

- 時間 (時間と分) を選択します datetime - 時間、日、月、年 (UTC 時間) を選択します

datetime-local -時間、日、月、年 (現地時間) を選択します

検索タイプは、サイト検索や Google 検索などの

ドメインに使用されます。 検索フィールドは通常のテキスト フィールドとして表示されます。

Input

ほとんどの場合に使用される form タグは、input タグ () です。入力の型は、type

(type) によって定義されます。一般的に使用される入力タイプのほとんどは次のとおりです:

ユーザーがフォームに文字、数字などを入力する場合、テキスト フィールドが使用されます。

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

ブラウザには次のように表示されます:

フォーム自体は表示されないことに注意してください。また、ほとんどのブラウザでは、テキスト フィールドのデフォルトの幅は 20 文字です。

ラジオ ボタンは、ユーザーがいくつかの与えられた選択肢の中から 1 つを選択するときに使用されます。

<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>

ブラウザには次のように表示されます:

Male
Female

いずれか 1 つしか選択できないことに注意してください。

図に示すように:

ユーザーが与えられた多数の選択肢から 1 つまたは複数のオプションを選択する必要がある場合、チェックボックスが使用されます。

<form>
<input type="checkbox" name="bike" />I have a bike
<br />
<input type="checkbox" name="car" />I have a car
</form>

ブラウザには次のように表示されます:

I have a bike
I have a car

その他のコンポーネント

確認

ユーザーが確認ボタン(送信)をクリックすると、フォームの内容が転送されます別のドキュメントに。 [1]

Action属性

フォームのaction属性(

)は、送信先ファイルのファイル名を定義します。通常、action 属性で定義されたファイルは、受信した入力データに対して関連する処理を実行します。

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

2.

3.

4.

5.

以上がHTML フォームの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。