HTMLで入力フォーム作成してデータ送信【会員登録フォーム実装１】

2022年11月14日2023年7月9日プログラム基礎HTML,PHP,プログラムサンプル

Webシステムでよくある「会員登録フォーム」のような入力フォームを作成する方法を解説します。

今回のサンプルを理解することで会員登録フォームのHTMLを作成できるようになります。

次のステップでは、POST送信された入力値をPHPでチェックする処理にチャレンジしてみてください。
関連記事：HTMLで入力フォーム作成してデータ送信【会員登録フォーム実装２】

Contents

1. HTMLで入力フォームのデータをPOST送信するサンプルコードを解説
2. まとめ
- 2.1. ChatGPTでHTMLを作成（おまけ）

HTMLで入力フォームのデータをPOST送信するサンプルコードを解説

HTMLで入力フォームのデータをPOST送信するサンプルコードの解説を行います。

サンプルコード

入力フォームのHTMLです。

<html>
    <head>
        <title>入力フォームデータをサーバへ送信サンプル</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>入力フォームデータをサーバへ送信サンプル</h1>
        <form method="post" action="/sample.php" enctype="multipart/form-data">

            <div>
                <label for="name">名前：</label>
                <input type="text" id="name" name="name">
            </div>
            <div>
                <label for="mail">メールアドレス：</label>
                <input type="email" id="mail" name="mail">
            </div>
            <div>
                <label for="password">パスワード：</label>
                <input type="password" id="password" name="password">
            </div>
            <div>
                <label for="man"  ><input type="radio" id="man"   name="sex" value="man"  >男</label>
                <label for="woman"><input type="radio" id="woman" name="sex" value="woman">女</label>
            </div>
            <div>
                <span>興味があるのはどれですか？</span>
                <label for="html"><input type="checkbox" id="html" name="questions[]" value="html">HTML</label>
                <label for="css" ><input type="checkbox" id="css"  name="questions[]" value="css" >CSS</label>
                <label for="php" ><input type="checkbox" id="php"  name="questions[]" value="php" >PHP</label>
            </div>
            <div>
                <label for="birth">誕生月：</label>
                <select id="birth" name="birth">
                    <option value="1" > 1月</option>
                    <option value="2" > 2月</option>
                    <option value="3" > 3月</option>
                    <option value="4" > 4月</option>
                    <option value="5" > 5月</option>
                    <option value="6" > 6月</option>
                    <option value="7" > 7月</option>
                    <option value="8" > 8月</option>
                    <option value="9" > 9月</option>
                    <option value="10">10月</option>
                    <option value="11">11月</option>
                    <option value="12">12月</option>
                </select>
            </div>
            <div>
                <label for="image">画像：</label>
                <input type="file" id="image" name="image">
            </div>
            <div>
                <button type="submit">データを送信する</button>
            </div>
        </form>
    </body>
</html>

POST送信でデータ送信される受け口となるPHPスクリプトのサンプルコードです。

<?php
print_r($_POST);
print_r($_FILES);
?>

HTMLの解説

入力フォームのHTMLのサンプルコード解説です。

文字コードをUTF-8で指定

HTMLの文字コードをUTF-8で指定します。これで文字化けが起こらないようにします。

<meta charset="utf-8">

formタグを作成

formタグを作成してメールアドレスなどの入力フォームをすべて囲みます。

<form method="post" action="/sample/html/form.php" enctype="multipart/form-data">
・・・
</form>

method(メソッド)

メソッドには、データを送信する方法を指定します。基本的には method="post" や method="get" と指定します。

POSTとGETの違い

GET：URL部分へ入力データがセットされてサーバへデータが送信される
POST：URL部分に入力データがセットされないでサーバへデータが送信される

会員登録など重要なデータをサーバへ送信する場合はPOSTを利用します。GETは表や一覧の検索や並び替えなどを行う際に利用します。

action(アクション)

アクションには、入力データを送信する先を記述します。通常はサーバへ用意してあるスクリプトファイルを指定します。

enctype

enctypeには、入力データを送信する際のデータ形式を記述します。

今回のサンプルでは画像ファイルをサーバへ送信するので enctype="multipart/form-data" と記述しています。

text入力フォームを作成

<input type="text">タグで名前の入力フォームを作成します。

<div>
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">
</div>

labelタグについて

labelタグで for="フォームタグのID名" を指定すると、画面に表示されたラベルをクリックすると for に指定した入力フォームにフォーカスが移ります。
(日本語で説明すると難しいですが…)

email入力フォームを作成

<input type="email">タグでメールアドレスの入力フォームを作成します。

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

<input type="email">タグではメールアドレス形式に正しく入力されているかPOST送信する前に検証されます。

password入力フォームを作成

<input type="password">タグでパスワードの入力フォームを作成します。

<div>
    <label for="password">パスワード：</label>
    <input type="password" id="password" name="password">
</div>

<input type="password">タグは特殊で入力フォームへ値を入力すると ***** のように入力内容が隠れるようになります。

type="password"を使うと覗き見防止されます。

radio選択フォームを作成

<input type="radio">タグで性別の選択フォームを作成します。

<div>
    <label for="man"  ><input type="radio" id="man"   name="sex" value="man"  >男</label>
    <label for="woman"><input type="radio" id="woman" name="sex" value="woman">女</label>
</div>

<input type="radio">は、１つしか選択できない選択フォームです。注意としてはnameの値は同じにする必要があります。

checkbox選択フォームを作成

<input type="checkbox">タグで設問の選択フォームを作成します。

<div>
    <span>興味があるのはどれですか？</span>
    <label for="html"><input type="checkbox" id="html" name="questions[]" value="html">HTML</label>
    <label for="css" ><input type="checkbox" id="css"  name="questions[]" value="css" >CSS</label>
    <label for="php" ><input type="checkbox" id="php"  name="questions[]" value="php" >PHP</label>
</div>

<input type="checkbox">は、複数選択できる選択フォームです。注意としてはnameの値は同じにする必要があります。今回のサンプルだと name="questions[]" としています。

select選択フォームを作成

<select>タグで誕生日の選択フォームを作成します。

<div>
    <label for="birth">誕生月：</label>
    <select id="birth" name="birth">
        <option value="1" > 1月</option>
        <option value="2" > 2月</option>
        ・・・
        <option value="11">11月</option>
        <option value="12">12月</option>
    </select>
</div>

optionタグ

selectタグの値はoptionタグで作成します。ここでは生年月を選択するため1月から12月を作成しています。

PHPなどのスクリプトで扱いやすいために value="1月" ではなく value="1″ とします。

file入力フォームを作成

<input type="file">タグで画像をアップロードするフォームを作成します。

<div>
    <label for="image">画像：</label>
    <input type="file" id="image" name="image">
</div>

<input type="file">を使用する場合は、<form enctype="multipart/form-data">とする必要があります。

submitボタンを作成

<button type="submit">タグでデータ送信ボタンを作成します。

<div>
    <button type="submit">データを送信する</button>
</div>

通常は<input type="submit">で行いますが、ボタンの文字を「データを送信する」としたかったので今回はbuttonタグを利用しました。

PHPの解説

PHPのサンプルコード解説です。

POST送信されたデータと画像データをデバッグ表示

POST送信されたデータが格納されている配列 $_POST と画像データが格納されている配列 $_FILES を print_r() でデバッグ表示しています。

<?php
print_r($_POST);
print_r($_FILES);
?>

まとめ

今回は会員登録フォームのHTML作成とPOST送信するためのform作成について解説しました。

会員登録フォームのHTML作成やPOST送信form作成は、システム開発で頻繁に実装します。

HTMLで入力フォーム作成してデータ送信【会員登録フォーム実装２】

会員登録フォームに入力された値をPHPでチェックするサンプルを解説します。

https://uteee.com/system/program-basic/9940/

ChatGPTでHTMLを作成（おまけ）

おまけパートとして、2023年に人気なChatGPTを使ってHTMLを作成してもらいました。

ChatGPTに作成してもらったHTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>会員登録</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }
    
    h2 {
      color: #333;
    }
    
    form {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 10px;
      font-size: 14px;
    }
    
    input[type="radio"],
    input[type="checkbox"] {
      margin-right: 5px;
    }
    
    input[type="submit"] {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    
    input[type="submit"]:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h2>会員登録</h2>
  <form action="登録処理のURL" method="POST" enctype="multipart/form-data">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password" required>
    
    <label>性別:</label>
    <br>
    <input type="radio" id="gender_male" name="gender" value="男性" required>
    <label for="gender_male">男性</label>
    
    <input type="radio" id="gender_female" name="gender" value="女性" required>
    <label for="gender_female">女性</label>
    
    <input type="radio" id="gender_other" name="gender" value="その他" required>
    <label for="gender_other">その他</label>
    
    <label for="birth_month">誕生月:</label>
    <select id="birth_month" name="birth_month" required>
      <option value="">選択してください</option>
      <option value="1">1月</option>
      <option value="2">2月</option>
      <option value="3">3月</option>
      <!-- 他の月のオプションを追加 -->
      <option value="12">12月</option>
    </select>
    
    <label>興味のある項目:</label>
    <br>
    <input type="checkbox" id="interest_html" name="interest" value="HTML">
    <label for="interest_html">HTML</label>
    
    <input type="checkbox" id="interest_css" name="interest" value="CSS">
    <label for="interest_css">CSS</label>
    
    <input type="checkbox" id="interest_js" name="interest" value="JavaScript">
    <label for="interest_js">JavaScript</label>
    
    <label for="image">画像:</label>
    <input type="file" id="image" name="image" accept="image/*" required>
    
    <input type="submit" value="登録">
  </form>
</body>
</html>

ChatGPTにお願いしたプロンプト

とりあえず会員登録画面のHTMLを作ってもらいます。

会員登録画面のHTMLを教えてください。以下のフォームでお願いします。
・名前
・メールアドレス
・パスワード
・性別
・誕生月
・画像

HTMLをザーッと作成してくれます。性別がチェックボックスだったのでラジオボタンで作り直してもらいます。

性別はラジオボタンでお願いします。

興味ある項目をお願いしていなかったのでチェックボックスで追加してもらいます。

興味のある項目をチェックボックスで追加してください。項目は以下でお願いします。
・HTML
・CSS
・JavaScript

最後にCSSでスタイル調整をしてもらいます。

スタイルもいい感じにしてください。

2022年11月14日2023年7月9日プログラム基礎HTML,PHP,プログラムサンプル

Posted by ユート