【HTML入門】お問い合わせフォームの書き方

2019.12.24
2022.05.04
HTML

HTMLを使って、お問い合わせフォームを作りたい！
どう書いたらいいの？

こう言った疑問に答えていきます。
お問い合わせフォームは、Webサイトにおいて今は必須とも言えるでしょう。
本記事では、お問い合わせフォームの書き方について、わかりやすく解説していきます。

今回解説していく内容は以下の5つです。

基本的な書き方
label
ドロップダウン
チェックボックス
ラジオボックス

この記事を読めば、「お問い合わせフォームの書き方」について理解できるようになります。

では早速やっていきましょう！

1. お問い合わせフォームの書き方
2. まとめ

お問い合わせフォームの書き方

基本的な書き方

まずは基本的な書き方から見ていきます。
基本的な書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head> 
<body>

<input type="text"> //一行テキスト
<input type="password"> //伏せ字（パスワード入力）
<textarea></textarea>　//複数行のテキスト
<input type="text" value="Hello"> //初期値
<input type="text" placeholder="Hello"> //入力例を指定

</body>
</html>

ブラウザで確認すると、このようになります。

これらを組み合わせることでお問い合わせフォームを作成することができます。

label

labelとは、項目名とボックスを紐ずけるためのタグです。
例えば、下のようなフォームを作りたいときに、labelを使います。

書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head> 
<body>

<label for="name">名前</label>
<input type="text" id="name">

</body>
</html>

<label>タグの中に「項目名」を入力します。
次に、項目名と紐ずけるための「ボックス」を、先ほどの<input type=”text”>で作成します。
そして項目名とボックスを紐ずけるために、<label>タグに「for=”名前”」、<input type=”text”>に「id=”名前”」を入力してあげます。「for」と「id」の値は必ず同じ名前にします。
そうすることで、「この項目のボックスはこれだよ」と紐ずけることができます。

今は<label>タグを使ったフォームの書き方が一般的なので、覚えましょう！

ドロップダウン

フォームでよく見るドロップダウンリストも、作成することが可能です。
書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head> 
<body>

<label for="form">項目名</label>
<select id="form">
    <option>値１</option>
    <option>値２</option>
    <option>値３</option>
    <option>値４</option>
</select>

</body>
</html>

ドロップダウンリストを作成するときは<select>タグを使います。
<select>タグの中に<option>タグでドロップダウンリストの値を書いていきます。
こちらも先ほど同様に、項目名とドロップダウンを紐ずけるために「for」と「id」で紐ずけます。

ブラウザで確認するとこんな感じです。

よく性別を選ぶ項目で活用されていることが多いので、覚えておくと便利でしょう。

チェックボックス

チェックボックスを作成することも可能で、チェックボックスは、複数選択が可能な場合に使用します。書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head> 
<body>

<label>はい <input type="checkbox"></label>
<label>いいえ <input type="checkbox"></label>

</body>
</html>

書き方は簡単で、<input type>を「checkbox」にしてあげるだけです。
そして先ほどの<label>タグで囲んであげて、項目名を書いてあげればOKです。

ブラウザで確認するとこんな感じです。

また、チェックボックスをグループ化、グループのタイトルをつけることができます。
書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head> 
<body>

<fieldset>
    <legend>質問</legend>
    <label>はい <input type="checkbox"></label>
    <label>いいえ <input type="checkbox"></label>
</fieldset>

</body>
</html>

グループ化させるときは<fieldset>タグで囲み、グループのタイトルを<legend>タグで囲むだけで簡単に作成できます。

ラジオボックス

ラジオボックスは、チェックボックスとは違い複数選択することはできず、どれか１つを選択する場合はに使用します。
書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head> 
<body>

    <label>はい <input type="radio" name="値"></label>
    <label>いいえ <input type="radio" name="値"></label>

</body>
</html>

こちらも簡単で、<input type=”radio”>とするだけで、ラジオボックスを作成することができます。
チェックボックスと少し違う点は「name」をつけてあげることです。ラジオボックス同士が、同じ項目に対する選択肢であることを示すために、「name」で値を入力します。このとき値は同じ値を入力します。「name」をつけ忘れると、複数選択可能になるので注意しましょう。

ではブラウザで確認してみます。

内容によって「チェックボックス」「ラジオボックス」を使い分けるといいかと思います。

まとめ

お問い合わせフォームは、Webサイトなどの作成時には必ずと言ってもいいほど、必要なものです。
この機会に是非、お問い合わせフォームの書き方を覚えましょう。

では本日は以上になります。

オススメの教材

前の記事
【PHP入門】HTMLへ埋め込んで見よう 2019.12.22
次の記事
【PHP入門】お問い合わせフォームの内容を取得する方法 2019.12.27