HTMLフォームの作成方法：ガイド
HTMLフォームは、テキストフィールド、ドロップダウン、チェックボックスなどを使用してユーザーからデータを収集します。 HTMLのフォームはで囲まれています <フォーム> タグを付けてを使用します <入力> タグを使用して要素を作成します。
HTMLフォームは、ユーザーがWebサイトまたはWebアプリケーションと対話する方法を提供します。 Webフォームを使用すると、ユーザーはデータを送信して、Webサイトまたはサーバーで処理および保存できます。
HTMLでフォームを作成するにはどうすればよいですか？これが、このチュートリアルで答える質問です。
このチュートリアルでは、例を使用して、HTMLフォームの基本、フォームに入力フィールドを追加する方法、およびフォームを使用してサーバーにデータを送信する方法について説明します。このチュートリアルを終了すると、HTMLでフォームを作成するエキスパートになります。
HTMLフォーム
HTMLでは、フォーム 1つ以上の要素で構成されています。 HTMLフォームには、次の要素を含めることができます。
- 1行のテキストフィールド
- テキストボックス
- ドロップダウンボックス
- チェックボックス
- ボタン
- ラジオボタン
これらの要素は、ボタンとテキストボックスを除いて、 を使用します HTMLコードのタグ。
ユーザーがフォームを送信すると、フォームの内容は次のようになります。
- さらに処理するためにサーバーに送信するか、
- Webブラウザで処理されます。
HTMLでフォームを作成する前に、フォームをどのようにデザインするかを考える必要があります。どのようなデータを収集する必要がありますか？フォームをシンプルに保つにはどうすればよいですか？フォームが大きいほど、ユーザーがフォームに入力する可能性は低くなります。
参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
このチュートリアルでは、喫茶店のWebサイトのフォームを作成します。 Three Brothers Coffee Houseから、Webサイトを通じて顧客からの問い合わせを受け入れることができるフォームのデザインを依頼されたとします。
私たちは、4つの情報を受け入れるフォームを作成する必要があります。これらは次のとおりです。
- 名前 ユーザーの。
- ユーザーのメールアドレス 。
- ユーザーがこれまでに訪問したかどうか コーヒーハウス。
- メッセージ ユーザーが喫茶店に送りたいと思っています。
これは、フォームに4つの要素を含める必要があることを意味します。ユーザーがフォームを送信できるように、フォームにも1つのボタンが必要です。
HTML タグ
HTMLのフォームは、 で囲まれています 鬼ごっこ。 HTMLのフォームの例を次に示します。
<form> // Elements </form>
<フォーム> タグは、HTMLでフォームを定義するために使用されます。定義したら、 タグには、チェックボックスや1行のテキストフィールドなどのフォーム要素を含めることができます。
form要素は2つの属性を受け入れます： action およびmethod 。これらの属性については、このチュートリアルの後半で説明します。
HTMLフォームの要素
ほとんどのHTMLフォームコントロールには、入力要素が含まれています 。これらは、ユーザーからさまざまなタイプのデータを収集するために使用されます。入力要素は、 を使用して定義されます タグ。
の方法 Webサイトに表示される要素は、指定されたtype属性によって異なります。たとえば、入力フィールドがテキストボックスの場合、ラジオボタンの場合とは表示が異なります。
の構文 要素は次のとおりです：
<input type="type" id="elementId">
この例では、 2つの属性を受け入れます。 typeと呼ばれる最初の属性 、はフォームフィールドが受け入れる入力のタイプです。 type 属性には多くの値を含めることができますが、最も一般的なものは次のとおりです。
ボタンチェックボックスメールテキスト番号ラジオ
この例の2番目の属性はidです。 。この属性は、入力要素を一意に識別するために使用され、ユーザーのフォーム入力を処理するために使用するスクリプトによってユーザーが送信したデータにアクセスするために使用されます。
スリーブラザーズコーヒーハウスに戻りましょう。作成するフォームは、ユーザーに関する4つの情報を受け入れる必要があります。収集したい最初の2つの情報は、ユーザーの名前とメールアドレスです。
これらの情報は、2つの を使用して収集できます。 タグ：
<form> <label for="name">Name:</label><br/> <input type="text" id="name" name="name"><br /><br /> <label for="email">Email:</label><br/> <input type="email" id="email" name="email"> </form>
をクリックします 
上記のエディターのボタンをクリックしてコードを実行します。
ご覧のとおり、ユーザーの名前とユーザーのメールアドレスの2つの値を受け入れるフォームを作成しました。この例では、 も使用しました エレメント。この要素についてはすぐに説明します。
名前 HTMLフォームの属性
HTMLフォームのすべてのフォーム要素には、 nameが必要です。 属性。この属性は、フォームのコンテンツを送信するために使用されます。 nameを指定しない場合 フォーム要素の属性の場合、その要素のコンテンツはサーバーに送信されません。
上記の例では、「名前」フィールドに nameがあります 値がnameの属性 、および「Eメール」フィールドには nameがあります 値がemailの属性 。
HTML 要素
上記の例では、 を使用しました フォームの各アイテムにHTMLラベルを追加する要素。 タグを使用すると、フォーム要素の目的とそれが受け入れるデータを明確に示すことができます。
タグを使用すると、スクリーンリーダーを使用するユーザーにコンピューターが読み取るテキストを定義することもできます。これは、スクリーンリーダーが、Webページの入力フィールドに遭遇したときにラベルを読み取るためです。
HTMLラベルの構文は次のとおりです。
<form> <label for="name">Name:</label><br/> <input type="text" id="name" name="name"> </form>
上記の例では、ユーザーの名前を収集するフォームを作成しました。 を使用しました ラベルを追加するタグName： フォームに。 forという属性も指定していることに注意してください。 で エレメント。この属性は、 idと同じである必要があります inputによって使用される属性 フォームを対応するラベルにバインドするため、ラベルがリンクされている要素。
HTMLフォーム要素
スリーブラザーズコーヒーハウスに戻りましょう。このチュートリアルの冒頭で、ユーザーの名前、メールアドレス、顧客かどうか、コーヒーハウスに送信したいメッセージの4つの情報を収集したいと述べました。
これまでに、名前フィールドと電子メールフィールドの2つのフォームフィールドを作成しました。残りのフォームを作成する方法について説明しましょう。
ラジオボタン
ラジオボタンは、HTMLフォームで使用される一般的なタイプの入力です。ラジオボタンを使用すると、ユーザーは限られた数の選択肢から1つの値を選択できます。多くの場合、ラジオボタンは、性別情報、年齢層、またははい/いいえの回答を収集するフォームに使用されます。
ラジオボタンの構文は次のとおりです。
<input type="radio" name="radio_button">
私たちのフォームでは、ユーザーにスリーブラザーズコーヒーハウスの顧客であるかどうかを尋ねたいと思います。ラジオボタンを使用して、このタスクを実行できます。そのために使用するコードは次のとおりです。
<form> <p>Are you a customer of the Three Brothers Coffee House?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">Yes</label><br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">No</label><br /> </form>
をクリックします 上記のエディターのボタンをクリックしてコードを実行します。
その後、ユーザーは次の2つの値のいずれかを送信できます： yes またはno 。
コードを分解してみましょう。まず、
を定義します 。次に、 を使用します タグを付けて、ユーザー向けの説明テキストを追加します。
次の行で、値が yesのラジオボタンを作成します。 。次に、このボタンのラベルを作成します。このラベルには、「はい」というテキストが表示されます。次に、値が noのラジオボタンを作成します。 そのボタンのラベルを作成して、「いいえ」というテキストを表示します。
コードでは、ラジオボタンに valueがあることに注意してください。 指定された属性。この値は、ユーザーがフォームを送信したときにサーバーに送信されるデータです。したがって、ユーザーが「はい」ラジオボタンをクリックすると、値 yes サーバーに送信されます。