【練習問題2】ムカミのお願い | HTML 入門 | レッスン

概要

ムカミから「今、ボブのお父さんの会社のお問い合わせフォームを作っている。そこで君に、HTMLで入力フォームを作って欲しい」と頼まれた。Chapter17までで学習した要素を使って、「入力フォーム」を作ってみましょう。

クリア条件: 完成イメージを参考に適切な要素がマークアップされていること
目標タイム: 20分
使用ファイル: 「Chapter18」フォルダ内の「index.html」

完成イメージ

ブラウザでの表示例

RERUN

新しいウインドウで表示する

問題

解けた問題は問題文の横のチェックボックスをオンにしましょう。

HTMLの全体構造

HTMLに必要な基本的な要素を記述しましょう。

HTML5のDOCTYPE宣言を適切な箇所に記述してください
以下の全体構造の要素を適切な箇所に記述してください
- <html>要素
- <head>要素
- <body>要素
- <title>要素
以下の文字列を<title>要素内に記述してください
- 文字列「お問い合わせフォーム | 架空の株式会社ダミー」
<meta>要素のcharset属性を用いて文字コードを「UTF-8」に設定してください

テキスト関連の要素

下記の文章を配置し、見出しや段落などのテキスト関連の要素を記述しましょう。

<body>要素内に以下の文字列を貼り付けてください

架空の株式会社ダミー
お問い合わせフォーム
株式会社ダミーに関するお問い合わせは、プライバシーポリシーをご一読の上、下記の入力フォームから送信して下さい。

入力確認画面へ
© 2016 株式会社ダミー All Rights Reserved.

特別な記述が必要な文字列「©」を適切な記述に変更してください
文字列「お問い合わせフォーム」を適切な見出しにしてください
以下の文字列を段落にしてください
- 文字列「架空の株式会社ダミー」
- 文字列「株式会社ダミーに関する」〜「下記の入力フォームから送信して下さい。」
- 文字列「入力確認画面へ」
- 文字列「© 2016 株式会社ダミー All Rights Reserved.」
文字列「プライバシーポリシー」にリンクを設定してください
- リンク先：「privacy」フォルダ内の「index.html」

画像関連の要素

画像を配置しましょう。

文字列「架空の株式会社ダミー」を画像に置き換えてください
- 画像ファイル：「images」フォルダ内の「logo-dummy.png」
- 代替えテキスト：架空の株式会社ダミー
- 画像の幅： 240 px
- 画像の高さ： 80 px

表（テーブル）関連の要素

完成イメージを参考にテーブルを配置しましょう

完成イメージを参考に以下のテーブルを配置してください
- テーブルの境界線：表示（レイアウト目的の表ではないことを明示）
- 行： 3行
- 列： 2列（1列目は全て見出しセル）

フォーム関連の要素

完成イメージを参考にフォームを配置しましょう

完成イメージを参考に<form>要素を配置してください
- フォームの送信先：自身のファイル
- フォームの送信方法： "post"
見出しセル「お名前」の内容セルに1行分のテキストフィールドを配置してください
- テキストフィールドの名前： "your_name"
- id名： "your_name"
見出しセル「メールアドレス」の内容セルに1行分のテキストフィールドを配置してください
- テキストフィールドの名前： "your_email"
- id名： "your_email"
見出しセル「お問い合わせ内容」の内容セルに複数行のテキストエリアを配置してください
- テキストエリアの名前： "inquiry"
- id名： "inquiry"
- 1行あたりの表示文字数：半角60文字
- 表示する行数： 10行
文字列「入力確認画面へ」を送信ボタンにしてください
- ボタンに表示する文字： "入力確認画面へ"
以下のラベルとそのコントロール部品とを関連付けてください
- 文字列「お名前」
- 文字列「メールアドレス」
- 文字列「お問い合わせ内容」

解答

解答

Chapter18/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム | 架空の株式会社ダミー</title>
</head>
<body>
  <p><img src="images/logo-dummy.png" width="240" height="80" alt="架空の株式会社ダミー"></p>
  <h1>お問い合わせフォーム</h1>
  <p>株式会社ダミーに関するお問い合わせは、<a href="privacy/index.html">プライバシーポリシー</a>をご一読の上、下記の入力フォームから送信して下さい。</p>

  <form action="" method="post">
    <table border="1">
      <tr>
        <th><label for="your_name">お名前</label></th>
        <td>
          <input type="text" id="your_name" name="your_name">
        </td>
      </tr>
      <tr>
        <th><label for="your_email">メールアドレス</label></th>
        <td>
          <input type="text" id="your_email" name="your_email">
        </td>
      </tr>
      <tr>
        <th><label for="inquiry">お問い合わせ内容</label></th>
        <td>
          <textarea id="inquiry" name="inquiry" rows="10" cols="60"></textarea>
        </td>
      </tr>
    </table>
    <input type="submit" value="入力確認画面へ">
  </form>

  <p>&copy; 2016 株式会社ダミー All Rights Reserved.</p>
</body>
</html>

受講済にする