フォームの基本を作ってみよう

作成ファイル・保存場所

作成したhtml-basic の中に html07.html というファイル名で保存してください。

目的

ユーザーが情報を入力できる <form> タグの基本構造を学ぶ。さらに、type="email" や type="tel"、placeholder 属性などを使って実用的なフォーム設計ができるようになる。また、HTMLのコメントアウト  を使用して、コードに説明を入れる方法も習得する。加えて、チェックボックス・ラジオボタン・セレクトメニューの使い方も学ぶ。

指示

以下の条件に従って、お問い合わせフォームを作成してください。

HTMLの基本構造は前回と同様に記述すること
タイトルは「HTML課題07」とすること
<h1> タグで「お問い合わせフォーム」と表示すること
<form> タグの中に、以下の入力項目をすべて含めること（ラベルとコメントも付けること）
<p>要素で囲む
<label>要素を使用する

フォームの入力項目

お名前（テキスト）
メールアドレス（type="email"）
郵便番号（placeholder="例：123-4567"）
住所（テキスト）
電話番号（type="tel", placeholder="例：090-1234-5678"）
件名（複数選択可能なtype=”checkbox”：「ご相談」「資料請求」「その他」）
お問い合わせの種類（ラジオボタン：「個人の方」「法人の方」）
ご希望の連絡方法（セレクトメニュー：「メール」「電話」「どちらでも」）
お問い合わせ内容（<textarea>）
クリアボタン
送信ボタン

チェックポイント

入力フィールドに適切な type や placeholder が設定されているか
<label> と各入力項目が正しく対応しているか
コメントアウト  の書き方が正しく、コード内に説明が入っているか
ネスト・インデント・閉じタグのミスがないか

要素名がわからない場合は、HTML要素一覧を参照してみましょう

HTMLの解答例

type属性の値が大事です。確認しながら入力してみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML課題07</title>
</head>

<body>
    <!-- 今回はアクションやメソッドは割愛 -->
    <h1>お問い合わせフォーム</h1>
    <form>

        <!-- お名前の入力欄 -->
        <p>
            <label for="name">お名前：</label>
            <input type="text" id="name" name="name">
        </p>

        <!-- メールアドレス -->
        <p>
            <label for="email">メールアドレス：</label>
            <input type="email" id="email" name="email">
        </p>

        <!-- 郵便番号 -->
        <p>
            <label for="zipcode">郵便番号：</label>
            <input type="text" id="zipcode" name="zipcode" placeholder="例：123-4567">
        </p>

        <!-- 住所 -->
        <p>
            <label for="address">住所：</label>
            <input type="text" id="address" name="address">
        </p>

        <!-- 電話番号 -->
        <p>
            <label for="tel">電話番号：</label>
            <input type="tel" id="tel" name="tel" placeholder="例：090-1234-5678">
        </p>

        <!-- 件名（チェックボックス） -->
        <p>
            件名：<br>
            <label><input type="checkbox" name="subject" value="相談"> ご相談</label>
            <label><input type="checkbox" name="subject" value="資料請求"> 資料請求</label>
            <label><input type="checkbox" name="subject" value="その他"> その他</label>
        </p>

        <!-- お問い合わせの種類（ラジオボタン） -->
        <p>
            お問い合わせの種類：<br>
            <label><input type="radio" name="type" value="personal"> 個人の方</label>
            <label><input type="radio" name="type" value="company"> 法人の方</label>
        </p>

        <!-- ご希望の連絡方法（セレクト） -->
        <p>
            <label for="contact">ご希望の連絡方法：</label>
            <select id="contact" name="contact">
                <option value="email">メール</option>
                <option value="tel">電話</option>
                <option value="either">どちらでも</option>
            </select>
        </p>

        <!-- お問い合わせ内容 -->
        <!-- 複数行のテキスト入力欄です。
     rows は行数（縦の高さ）、cols は半角文字での横幅を指定します。
     ※ 全角文字は約2文字で半角1文字分の幅として扱われます。 -->
        <p>
            <label for="message">お問い合わせ内容：</label><br>
            <textarea id="message" name="message" rows="6" cols="50"></textarea>
        </p>

        <!-- ボタン -->
        <p>
            <input type="reset" value="クリア">
            <input type="submit" value="送信する">
        </p>

    </form>
</body>

</html>

プレビュー

画面上で右クリックし、Open with Live Serverを起動。（プラグインのLive Serverが必要です)