HTMLのフォーム

1. フォームについての基本知識

HTMLのフォームは、ユーザーとウェブページのインタラクションにとって重要なツールだよ。ユーザーからの情報（例えば、テキスト、リストからの選択、ファイルその他のデータ）を収集し、その後、サーバーに送信して処理ができる。HTMLでは、フォームは様々な要素を使って作成され、それぞれ特定のデータ入力タイプに対応しているんだ。フォームの主な要素は<form>であり、他の要素（例えば<input>, <textarea>, <button>, <select>など）が含まれる。

フォームの主要な要素

フォームの要素は、入力フィールド、ボタン、ドロップダウンリストなど、ユーザーがデータを入力するためのインターフェイスの要素を作成できるんだ。フォームで使われる主なタグ:

• <form> — 全てのフォーム要素の主要なコンテナで、データがどこに、どのように送信されるかを定義する。
• <input> — 様々なタイプ（テキスト、パスワード、ラジオボタン、チェックボックスなど）の入力フィールドを作成するための汎用要素。
• <label> — 入力フィールドと関連づけられ、その目的を示すための要素。
• <textarea> — 複数行テキストの入力フィールド。
• <button> — フォームを送信したり、他のアクションを実行するためのボタン。
• <select> と <option> — ドロップダウンリストで、ユーザーは1つまたは複数の選択肢を選ぶことができる。

簡単なフォームの例

      
    <form action="/submit" method="post">
      <label for="name">名前:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">メールアドレス:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">送信</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">送信</button>
</form>

• action: <form>でフォームデータが送信されるURLを定義する。
• method: データ送信のメソッドを指定する: postまたはget。

HTML <input>

タグ<input>はフォーム内で最も汎用的な要素だね。様々な入力タイプをサポートしており、それぞれ特定のデータタイプに対応している。

タグ<input>の構文:

<input type="タイプ" name="フィールド名" id="識別子" value="値">

<input type="タイプ" name="フィールド名" id="識別子" value="値">