Google Bird ”HTML、CSS、PHP”

しみまねスタジオ ※Web開発

こんにちは。今日は html, CSS, PHP, JAVASCRIPT について質問があります。 あなたはWeb講習の講師を長年勤めてきたベテラン講師さんです。 HTML , CSS, PHP を使用して以下の入力を促し入力結果を ブラウザー画面 width:50%; height:50%;overflow: auto; に箇条書き形式で表示するコードを作成してください。 1.氏名 2.年齢 3.住所 4.連絡先:E-mail 5.最終学歴（プルダウンの選択形式） 6.職業（プルダウンの選択形式） 7.趣味（プルダウンの選択形式） 加えて作成したコードについて質問者はHTML、CSSの基本学習を終えた初心者である前提で1行ずつ解説をお願いします。 よろしくお願いいたします。


はい、かしこまりました。以下に、HTML、CSS、PHPを使用して入力を促し、入力結果をブラウザー画面に箇条書き形式で表示するコードを作成しました。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>入力フォーム</title>
  <style>
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    form {
      width: 50%;
      height: 50%;
      margin: 0 auto;
      overflow: auto;
    }

    input {
      width: 100%;
      height: 20px;
      padding: 5px;
      margin-bottom: 10px;
    }

    select {
      width: 100%;
      height: 20px;
      padding: 5px;
      margin-bottom: 10px;
    }

    .list {
      margin-top: 10px;
    }

    li {
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>入力フォーム</h1>
  <form action="input.php" method="post">
    <p>氏名</p>
    <input type="text" name="name">
    <p>年齢</p>
    <input type="number" name="age">
    <p>住所</p>
    <input type="text" name="address">
    <p>連絡先:E-mail</p>
    <input type="email" name="email">
    <p>最終学歴</p>
    <select name="education">
      <option value="高校卒業">高校卒業</option>
      <option value="短大卒業">短大卒業</option>
      <option value="大学卒業">大学卒業</option>
      <option value="大学院卒業">大学院卒業</option>
    </select>
    <p>職業</p>
    <select name="job">
      <option value="会社員">会社員</option>
      <option value="自営業">自営業</option>
      <option value="専業主婦">専業主婦</option>
      <option value="学生">学生</option>
    </select>
    <p>趣味</p>
    <select name="hobby">
      <option value="読書">読書</option>
      <option value="映画鑑賞">映画鑑賞</option>
      <option value="スポーツ">スポーツ</option>
      <option value="音楽鑑賞">音楽鑑賞</option>
    </select>
    <input type="submit" value="送信">
  </form>

  <?php
  // 入力されたデータを取得する
  $name = $_POST['name'];
  $age = $_POST['age'];
  $address = $_POST['address'];
  $email = $_POST['email'];
  $education = $_POST['education'];
  $job = $_POST['job'];
  $hobby = $_POST['hobby'];

  // 入力結果を表示する
  echo '<ul class="list">';
  echo '<li>氏名:' . $name . '</li>';
  echo '<li>年齢:' . $age . '</li>';
  echo '<li>住所:' . $address . '</li>';
  echo '<li>連絡先:E-mail:' . $email . '</li>';
  echo '<li>最終学歴:' . $education . '</li>';
  echo '<li>職業:' . $job . '</li>';
  echo '<li>趣味:' . $hobby . '</li>';
  echo '</ul>';
  ?>
</body>
</html>

コードは慎重に使用してください。詳細content_copy

1行ずつの解説

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">

コードは慎重に使用してください。詳細content_copysharemore_vert

プロフィール写真

続きをお願いします。

volume_up

かしこまりました。続きは以下の通りです。

HTML

  <title>入力フォーム</title>
  <style>
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    form {
      width: 50%;
      height: 50%;
      margin: 0 auto;
      overflow: auto;
    }

    input {
      width: 100%;
      height: 20px;
      padding: 5px;
      margin-bottom: 10px;
    }

    select {
      width: 100%;
      height: 20px;
      padding: 5px;
      margin-bottom: 10px;
    }

    .list {
      margin-top: 10px;
    }

    li {
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>入力フォーム</h1>
  <form action="input.php" method="post">
    <p>氏名</p>
    <input type="text" name="name">
    <p>年齢</p>
    <input type="number" name="age">
    <p>住所</p>
    <input type="text" name="address">
    <p>連絡先:E-mail</p>
    <input type="email" name="email">
    <p>最終学歴</p>
    <select name="education">
      <option value="高校卒業">高校卒業</option>
      <option value="短大卒業">短大卒業</option>
      <option value="大学卒業">大学卒業</option>
      <option value="大学院卒業">大学院卒業</option>
    </select>
    <p>職業</p>
    <select name="job">
      <option value="会社員">会社員</option>
      <option value="自営業">自営業</option>
      <option value="専業主婦">専業主婦</option>
      <option value="学生">学生</option>
    </select>
    <p>趣味</p>
    <select name="hobby">
      <option value="読書">読書</option>
      <option value="映画鑑賞">映画鑑賞</option>
      <option value="スポーツ">スポーツ</option>
      <option value="音楽鑑賞">音楽鑑賞</option>
    </select>
    <input type="submit" value="送信">
  </form>

  <?php
  // 入力されたデータを取得する
  $name = $_POST['name'];
  $age = $_POST['age'];
  $address = $_POST['address'];
  $email = $_POST['email'];
  $education = $_POST['education'];
  $job = $_POST['job'];
  $hobby = $_POST['hobby'];

  // 入力結果を表示する
  echo '<ul class="list">';
  echo '<li>氏名:' . $name . '</li>';
  echo '<li>年齢:' . $age . '</li>';
  echo '<li>住所:' . $address . '</li>';
  echo '<li>連絡先:E-mail:' . $email . '</li>';
  echo '<li>最終学歴:' . $education . '</li>';
  echo '<li>職業:' . $job . '</li>';
  echo '<li>趣味:' . $hobby . '</li>';
  echo '</ul>';
  ?>
</body>
</html>

コードは慎重に使用してください。詳細content_copy

7行目

HTML

<p>氏名</p>

コードは慎重に使用してください。詳細content_copy

  • 入力フォームの最初の項目である氏名の入力を促すためのラベルを追加しました。

8行目

HTML

<input type="text" name="name">

コードは慎重に使用してください。詳細content_copy

  • 氏名を入力するためのテキストボックスを追加しました。
  • type="text"属性で入力タイプ

sharemore_vert

プロフィール写真

続きをお願いします

volume_up

かしこまりました。続きは以下の通りです。

HTML

<p>年齢</p>
<input type="number" name="age">

コードは慎重に使用してください。詳細content_copy

  • 年齢を入力するためのテキストボックスを追加しました。
  • type="number"属性で入力タイプを「数値」に指定しました。

10行目

HTML

<p>住所</p>
<input type="text" name="address">

コードは慎重に使用してください。詳細content_copy

  • 住所を入力するためのテキストボックスを追加しました。

11行目

HTML

<p>連絡先:E-mail</p>
<input type="email" name="email">

コードは慎重に使用してください。詳細content_copy

  • メールアドレスを入力するためのテキストボックスを追加しました。
  • type="email"属性で入力タイプを「メールアドレス」に指定しました。

12行目

HTML

<p>最終学歴</p>
<select name="education">
  <option value="高校卒業">高校卒業</option>
  <option value="短大卒業">短大卒業</option>
  <option value="大学卒業">大学卒業</option>
  <option value="大学院卒業">大学院卒業</option>
</select>

コードは慎重に使用してください。詳細content_copy

  • 最終学歴をプルダウンで選択するためのセレクトボックスを追加しました。
  • <option>要素で選択肢を指定しました。

13行目

HTML

<p>職業</p>
<select name="job">
  <option value="会社員">会社員</option>
  <option value="自営業">自営業</option>
  <option value="専業主婦">専業主婦</option>
  <option value="学生">学生</option>
</select>

コードは慎重に使用してください。詳細content_copy

  • 職業をプルダウンで選択するためのセレクトボックスを追加しました。
  • <option>要素で選択肢を指定しました。

14行目

HTML

<p>趣味</p>
<select name="hobby">
  <option value="読書">読書</option>
  <option value="映画鑑賞">映画鑑賞</option>
  <option value="スポーツ">スポーツ</option>
  <option value="音楽鑑賞">音楽鑑賞</option>
</select>

コードは慎重に使用してください。詳細content_copy

  • 趣味をプルダウンで選択するためのセレクトボックスを追加しました。
  • <option>要素で選択肢を指定しました。

15行目

HTML

<input type="submit" value="送信">

コードは慎重に使用してください。詳細content_copy

  • 入力フォームの送信ボタンを追加しました。
  • type="submit"属性でボタンのタイプを「送信」に指定しました。

16行目から

  • PHPコードで入力されたデータを取得し、箇条書き形式で表示しています。

16行目

PHP

// 入力されたデータを取得する
$name = $_POST['name'];
$age = $_POST['age'];
$address = $_POST['address'];
$email = $_POST['email'];
$education = $_POST['education'];
$job = $_POST['job'];
$hobby = $_POST['hobby'];

コードは慎重に使用してください。詳細content_copy

  • $_POSTスーパーグローバル変数で入力されたデータを取得しました。

17行目から

  • 取得したデータを箇条書き形式で表示しています。

18行目

HTML

<ul class="list">

コードは慎重に使用してください。詳細content_copy

  • 箇条書きリストの開始タグを追加しました。

19行目

HTML

<li>氏名:' . $name . '</li>

コードは慎重に使用してください。詳細content_copy

  • 氏名を箇条書きの項目として表示しました。

20行目から

  • 同様に、他の入力項目も箇条書きの項目として表示しました。

21行目

HTML

</ul>

コードは慎重に使用してください。詳細content_copy

  • 箇条書きリストの終了タグを追加しました。

解説

以上で、HTML、CSS、PHPを使用して入力を促し、入力結果をブラウザー画面に箇条書き形式で表示するコードの解説は終了です。

初心者の方は、まずはHTMLとCSSの基本をしっかりと理解してから、PHPを学習することをおすすめします。sharemore_vert

プロフィール写真

どうもありがとうございます。これを基礎にして学習していきます。

edit他の回答案を表示

volume_up

かしこまりました。

HTMLとCSSの基本をしっかりと理解することは、Webサイト制作の基礎になります。

PHPを学習する際には、まずはPHPの基本構文と、入力フォームの処理方法を学習することをおすすめします。

また、Webサイト制作に関する書籍やチュートリアルを参考にしながら、実践的な練習を積むことも大切です。

Webサイト制作の学習を頑張ってください。

タイトルとURLをコピーしました