6日でできる 新HTML&CSS入門｜お問い合わせフォームの作り方
入力欄を並べるだけでは、使いやすいフォームにはならない。
form、input、textarea、labelを正しく組み合わせて、送信できるお問い合わせフォームを作ろう。
Webサイトでは、ユーザーから情報を入力してもらう場面が多くあります。たとえば、お問い合わせ、資料請求、会員登録、アンケート、予約申し込みなどです。こうした入力画面を作るために使うのがフォームです。
フォームは、テキストボックス、ラジオボタン、テキストエリア、送信ボタンなどをひとまとまりにして、入力された内容を指定した送信先へ送る役割を持ちます。見た目としては入力欄が並んでいるだけに見えるかもしれませんが、HTMLではform、input、textarea、labelなどのタグを組み合わせて作られています。
お問い合わせフォームでは、ユーザーの名前、連絡方法、問い合わせ内容などを入力してもらうことが多いです。そのため、どの入力欄にどの情報を入れるのかが分かりやすく、送信時にデータとして扱いやすい形にしておくことが大切です。
また、フォームではmethod属性やaction属性も重要です。methodではデータの送信方法を指定し、actionでは送信先を指定します。さらに、inputやtextareaにはname属性を付ける必要があります。name属性がないと、入力された値を送信データとして扱いにくくなります。
この記事では、お問い合わせフォームの基本構造、よく使うタグと属性、GETとPOSTの違い、name属性の役割を、サンプルHTMLを使いながら分かりやすく解説していきます。
フォームとは何か
フォームとは、ユーザーがWebページ上で情報を入力し、その内容を送信するための仕組みです。お問い合わせフォームであれば、名前、メールアドレス、問い合わせ内容などを入力してもらい、送信ボタンを押すことでデータをサーバーへ送る流れになります。
フォームは、入力欄をただ表示するだけではありません。どのデータを、どの名前で、どこへ、どの方法で送るのかを決める役割もあります。その中心になるのが<form>です。
| フォームで扱うもの | 例 |
|---|---|
| 短い文字入力 | 名前、メールアドレス、件名 |
| 選択項目 | 連絡方法、問い合わせ種別、性別、希望日 |
| 複数行の文章 | お問い合わせ内容、備考、感想 |
| 送信操作 | 送信ボタン、確認ボタン |
お問い合わせフォームでは、ユーザーが迷わず入力できることが大切です。入力欄の前には分かりやすいラベルを置き、placeholderで入力例を示すと、フォーム全体が使いやすくなります。
図1：お問い合わせフォームは入力欄をまとめて送信する仕組み
この図から分かること
お問い合わせフォームは、複数の入力欄をひとつのまとまりとして管理します。ユーザーが入力した名前、連絡方法、問い合わせ内容などは、送信ボタンを押すことで送信先へ送られます。formタグは、こうした入力欄全体をまとめるための土台になります。
formタグはフォーム全体を囲む
<form>は、フォーム全体を囲むタグです。どこからどこまでが1つのフォームなのかを示し、送信方法や送信先を指定します。
代表的な属性はmethodとactionです。
| 属性 | 役割 |
|---|---|
| method | データをどの方法で送信するかを指定する |
| action | データの送信先URLを指定する |
| autocomplete | 入力補助を有効または無効にする |
たとえば、次のように書くと、フォームの入力内容をcontact-result.htmlへGET方式で送信します。
<form method="GET" action="contact-result.html" autocomplete="off">
入力欄をここに書く
</form>methodにはGETやPOSTを指定できます。GETはURLに入力内容が付いて送信される方式で、検索フォームなどに向いています。POSTはURLに入力内容が直接表示されにくい方式で、お問い合わせや登録フォームなどでよく使われます。
inputタグはさまざまな入力欄を作る
<input>は、1行のテキスト入力、ラジオボタン、チェックボックス、送信ボタンなど、さまざまな入力部品を作るタグです。type属性の値によって、表示される入力欄の種類が変わります。
| typeの値 | 入力欄の種類 | 用途 |
|---|---|---|
| text | 1行のテキスト入力 | 名前、件名など |
| メールアドレス入力 | メールアドレス | |
| radio | ラジオボタン | 1つだけ選ぶ選択肢 |
| checkbox | チェックボックス | 複数選択できる項目 |
| submit | 送信ボタン | フォームを送信する |
お問い合わせフォームでは、名前にはtype="text"、連絡方法にはtype="radio"、送信ボタンにはtype="submit"を使うことが多いです。
textareaタグは複数行の文章入力に使う
<textarea>は、複数行の文章を入力するためのタグです。お問い合わせ内容や備考欄、自由記述欄などに向いています。
input type="text"は1行入力ですが、textareaは長い文章を入力できます。お問い合わせフォームでは、ユーザーが詳しい内容を書けるように、textareaを用意しておくと便利です。
<textarea name="message" placeholder="お問い合わせ内容を入力してください"></textarea>textareaにもname属性を付けることが大切です。送信時には、name属性の値と入力内容がセットになって送られます。
labelタグは入力欄の説明を表す
<label>は、入力欄の名前や説明を表すタグです。たとえば、お名前、メールアドレス、お問い合わせ内容などの文字をlabelとして書きます。
labelにはfor属性を指定できます。for属性の値と、inputやtextareaのid属性の値を同じにすると、ラベルと入力欄が関連付けられます。
<label for="visitor-name">お名前</label>
<input type="text" id="visitor-name" name="visitor-name">このようにしておくと、ラベルをクリックしたときに対応する入力欄へフォーカスできるようになります。見た目だけでなく、操作しやすさやアクセシビリティの面でも大切な指定です。
図2：labelとinputを組み合わせて分かりやすい入力欄を作る
この図から分かること
labelを使うと、入力欄が何を入力する場所なのかを分かりやすく示せます。for属性とid属性を対応させることで、ラベルと入力欄を関連付けられます。フォームを作るときは、入力欄だけを並べるのではなく、labelもセットで用意すると使いやすくなります。
お問い合わせフォームのサンプルHTML
ここでは、名前、メールアドレス、連絡方法、お問い合わせ内容、送信ボタンを持つシンプルなフォームを作ります。CSSも同じHTML内に書き、フォームの見た目を整えます。
ファイル名： lesson42_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォームの作成</title>
<style>
body {
font-family: sans-serif;
padding: 30px;
background-color: #f4f8fb;
}
form {
width: 380px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
border: 1px solid #d9e3ea;
}
.form-group {
margin-bottom: 16px;
}
label {
display: block;
margin-bottom: 6px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
font-size: 1em;
border: 1px solid #b0bec5;
border-radius: 4px;
}
textarea {
min-height: 90px;
resize: vertical;
}
.radio-group label {
display: inline-block;
margin-right: 14px;
font-weight: normal;
}
input[type="submit"] {
padding: 9px 22px;
font-size: 1em;
border: none;
border-radius: 4px;
background-color: #3399cc;
color: #ffffff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #21709b;
}
</style>
</head>
<body>
<form method="GET" action="contact-result.html" autocomplete="off">
<div class="form-group">
<label for="visitor-name">お名前</label>
<input type="text" id="visitor-name" name="visitor-name" placeholder="例：田中美咲">
</div>
<div class="form-group">
<label for="visitor-email">メールアドレス</label>
<input type="email" id="visitor-email" name="visitor-email" placeholder="例：sample@example.com">
</div>
<div class="form-group">
<label>ご希望の連絡方法</label>
<div class="radio-group">
<label><input type="radio" name="reply-method" value="メール" checked>メール</label>
<label><input type="radio" name="reply-method" value="電話">電話</label>
</div>
</div>
<div class="form-group">
<label for="inquiry">お問い合わせ内容</label>
<textarea id="inquiry" name="inquiry" placeholder="お問い合わせ内容を入力してください"></textarea>
</div>
<input type="submit" value="送信する">
</form>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、中央に白いカード型のお問い合わせフォームが表示されます。フォーム内には、お名前、メールアドレス、ご希望の連絡方法、お問い合わせ内容、送信ボタンが並びます。
お名前とメールアドレスは1行入力欄です。ご希望の連絡方法はラジオボタンで、メールまたは電話を選べます。お問い合わせ内容は複数行入力できるtextareaです。送信するボタンにマウスを乗せると、背景色が濃い青に変わります。
サンプルHTMLの構造を確認する
このサンプルでは、formの中に複数の入力欄を配置しています。それぞれの入力欄はdiv class="form-group"で囲み、1つの入力項目として分かりやすくまとめています。
| 部分 | 役割 |
|---|---|
| form | 入力欄全体をまとめる |
| div class="form-group" | 入力項目ごとのまとまりを作る |
| label | 入力欄の説明を表示する |
| input type="text" | お名前の入力欄を作る |
| input type="email" | メールアドレスの入力欄を作る |
| input type="radio" | 連絡方法の選択肢を作る |
| textarea | お問い合わせ内容の入力欄を作る |
| input type="submit" | 送信ボタンを作る |
フォームでは、入力欄を整理して配置することが大切です。項目ごとにまとまりを作ると、CSSで余白を付けやすくなり、ユーザーにも分かりやすいフォームになります。
CSSでフォームを見やすく整える
フォームはHTMLだけでも作れますが、CSSを使うと見た目が整い、入力しやすくなります。
このサンプルでは、formにwidth、margin、background-color、padding、border-radiusを指定しています。これにより、フォーム全体が中央に配置され、白いカードのように表示されます。
form {
width: 380px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
}inputやtextareaにはwidth: 100%;を指定しています。これにより、入力欄がフォームの幅いっぱいに広がります。ただし、paddingを含めた幅を自然に計算するため、box-sizing: border-box;も一緒に指定しています。
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
}box-sizing: border-box;を指定すると、widthにpaddingやborderを含めて計算できます。フォームの入力欄が親要素からはみ出しにくくなるため、実務でもよく使われます。
フォームでよく使うタグ
フォームを作るときによく使うタグを整理しておきます。
| タグ | 主な役割 | 補足 |
|---|---|---|
| <form> | フォーム全体を囲む | methodやactionを指定する |
| <input> | 1行入力、選択、送信ボタンなどを作る | typeで種類を切り替える |
| <textarea> | 複数行の文章入力を作る | お問い合わせ内容に向いている |
| <label> | 入力欄の説明を表す | forで入力欄と関連付ける |
| <br> | 改行を入れる | 現在はCSSで余白を整えることが多い |
| <b> | 文字を太字にする | 見た目の強調に使える |
フォームのレイアウトでは、改行用にbrを多用するよりも、divやCSSのmarginで余白を整えるほうが管理しやすくなります。また、文字を強調したい場合はbも使えますが、意味を持たせて強調したい場合はstrongを使うこともあります。
フォームで重要な属性
フォームでは、タグだけでなく属性の理解も大切です。特にmethod、action、name、value、placeholder、for、checkedはよく使います。
| 属性 | 主な役割 | 使用例 |
|---|---|---|
| method | データの送信方法を指定する | method="GET" |
| action | データの送信先を指定する | action="contact-result.html" |
| type | inputの種類を指定する | type="text" |
| name | 送信時のデータ名を指定する | name="visitor-name" |
| value | 送信される値やボタンの表示文字を指定する | value="送信する" |
| placeholder | 入力前に表示する案内文を指定する | placeholder="例：田中美咲" |
| for | labelと入力欄を関連付ける | for="visitor-name" |
| checked | ラジオボタンやチェックボックスを初期選択にする | checked |
| id | labelのforと対応させる | id="visitor-name" |
特にname属性は重要です。フォームの送信時には、name属性の値をデータ名として送ります。nameがない入力欄は、送信データとして扱われない場合があります。
図3：name属性によって入力内容が送信データになる
この図から分かること
フォームの入力内容は、送信時にname属性と入力値の組み合わせとして扱われます。たとえば、nameがvisitor-nameの入力欄に田中美咲と入力すると、visitor-name=田中美咲のようなデータになります。フォームでは、各入力欄に適切なname属性を付けることが大切です。
GETとPOSTの違い
フォームの送信方法には、主にGETとPOSTがあります。どちらもフォームのデータを送るために使いますが、送信のされ方が異なります。
| 送信方法 | 特徴 | 主な用途 |
|---|---|---|
| GET | 入力データがURLの末尾に付いて送信される | 検索、絞り込み、共有しやすい条件指定 |
| POST | 入力データがリクエスト本文に含まれる | お問い合わせ、登録、ログイン、長文送信 |
GETの場合、送信された内容がURLに含まれます。たとえば、次のような形です。
contact-result.html?visitor-name=田中美咲&reply-method=メール&inquiry=資料請求についてURLに入力内容が見えるため、検索フォームのように条件を共有したい場合には便利です。一方で、個人情報や長い文章を送るフォームには向いていないことがあります。
POSTの場合、入力内容はURLには直接表示されません。そのため、お問い合わせフォームや登録フォームではPOSTがよく使われます。ただし、POSTにすれば安全というわけではありません。個人情報を扱うフォームでは、HTTPSを使って通信を保護することも大切です。
GETを使う場面
GETは、検索フォームや絞り込み条件の送信に向いています。URLに条件が含まれるため、検索結果ページをブックマークしたり、他の人に共有したりしやすくなります。
| GETに向いている例 | 理由 |
|---|---|
| サイト内検索 | 検索キーワードをURLで共有しやすい |
| 商品の絞り込み | 条件付きURLを再利用しやすい |
| ページ番号の指定 | どのページかURLで分かりやすい |
ただし、GETではURLにデータが表示されます。名前、電話番号、住所、問い合わせ内容のような個人情報を送る場合は、POSTを使うほうが一般的です。
POSTを使う場面
POSTは、入力内容をURLに表示したくない場合や、長い文章を送る場合に向いています。お問い合わせフォーム、会員登録、ログイン、アンケートの自由記述欄などでよく使われます。
| POSTに向いている例 | 理由 |
|---|---|
| お問い合わせフォーム | 個人情報や長文を扱うことがある |
| 会員登録フォーム | 名前、メールアドレス、パスワードなどを扱う |
| ログインフォーム | 認証情報を扱う |
| アンケート回答 | 長い文章や複数項目を送ることがある |
フォームの学習ではGETのほうがURLで結果を確認しやすいため、サンプルではGETを使うことがあります。ただし、実際のお問い合わせフォームではPOSTを使うことが多いです。
name属性が重要な理由
フォームの入力欄には、name属性を付けることがとても大切です。送信時には、入力欄のname属性がデータの名前になり、入力された値とセットで送られます。
たとえば、次の入力欄があるとします。
<input type="text" name="visitor-name">ここに田中美咲と入力して送信すると、データとしては次のような形で扱われます。
visitor-name=田中美咲ラジオボタンの場合も同じです。
<input type="radio" name="reply-method" value="メール" checked>
<input type="radio" name="reply-method" value="電話">この場合、選択されたラジオボタンのvalueが、reply-methodという名前で送信されます。メールが選ばれていれば、reply-method=メールのようになります。
name属性がないと、サーバー側で「どの入力欄のデータなのか」を判別しにくくなります。フォームを作るときは、input、textarea、selectなどの入力要素にname属性を付けることを意識しましょう。
placeholderとvalueの違い
フォームでは、placeholderとvalueもよく使います。どちらも入力欄やボタンに文字を表示するために使われますが、役割が違います。
| 属性 | 役割 |
|---|---|
| placeholder | 未入力時に表示される案内テキスト |
| value | 初期値や送信される値、ボタンの表示文字 |
placeholderは、入力の例やヒントを表示します。ユーザーが入力を始めると消えます。
<input type="text" name="visitor-name" placeholder="例：田中美咲">valueは、inputの値そのものです。submitボタンでは、ボタンに表示される文字として使われます。
<input type="submit" value="送信する">ラジオボタンでは、選択されたときに送信される値としてvalueを使います。
<input type="radio" name="reply-method" value="メール">placeholderは案内、valueは実際の値と考えると分かりやすいです。
checkedで初期選択を指定する
ラジオボタンやチェックボックスでは、checked属性を使うと、最初から選択された状態にできます。
<input type="radio" name="reply-method" value="メール" checked>お問い合わせフォームでは、よく選ばれる項目を初期選択にしておくと、ユーザーの操作を少し減らせます。ただし、重要な選択項目では、勝手に選択済みにすることで誤送信が起きる場合もあります。内容に応じて使い方を考えることが大切です。
フォームを作るときの確認ポイント
お問い合わせフォームを作成するときは、次の点を確認すると、使いやすく送信しやすいフォームになります。
| 確認すること | チェック内容 |
|---|---|
| formで囲まれているか | 入力欄全体が1つのフォームとしてまとまっているか |
| methodが指定されているか | GETまたはPOSTが設定されているか |
| actionが指定されているか | 送信先が設定されているか |
| name属性があるか | 各入力欄のデータ名が指定されているか |
| labelがあるか | 入力欄の意味が分かりやすいか |
| placeholderが適切か | 入力例や案内が分かりやすいか |
| 送信ボタンがあるか | フォームを送信できるか |
| 見た目が整っているか | 入力欄の幅、余白、文字サイズが使いやすいか |
特に、name属性とlabelは忘れやすいポイントです。見た目だけ整っていても、name属性がないと送信データとして扱いにくくなります。また、labelがないと、ユーザーが何を入力すればよいか分かりにくくなります。
実際のWebサイトでフォームを使うときの注意点
HTMLだけでフォームの見た目は作れますが、実際にお問い合わせ内容をメールで送ったり、データベースに保存したりするには、サーバー側の処理が必要です。
今回のサンプルでは、actionにcontact-result.htmlを指定しています。これは送信先の例です。実際のWebサイトでは、PHP、Python、JavaScriptのバックエンド、フォーム送信サービスなどを使って、送信内容を処理することがあります。
また、個人情報を扱う場合は、セキュリティにも注意が必要です。POSTを使うだけで安全になるわけではないため、HTTPSで通信を保護し、入力内容の検証や迷惑送信対策も考える必要があります。
| 注意点 | 内容 |
|---|---|
| サーバー処理 | 送信内容を受け取る仕組みが必要 |
| HTTPS | 個人情報を扱う場合は通信の保護が重要 |
| 入力チェック | 未入力や形式違いを確認する |
| 迷惑送信対策 | スパム対策や確認画面を検討する |
| プライバシー | 取得する情報と利用目的を明確にする |
学習段階では、まずHTMLでフォームの構造を作り、GETで送信結果のURLを確認すると理解しやすいです。その後、POSTやサーバー側処理へ進むと、フォーム全体の仕組みがより分かりやすくなります。
お問い合わせフォーム作成で大切な考え方
お問い合わせフォームは、ユーザーとWebサイトをつなぐ大切な入口です。フォームが分かりにくいと、ユーザーは入力を途中でやめてしまうかもしれません。反対に、入力欄の意味が分かりやすく、余白や文字サイズが整っているフォームは、安心して入力しやすくなります。
formで全体を囲み、inputやtextareaで入力欄を作り、labelで項目名を示します。methodとactionで送信方法と送信先を指定し、各入力欄にはname属性を付けます。これらを正しく組み合わせることで、フォームとして意味のあるHTMLになります。
まずはシンプルなお問い合わせフォームを作り、入力して送信してみるところから始めると理解しやすいです。GETで送信した場合は、URLにnameと入力値がどのように表示されるか確認できます。フォームの構造、入力欄、送信データの関係をつかむことで、より実用的なフォーム作成につなげられます。