フォームタグの基本と使い方 – HTMLで始めるホームページ作成

フォームタグの基本と使い方 – HTMLで始めるホームページ作成

フォームタグは、ユーザーがデータを入力し、サーバーに送信するための重要なHTML要素です。これを理解することで、よりインタラクティブなホームページを作成することができます。

フォームタグの基本

フォームタグは、一般的に以下のように使用されます:

<form action="submit.php" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">

  <label for="email">メール:</label>
  <input type="email" id="email" name="email">

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

主要なフォーム要素

フォームタグ内で使用される主要な要素は次の通りです:

• input: ユーザーからのデータ入力に使用されます。
• label: フォーム要素にラベルを付けるために使用されます。
• textarea: 複数行のテキスト入力を可能にします。
• select: ドロップダウンリストを作成します。
• button: フォームを送信するボタンを作成します。

inputフォームの種類

inputタグには多くの種類があり、適用に応じて使い分けることが重要です。以下に代表的な種類を示します:

1. text: 単行のテキスト入力。
2. password: パスワード入力。
3. email: メールアドレス入力。
4. radio: ラジオボタン。
5. checkbox: チェックボックス。

注意: フォームの各要素に対するlabelタグの使用は、アクセシビリティを向上させます。

フォーム送信の例

例えば、以下のようなフォームを作成することで、ユーザーからの問い合わせを受け付けることができます。

<form action="submit.php" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">

  <label for="query">お問い合わせ内容:</label>
  <textarea id="query" name="query"></textarea>

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

まとめ

フォームタグの基本と主要な要素について学びました。これを活用することで、ホームページにインタラクティブな機能を追加できるようになります。さらに詳しい情報については、こちら(外部リンク)を参照してください。