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

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

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

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

ユート

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

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

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

HTMLで入力フォームのデータをPOST送信するサンプルコードを解説
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">

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

password入力フォームを作成

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

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

<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">

<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">

<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作成は、システム開発で頻繁に実装します。

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

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

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

Posted by ユート