formタグ -フォームを作成する｜HTML辞典
<form>タグとは？
<form> タグは、ユーザーが入力したデータをサーバーに送信するためのフォームを作成するタグ です。<input>, <textarea>, <select>, <button> などのフォーム要素と組み合わせて使用されます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<form> は開始タグ（<form>）と閉じタグ（</form>）の両方が必要です。
基本的な記述方法
<form action="submit.php" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<button type="submit">送信</button>
</form>使用できる主な属性
<form> タグにはさまざまな属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
action | フォームデータを送信するURLを指定 | <form action="submit.php"> |
method | データ送信の方法（GET または POST） | <form method="post"> |
enctype | データのエンコード方式を指定 | <form enctype="multipart/form-data"> |
target | フォーム送信後のページの開き方 | <form target="_blank"> |
autocomplete | 自動補完の有効/無効を設定 | <form autocomplete="on"> |
novalidate | 入力チェックを無効化 | <form novalidate> |
CSSを使ったデザイン変更
フォームのスタイルを調整する場合は、CSSを活用できます。
form {
width: 100%;
max-width: 400px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input, button {
width: 100%;
margin-bottom: 10px;
padding: 10px;
}適切な使用例
✅ シンプルなテキスト入力フォーム
<form action="submit.php" method="post">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<button type="submit">送信</button>
</form>✅ method="get" を使用した検索フォーム
<form action="/search" method="get">
<input type="text" name="q" placeholder="検索...">
<button type="submit">検索</button>
</form>✅ ファイルアップロードフォーム（enctype="multipart/form-data"）
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">アップロード</button>
</form>✅ novalidate を使用して入力チェックを無効化する
<form action="submit.php" method="post" novalidate>
<input type="email" name="email" required>
<button type="submit">送信</button>
</form>適切でない使用例（誤った使い方）
❌ action を指定しない場合、データはどこにも送信されない
<!-- NG: action属性なし -->
<form>
<input type="text" name="name">
<button type="submit">送信</button>
</form>✅ 正しい書き方（action を指定）
<form action="submit.php">
<input type="text" name="name">
<button type="submit">送信</button>
</form>❌ method="post" を使わないと機密データがURLに表示される
<!-- NG: method="get" を使うとURLにデータが表示される -->
<form action="login.php" method="get">
<input type="password" name="password">
<button type="submit">ログイン</button>
</form>✅ 正しい書き方（method="post" を使用）
<form action="login.php" method="post">
<input type="password" name="password">
<button type="submit">ログイン</button>
</form><form>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<form> | フォームを作成 | action に送信先を指定 | ユーザーの入力データを送信 |
<input> | フォームの入力フィールド | type 属性で多様な入力形式 | テキスト、パスワード、チェックボックス |
<textarea> | 複数行のテキスト入力 | <input> と異なり改行可能 | コメント入力欄 |
<button> | ボタンを作成 | type に submit や reset を指定 | フォームの送信ボタン |
使用上の注意点
✅ method="post" を使用して機密データを安全に送信する
GETはデータをURLに表示するため、パスワード入力などにはPOSTを使用 する。
✅ enctype="multipart/form-data" を使用してファイルアップロードを許可する
- ファイルアップロードをする場合、
method="post"とセットでenctype="multipart/form-data"を指定する。
✅ novalidate を使用すると、クライアントサイドの入力チェックが無効になる
- これを指定すると
<input required>などのHTMLバリデーションが無視されるため、適用に注意する。
関連タグ
<input>– フォームの入力フィールド<textarea>– 複数行のテキスト入力<select>– ドロップダウンリスト<button>– 送信ボタン
まとめ
<form>タグは、HTML文書内でユーザーが入力したデータをサーバーに送信するためのフォームを作成するタグです。適切な method（GET / POST）とactionを指定し、フォーム要素と組み合わせて使用するのが一般的な使い方です。
