このドキュメントでは、HTMLフォームの基本的な作り方を解説します。以下の各セクションにジャンプするには、対応するリンクをクリックしてください。

• HTMLフォームの基本構造
• テキスト入力フィールド
• チェックボックス
• ラジオボタン
• ドロップダウンリスト
• テキストエリア
• 送信ボタン
• ファイルアップロード

HTMLフォームの基本構造

HTMLフォームは、ユーザーからデータを収集するために使用されます。フォームは、<form>タグで囲まれ、フォーム要素（入力フィールド、ボタンなど）がその中に配置されます。

<form action="submit_page.php" method="post">
    <!-- フォーム要素をここに追加 -->
</form>
    

action属性はフォームデータを送信する先のURLを指定し、method属性は送信方法（例: GET または POST）を指定します。

テキスト入力フィールド

テキスト入力フィールドは、ユーザーに短いテキストを入力させるために使用されます。

<form action="submit_page.php" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" placeholder="名前を入力してください">
</form>
    

この例では、labelタグでフィールドにラベルを付けています。placeholder属性で、入力例を示すことができます。

チェックボックス

チェックボックスは、複数のオプションから複数を選択可能にします。

<form action="submit_page.php" method="post">
    <label>
        <input type="checkbox" name="interests" value="sports"> スポーツ
    </label>
    <label>
        <input type="checkbox" name="interests" value="music"> 音楽
    </label>
    <label>
        <input type="checkbox" name="interests" value="movies"> 映画
    </label>
</form>
    

チェックボックスのvalue属性は、送信時にフォームデータとして送られる値を指定します。

ラジオボタン

ラジオボタンは、複数のオプションから1つだけ選択可能にします。

<form action="submit_page.php" method="post">
    <label>
        <input type="radio" name="gender" value="male"> 男性
    </label>
    <label>
        <input type="radio" name="gender" value="female"> 女性
    </label>
    <label>
        <input type="radio" name="gender" value="other"> その他
    </label>
</form>
    

同じname属性を持つラジオボタンは、1つだけ選択可能になります。

ドロップダウンリスト

ドロップダウンリストは、コンパクトな形式で複数のオプションを提示します。

<form action="submit_page.php" method="post">
    <label for="country">国を選択:</label>
    <select id="country" name="country">
        <option value="japan">日本</option>
        <option value="usa">アメリカ</option>
        <option value="uk">イギリス</option>
    </select>
</form>
    

<select>タグ内に<option>を追加することで、選択肢を指定します。

テキストエリア

テキストエリアは、ユーザーに長文を入力させるために使用されます。

<form action="submit_page.php" method="post">
    <label for="message">メッセージ:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>
    

rows属性とcols属性でテキストエリアのサイズを指定します。

送信ボタン

送信ボタンをクリックすると、フォームのデータが送信されます。

<form action="submit_page.php" method="post">
    <input type="submit" value="送信">
</form>
    

value属性でボタンのラベルを指定します。

ファイルアップロード

ファイルアップロードフィールドは、ユーザーにファイルをアップロードさせるために使用されます。

<form action="upload_page.php" method="post" enctype="multipart/form-data">
    <label for="file">ファイルを選択:</label>
    <input type="file" id="file" name="file">
    <input type="submit" value="アップロード">
</form>
    

enctype="multipart/form-data"を指定することで、ファイルデータを送信可能にします。