複数の例で HTML フォームを使用する方法

参考までに、HTMLフォームの使い方を9つの簡単な例で分析します。具体的な内容は次のとおりです。

1 フォームタグ

ウェブサイトはユーザーとどのようにやり取りしますか?答えは HTML フォームを使用することです。フォームはブラウザによって入力されたデータをサーバーに送信し、サーバー側のプログラムがフォームによって渡されたデータを処理できるようにします。
文法：

<form method="送信方法" action="サーバーファイル">

•<form>: <form> タグは、<form> で始まり </form> で終わるペアで表示されます。
•action: PHP ページ (save.php) など、ブラウザで入力されたデータが送信される場所。
•method: データ送信の方法（get/post）。

すべてのフォーム コントロール (テキスト ボックス、テキスト フィールド、ボタン、ラジオ ボタン、チェック ボックスなど) は、<form></form> タグの間に配置する必要があります (そうしないと、ユーザーが入力した情報をサーバーに送信できません)。
メソッド: post/get の違いは、バックエンド プログラマが考慮する必要がある問題です。興味のある方は、詳細な紹介が記載されているこのセクションのウィキをご覧ください。

2 入力/テキスト/パスワード テキストとパスワード入力ボックス

テキスト入力ボックスは、ユーザーがフォームに文字や数字などを入力するときに使用されます。テキスト ボックスをパスワード入力ボックスに変換することもできます。
文法：

type="text" の場合、入力ボックスはテキスト入力ボックスになります。
type="password" の場合、入力ボックスはパスワード入力ボックスになります。
name: バックグラウンド プログラム ASP および PHP で使用するテキスト ボックスに名前を付けます。
value: テキスト入力ボックスのデフォルト値を設定します。 (通常はリマインダーとして機能します)

テストコード:

ブラウザ効果:

3 テキストエリアテキストフィールド、複数行のテキスト入力をサポート

ユーザーがフォームに長いテキストを入力する必要がある場合、テキスト入力フィールドが必要になります。
文法：

<textarea rows="rows" cols="columns">テキストのデフォルト値</textarea>

1. <textarea> タグは、<textarea> で始まり </textarea> で終わるペアで表示されます。
2. cols: 複数行入力フィールドの列数。
3. 行: 複数行入力フィールドの行数。
4. ラベル間にデフォルト値を入力できます。

ブラウザ効果:

4 ラジオ/チェックボックス ラジオボタンとチェックボックス

フォームを使用してアンケートを設計する場合、ユーザーの操作を減らすために選択ボックスを使用することをお勧めします。HTML には、ラジオ ボタンとチェック ボックスの 2 種類の選択ボックスがあります。この 2 つの違いは、ラジオ ボタンではユーザーが 1 つのオプションしか選択できないのに対し、チェック ボックスでは複数のオプション、さらにはすべてのオプションを選択できることです。
文法：

<input type="radio/checkbox" value="値" name="名前" checked="チェック済み"/>

1. type="radio"の場合、コントロールはラジオボタンになります
2. type="checkbox"の場合、コントロールはチェックボックスです
3.value: サーバーに送信されたデータの値（バックグラウンド プログラム PHP によって使用される）
4.name: バックグラウンドプログラムASPおよびPHPで使用するコントロールに名前を付けます。
5. チェック済み: チェック済み="チェック済み"に設定すると、このオプションがデフォルトで選択されます
6. 注意: 同じグループ内のラジオ ボタンの場合、名前の値は一貫している必要があります。たとえば、上記の例では、同じ名前は「radioLove」であるため、同じグループ内のラジオ ボタンは単一選択の役割を果たすことができます。

ブラウザ効果は次のとおりです。

このデモ コードは、3 つのオプションを持つラジオ ボタンと 4 つのオプションを持つチェック ボックスを実装します。

同じ選択ボックスの名前の値は一貫している必要があります。そうでない場合、単一選択機能と複数選択機能を実装できません。同じ選択ボックス内の値は異なる必要があります。そうでない場合、バックグラウンドに渡されるデータは不正確になります。

5 ドロップダウンリストボックスを使用した選択/オプション

ドロップダウン リストは Web ページでも頻繁に使用され、Web ページのスペースを効果的に節約できます。単一または複数のオプションを選択できます。

文法：

<option value=”name” selected=”selected”>実行</option>

値はサーバーに送信される値です。

selected="selected" 属性を設定すると、オプションはデフォルトで選択されます。

ブラウザ効果:

6 ドロップダウンボックスを使用して複数のオプションを選択する

ドロップダウン リストでは、複数選択操作も実行できます。タグに multiple="multiple" 属性を設定すると、複数選択機能を実現できます。Windows オペレーティング システムでは、Ctrl キーを押しながらクリック (Mac では Command キーを押しながらクリック) して、複数のオプションを選択します。

ブラウザ効果:

7 入力/送信は送信ボタンを使用してデータを送信します

構文: <input type="submit" value="送信">

type: type値がsubmitに設定されている場合にのみ、ボタンに送信機能があります。
値: ボタンに表示されるテキスト

ブラウザ効果:

8 入力/リセット リセットボタンを使用してフォーム情報をリセットします

ユーザーがフォーム情報を初期状態にリセットする必要がある場合、たとえば、ユーザーが「ユーザー名」を入力し、その書き方が間違っていることに気付いた場合、リセット ボタンを使用して入力ボックスを初期状態に戻すことができます。タイプを「リセット」に設定するだけです。
文法：

<input type="reset" value="リセット">1

タイプ: ボタンは、タイプ値がリセットに設定されている場合にのみリセットされます。
値: ボタンに表示されるテキスト

ブラウザ効果:

9 フォーム内のラベルタグ

このラベルはユーザーに特別な効果をもたらすものではなく、マウス ユーザーの使いやすさを向上させることを目的としています。ラベル タグ内のテキストをクリックすると、このコントロールがトリガーされます。つまり、ユーザーがラベル タグをクリックして選択すると、ブラウザーはラベルに関連付けられたフォーム コントロールにフォーカスを自動的に移動します (ラベル タグに関連付けられたフォーム コントロールを自動的に選択します)。
文法：

<label for="コントロール ID 名">

注:ラベルの for 属性の値は、関連するコントロールの id 属性の値と同じである必要があります。

ブラウザ効果:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。