HTML

HTMLフォームの基本から応用までわかる完全マニュアル

Webサイトでユーザーから情報を集めたいときに欠かせないのが「フォーム」です。

この記事では、超初心者向けにフォームの作り方をやさしく解説します！

そもそもフォームとは？

フォームとは、ユーザーが情報を入力して送信するための仕組みです。

例えば：

  • お問い合わせフォーム
  • 会員登録フォーム
  • ログイン画面

これをHTMLでどのように作るのか、順番に説明していきます！

基本のフォームの書き方

<form action="#" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <br><br>

  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  <br><br>

  <button type="submit">送信</button>
</form>

解説:

  • <form>：フォーム全体を囲むタグ。
  • <label>：入力欄の説明文。
  • <input>：実際に文字を入力する欄。
  • <button>：送信ボタン。

コピペで動作確認してみよう！

このコードをコピペして保存し、ブラウザで表示すると、簡単なフォームが動作するのを確認できます！

<!DOCTYPE html>
<html>
<head>
  <title>シンプルなフォーム</title>
</head>
<body>
  <h2>お問い合わせフォーム</h2>

  <form action="#" method="post">
    <label for="name">名前:</label><br>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">メールアドレス:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <button type="submit">送信</button>
  </form>

</body>
</html>

フォームをもっと便利に！

必須入力にする（required属性）

入力しないと送信できないようにする機能です。

<input type="text" name="name" required>

プレースホルダーでヒントを表示

入力欄に薄いグレーのヒントテキストが表示されます。

<input type="text" placeholder="ここに名前を入力してください">

複数の選択肢を作る（ラジオボタン・チェックボックス）

<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<label><input type="checkbox" name="subscribe"> メルマガ登録</label>

すべての要素を組み込んだフォーム（コピペOK！）

ここまでの全ての内容をコピペで確認できます。

<!DOCTYPE html>
<html>
<head>
  <title>お問い合わせフォーム（応用版）</title>
</head>
<body>
  <h2>お問い合わせフォーム</h2>

  <form action="#" method="post">
    <label for="name">名前:</label><br>
    <input type="text" id="name" name="name" placeholder="名前を入力" required><br><br>

    <label for="email">メールアドレス:</label><br>
    <input type="email" id="email" name="email" placeholder="example@example.com" required><br><br>

    <label>性別:</label><br>
    <label><input type="radio" name="gender" value="male" required> 男性</label>
    <label><input type="radio" name="gender" value="female" required> 女性</label><br><br>

    <label><input type="checkbox" name="subscribe"> メルマガ登録を希望する</label><br><br>

    <button type="submit">送信</button>
  </form>

</body>
</html>

おさらいクイズ！

1️⃣ フォームを作るための正しいタグはどれ？

A:

<textform>
  <input type="text">
</textform>

B:

<form>
  <input type="text">
</form>

✅ 答え: → Bが正解！ <form>タグを使うことでフォームを作成できます。

2️⃣ 「送信ボタン」を作るために正しいのは？

  • A. <button type="send">送信</button>
  • B. <button type="submit">送信</button>

✅ 答え: → Bが正解！ type="submit"が正しい書き方です。

まとめ

  • <form>：フォーム全体を囲むタグ
  • <input>：情報を入力する欄
  • <button>：送信ボタン
  • required：必須入力にするための属性

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。