HTML フォームの作成方法 (例の説明)

フォームは、連絡先情報などのデータをユーザーから収集するため、またはユーザーがコメントの投稿や検索の実行など、Web サイトと対話できるようにするために使用されます。 この記事では、HTML を使用して基本的なフォームを作成する方法を学びます。

HTMLフォームの構造

タグを使用して HTML フォームを作成します. このタグ内には、テキスト フィールド、ボタン、チェックボックス、ラジオ ボタンなど、さまざまな入力要素を含めることができます。

入力要素はここにあります

入力要素

テキストフィールド

テキストフィールドはタグを使用して作成されます 属性付き タイプ 置かれた 文章. 例えば：

名前：




電話

要素 電話番号入力フィールドに使用されます。

電話：


日にち

要素 日付を選択するために使用します。

生年月日：


パスワード

要素 パスワード入力フィールドに使用されます。 このフィールドに入力されたテキストは、パスワードを隠すためにドットとして表示されます。

パスワード：


アーカイブ

要素 ユーザーがローカル ファイル システムからファイルを選択できるようにするために使用されます。

ファイルをアップロードする：


チェックボックス

要素 ユーザーがオプションを選択しないか、1 つまたは複数のオプションを選択できる入力フィールドに使用されます。

利用規約に同意します

無線

要素 ユーザーが一連のオプションから 1 つのオプションを選択できるようにする入力フィールドに使用されます。

性別：

男

女性

番号

要素 数値入力フィールドに使用されます。

額：


範囲

要素 値の範囲内の値を含める必要がある入力フィールドに使用されます。

音量：




ボタン

ボタンはタグを使用して作成されます 属性付き タイプ 置かれた 送信. このボタンを押すと、フォーム データが送信されます。 例えば：

名前：




フォーム入力の処理

送信ボタンを押すと、フォーム データが処理のために送信されます。 これは、属性を使用して指定される GET または POST の 2 つのメソッドのいずれかによって実行されます。 方法 ラベルに .

GETメソッド

GET メソッドは、フォーム データを URL の一部として送信します。 これは、フォーム データの機密性が高くない検索などに便利です。 ただし、この方法では送信できるデータの長さに制限があります。

入力要素はここにあります

POSTメソッド

POST メソッドは、URL とは別にフォーム データを送信します。 これはより安全で、はるかに大量のデータを処理できるため、連絡先やログイン フォームの送信などに使用されます。

入力要素はここにあります

どちらの場合も、属性は アクション フォーム データを処理するサーバー側スクリプトの URL を指定するために使用されます。

すべての要素を含む HTML フォームの例 

この記事で検討したすべての要素を使用したフォームは次のとおりです。

登録用紙

名前：



苗字：



Eメール：



電話：



生年月日：



パスワード：



ファイルをアップロードする：



利用規約に同意します


性別：

男

女性

額：



音量：




このフォームには、名、姓、電子メール、電話番号、生年月日、パスワードのフィールドと、パスワードをアップロードするためのフィールドがあります。 ファイル、契約条件のチェックボックス、性別を選択するラジオ、数量とボリュームの数値と範囲フィールド、 それぞれ。

最後の「送信」ボタンは、属性で指定された URL にフォームを送信する役割を果たします。 アクション レーベルの 形 (この場合は「/submit_form」)。 このフォームが実際の Web サイトで機能するには、「/submit_form」パスでこのフォームからの情報を受信して​​処理するようにサーバーを構成する必要があります。