フォーム作成の紹介

フォームの要素

テキスト入力フィールド

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

送信ボタン

フォームの送信先設定

フォーム作成の紹介

HTMLフォームは、ユーザーからデータを受け取るために使われます。ユーザーがWebページ上でデータを入力し、そのデータをサーバーに送信するために使用されます。フォームは、通常、入力フィールドやボタン、選択肢を含み、ユーザーに必要な情報を提供するために設計されます。

基本的なHTMLフォームは、<form>タグを使用して作成します。このタグ内に入力要素を配置し、ユーザーが送信できるようにします。

フォームの要素

フォームを構成する要素にはさまざまなタイプがあります。これらの要素を使って、ユーザーが情報を入力できるインターフェースを作成します。主なフォーム要素は以下の通りです。

• <input>: テキスト入力、ラジオボタン、チェックボックスなど
• <textarea>: 複数行のテキスト入力
• <select>: ドロップダウンリスト
• <button>: ボタン

テキスト入力フィールド

<input>タグを使用して、テキスト入力フィールドを作成します。以下は、テキストを入力するための基本的なフォームの例です。

<form action="submit_form.php" method="post">
  名前:
  <input type="text" id="name" name="name">
  <input type="submit" value="送信">
</form>
  

この例では、ユーザーは「名前」フィールドにテキストを入力し、「送信」ボタンを押すと、データがサーバーに送信されます。

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

ラジオボタンとチェックボックスは、複数の選択肢から1つまたは複数を選ぶための入力要素です。

ラジオボタン

ラジオボタンは、1つの選択肢だけを選ばせたい場合に使用します。複数の選択肢があり、その中から1つだけ選択できます。

<form>
   赤

   緑

   青

  <input type="submit" value="送信">
</form>
  

この例では、ユーザーは「赤」、「緑」、「青」の中から1つだけ選択できます。

チェックボックス

チェックボックスは、複数の選択肢の中から1つまたは複数を選ばせたい場合に使用します。

<form>
   りんご

   バナナ

   オレンジ

  <input type="submit" value="送信">
</form>
  

この例では、ユーザーは複数のフルーツを選択できます。

送信ボタン

フォームの送信は、<input type="submit">を使用して行います。送信ボタンをクリックすると、フォーム内のデータが指定した場所に送信されます。

<form action="submit_form.php" method="post">
  メールアドレス:
  <input type="email" id="email" name="email">

  <input type="submit" value="送信">
</form>
  

この例では、ユーザーがメールアドレスを入力し、「送信」ボタンを押すと、指定されたURLにデータが送信されます。

フォームの送信先設定

フォームは、action属性を使用して、データの送信先を指定します。この送信先は、通常はサーバー上のスクリプト（例：PHP、Pythonなど）で、送信されたデータを処理します。また、method属性で、送信方法（GETまたはPOST）を指定することができます。

例えば、以下のようにフォームを設定できます。

<form action="submit_form.php" method="post">
  ユーザー名:
  <input type="text" id="username" name="username">

  <input type="submit" value="送信">
</form>
  

このフォームでは、ユーザーが「ユーザー名」を入力し、「送信」ボタンをクリックすると、submit_form.phpにPOSTメソッドでデータが送信されます。