HTML フォーム タグの使用方法を学ぶチュートリアル

HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際にはフォーム要素を含む領域です。この領域内のさまざまな要素の入力情報は、最終的にフォームを通じてプログラム スクリプトに送信されます。たとえば、一般的なものとしては、ユーザーのログイン、登録、記事の公開などが挙げられますが、これらはすべてフォームを通じて処理するために動的プログラムに送信されます。このセクションでは、主にフォームとフォーム要素について説明します。フォーム情報を動的プログラムに送信する方法については、今後のプログラミング言語コースで説明します。
フォーム領域は <form> タグによって定義されます。<form></form> 内の要素の値は、このフォームを通じて対応するアドレスに送信されます。

入力情報
一般的に、<input> タグはフォーム内でユーザー入力情報を収集するために使用され、入力タイプは type によって決定されます。
ほとんどの場合に使用されるフォーム タグは、入力タグ (<input>) です。入力タイプは、タイプ属性 (type) によって定義されます。一般的な入力タイプには、テキスト フィールド、ラジオ ボタン、チェック ボックス、ドロップダウン メニューなどがあります。

テキストフィールド
テキスト フィールドは、ユーザーにテキストを入力する機能を提供します。ブラウザーはテキスト フィールドを長方形のボックスとして解釈します。ユーザーは、ボックスにカーソルを移動し、クリックしてカーソルをボックス内に移動できます。ユーザーはフォームに文字や数字などを入力できます。
テキスト フィールドは、<input> タグの type 属性にテキスト値を設定することによって定義されます。

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

ラジオボタン
ラジオ ボタンは、ほとんどの場合、ユーザーが登録時に情報を入力するときのオプションに表示されます。このタイプのボタンは、ユーザーが 1 つの結果のみを選択できる場合に使用されます。
ラジオ ボタンは、<input> タグの type 属性の値を radio に設定することによって定義されます。

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

チェックボックス
チェックボックスを使用すると、ユーザーは 1 つ以上のオプションを選択できます。一般的な機能としては、ログイン時にログインアカウントを記憶するなどの機能をユーザーに提供することが挙げられます。ユーザーアンケートページではユーザーから複数の意見を集めることもできます。
チェックボックスを定義するには、<input> タグの type 属性の値を checkbox に設定します。

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

ドロップダウンメニュー
ドロップダウン メニューは、情報の選択という点ではラジオ ボタンに似ていますが、より多くの情報を保持できます。また、ドロップダウン メニューでは、メニュー値を選択した後に追加のスクリプトを実行できます。
ドロップダウン メニューは <select> タグで始まり、select タグ内の各オプション タグはドロップダウン メニューの値になります。

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

送信ボタン
送信ボタンはあらゆるフォームに不可欠な部分です。ユーザーが対応する情報を入力した後、「送信」ボタンをクリックしてアクションをトリガーし、フォームの値を次のページに送信する必要があります。 <form> タグの action 属性が対応する送信アドレスに設定されている場合、送信ボタンはフォームで取得されたすべてのデータをこのアドレスのページに送信します。
送信ボタンは、入力タグで type の値を submit に設定することによって定義されます。以下では、フロントエンド開発者の検索ボックスを例に、検索ページに送信アドレスを設定します。

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

結論: このセクションでは、一般的に使用されるフォームのフロントエンド レイアウト要素の基本的なデモンストレーションと説明のみを提供します。実形式のアプリケーションは主にサーバープログラミング言語で使用され、より多くのパラメータとルールを設定する必要があります。このレッスンでは、フォームの要素を配置する方法を理解するだけで済みます。ほとんどの場合、基本的にはバックエンド プログラマーと協力して Web サイトの開発を完了できます。