formタグを使ったお問い合わせフォーム作成【HTMLの書き方入門】

最後にお問い合わせのぺージ(form.html)を作ります。

form.htmlを新規作成
フォームを作成する

ラジオボタンを作る
テキストエリアを作る
送信ボタンを作る
フォーム補足～プルダウンメニュー～

3つのページをリンクでつなぐ

form.htmlを新規作成

お問い合わせページも、ヘッダーやフッターは他のページと同じです。
前回のcompany.htmlと同様に、他のファイルからコピーして作りましょう。

<head>内のtitleとdescriptionを変更。
</header>タグの下にある画像も変えます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>お問い合わせ｜エドべース株式会社</title>
  <meta name="description" content="エドべース株式会社へのお問い合わせフォームです。">
</head>

<body>
  <header>
    <h1>エドベース株式会社</h1>
    <nav>
      <ul>
        <li>ホーム</li>
        <li>会社概要</li>
        <li>お問い合わせ</li>
      </ul>
    </nav>
  </header>

 <img src="images/form.png" alt="エドベース株式会社-お問い合わせページトップ画像">

  <main>
    ~ 以下略 ~

お問い合わせページは<main>タグの中に、問い合わせを行えるようにフォームがありますね。

また、<aside>で囲ったバナー部分がありません。
<aside> ~ </aside>までは削除しておきましょう。

フォームを作成する

HTMLだけで実際に動く（入力内容を送信する）フォームは作れません。
コーディングではフォームの外観を作る形になります。

フォームを作るためには<form>タグを使います。
更に、その中にパーツを作っていくことで、一つのフォームが出来上がります。

まずは、お名前の入力箇所だけを作ってみましょう。

<form>
    名前：<input type="text" name="name">
</form>

それぞれのタグ・属性の意味は下記のとおりです。

<input>タグはtypeの値を変えることで、様々なパーツを作成できます。
よく使うものを紹介します。

input typeの値	表示されるパーツ
text	1行タイプのテキストボックス
password	入力内容が見えないテキストボックス
radio	ラジオボタン
checkbox	チェックボックス
submit	フォームの実行・送信ボタン
reset	入力した内容をリセットするボタン

ラジオボタンを作る

お名前の下にある性別では、選択肢の中から１つを選んでもらいます。
この選択肢の表示はラジオボタンと言います。

ラジオボタンを作るときには、ユーザーが選べる選択肢を作る必要があります。

valueという新しい属性が出てきました。
valueは、そのパーツで何が選択されたを伝えるための属性です。
設定しておくことで、ユーザーがこのフォールの情報を送信したときに「seibetuのパートでは、manが選択されていましたよ」と教えてくれるのです。

<form>
名前 : <input type="text" name="name"><br>
性別 : <input type="radio" name="seibetu" value="man">男 <input type="radio" name="seibetu" value="woman">女 <br>
</form>

ちなみに、チェックボックスもほぼ同じ仕組みで作ることができます。「type=radio」を「type=checkbox」にするだけです。

【例】

ラジオボタンと異なり、チェックボックスは複数チェックを入れられます。

テキストエリアを作る

次は、お問い合わせしたいことを詳しく書いてもらう「内容」です。

名前の入力欄に似ていますが、１行よりも高さがあり、右下にマークのようなものがありますね。ここは<input>ではなく、<textarea>というタグを使って作ります。

<textarea>は複数行分の表示が可能。
かつ、ユーザーが見やすいようにサイズを変えることも可能です。

<textarea>タグは<input>タグとは異なり、終了タグが必要です。
今までのフォームパーツと同じくname属性を使って、どのパーツの入力内容か分かるようにします。

内容 : <textarea name="inq"></textarea>

送信ボタンを作る

送信ボタンは<input>タグでtype=submitにすると、作ることができます。

<form>
    名前 : <input type="text" name="name"><br>
    性別 : <input type="radio" name="seibetu" value="man">男 <input type="radio" name="seibetu" value="woman">女 <br>
    内容 : <textarea name="inq"></textarea><br>
    <input type="submit">
</form>

ここまででフォーム部分は完成です！

フォーム補足～プルダウンメニュー～

今回のサイトにはありませんが、プルダウンメニューが使われているフォームもよく見かけますよね。

プルダウンメニューは下記のように書くと、作成することができます。

<select name="about">
    <option value="edschool">オンラインスクール作成に関して</option>
    <option value="qbase">オンラインテスト作成に関して</option>
    <option value="others">その他</option>
</select>

<input> <select> <textarea>
フォームのパーツはほぼ、この３つのタグのどれかで作ることができますよ。

3つのページをリンクでつなぐ

ページを行き来できるように、ヘッダーにリンクを設定しましょう。

<header>
    <h1>エドベース株式会社</h1>
    <nav>
        <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="company.html">会社概要</a></li>
            <li><a href="form.html">お問い合わせ</a></li>
        </ul>
    </nav>   
</header>