概要

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

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

完成イメージ

ブラウザでの表示例

RERUN

問題

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

HTMLの全体構造

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

    • <html>要素
    • <head>要素
    • <body>要素
    • <title>要素
    • 文字列「お問い合わせフォーム | 架空の株式会社ダミー」

テキスト関連の要素

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

  1. 架空の株式会社ダミー
    お問い合わせフォーム
    株式会社ダミーに関するお問い合わせは、プライバシーポリシーをご一読の上、下記の入力フォームから送信して下さい。
    
    入力確認画面へ
    © 2016 株式会社ダミー All Rights Reserved.
    • 文字列「架空の株式会社ダミー」
    • 文字列「株式会社ダミーに関する」 〜 「下記の入力フォームから送信して下さい。」
    • 文字列「入力確認画面へ」
    • 文字列「© 2016 株式会社ダミー All Rights Reserved.」
    • リンク先: 「privacy」フォルダ内の「index.html」

画像関連の要素

画像を配置しましょう。

    • 画像ファイル: 「images」フォルダ内の「logo-dummy.png」
    • 代替えテキスト: 架空の株式会社ダミー
    • 画像の幅: 240 px
    • 画像の高さ: 80 px

表(テーブル)関連の要素

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

    • テーブルの境界線: 表示(レイアウト目的の表ではないことを明示)
    • 行: 3行
    • 列: 2列 (1列目は全て見出しセル)

フォーム関連の要素

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

    • フォームの送信先: 自身のファイル
    • フォームの送信方法: "post"
    • テキストフィールドの名前: "your_name"
    • id名: "your_name"
    • テキストフィールドの名前: "your_email"
    • id名: "your_email"
    • テキストエリアの名前: "inquiry"
    • id名: "inquiry"
    • 1行あたりの表示文字数: 半角60文字
    • 表示する行数: 10行
    • ボタンに表示する文字: "入力確認画面へ"
    • 文字列「お名前」
    • 文字列「メールアドレス」
    • 文字列「お問い合わせ内容」

解答

解答