【初心者向け】HTMLフォームの作り方とCSSでのスタイリング基本ガイド

1.はじめに：フォームってどうやって作るの？
2.HTMLでフォームを作ってみよう
- 💡 サンプルコード：
3.CSSでフォームをスタイリングしよう
- 💡 スタイリングのサンプルコード
4.よくあるエラーと対策
5.まとめ：HTML×CSSで実用的なフォームを作ろう！
- ✅ この記事で学んだこと

1.はじめに：フォームってどうやって作るの？

「お問い合わせページを作りたい」「名前やメールアドレスを入力してもらいたい」――
そんなときに使うのがHTMLフォームです。

HTMLでは、<form>タグを使って、ユーザーから情報を受け取るための入力欄を作ることができます。
入力欄（<input>）、メッセージボックス（<textarea>）、送信ボタン（<button>）など、決まったタグを組み合わせるだけで簡単に作成可能です。

さらに、CSSを使ってデザインを整えれば、見た目がきれいで使いやすいフォームに仕上がります。

この記事では、以下の内容を初心者向けにやさしく解説していきます。

フォームの基本構造（form / input / textarea / button）
よくある入力パターンの作り方
CSSによるスタイリングの基本
エラーを防ぐちょっとした工夫

「フォームって難しそう…」と思っている方も、この記事を読めばきっと自分で作れるようになりますよ！

2.HTMLでフォームを作ってみよう

フォームを作るには、全体を<form>タグで囲み、入力欄やボタンなどをその中に配置していきます。
以下は、名前・メール・メッセージ入力と送信ボタンを含むシンプルな例です。

💡 サンプルコード：

<form action="/submit" method="post">
  <label>
    お名前：<br>
    <input type="text" name="name">
  </label><br>

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

  <label>
    メッセージ：<br>
    <textarea name="message" rows="4"></textarea>
  </label><br>

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

✅ 各タグの説明

タグ／属性	説明
`<form>`	フォーム全体を囲むタグ。`action`で送信先URLを指定、`method`で送信方法を指定（通常は`post`）
`<input type="text">`	1行の文字入力欄
`<input type="email">`	メールアドレス用の入力欄（形式チェックあり）
`<textarea>`	複数行のテキスト入力欄。`rows`で行数指定
`<button>`	クリックでフォームを送信するボタン

これで、基本的なHTMLフォームの構造ができました！
次は、このフォームをCSSで見た目よく整える方法を紹介していきます。

3.CSSでフォームをスタイリングしよう

HTMLだけでもフォームは作れますが、そのままだとちょっと味気ないですよね。
CSSを使えば、見た目を整えて使いやすいフォームにできます。

💡 スタイリングのサンプルコード

以下のCSSをフォームに適用すると、シンプルで見やすいデザインになります：

<style>
  form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
  }

  input, textarea {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }

  button {
    background: #4caf50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
  }

  button:hover {
    background: #45a049;
  }
</style>