初心者でも簡単！PHP入力フォーム作成法10選とサンプルコード

はじめに

この記事を読めば、PHPでの入力フォーム作成法を10種類身につけることができます。

一つ一つにサンプルコードが付いているので、それぞれの仕組みを理解しながら自分で試してみることが可能です。

そのまま使える知識だけでなく、自分なりのカスタマイズのヒントも含めてご紹介します。

●PHPとは

PHPは、Webサイト制作によく使用されるサーバーサイドスクリプト言語の一つです。

HTML内に直接記述でき、動的なWebページを作成するのに適しています。

今回は、そんなPHPを利用して、様々な入力フォームを作成する方法を学んでいきましょう。

●入力フォームとは

入力フォームとは、ユーザーから情報を収集するためのツールです。

例えば、お問い合わせフォームやログインフォームなど、Webサイト上で情報を送信する際にはほとんどがこの入力フォームを利用しています。

その機能や見た目は、HTMLタグとJavaScript、そしてPHPなどを組み合わせることで作り出されます。

●PHPでの入力フォームの作成方法10選

それでは、PHPを利用した入力フォームの作成方法を10つ紹介します。

具体的なコードと共に、それぞれの方法を探求していきましょう。

○方法1：基本的なテキスト入力フォームの作成

まずは最も基本的なテキスト入力フォームの作り方から見ていきましょう。

このコードでは、HTMLとPHPを組み合わせて、テキストを入力し、その入力情報を取得する簡単なフォームを作成しています。

<form method="post" action="">
    <input type="text" name="text1">
    <input type="submit" value="送信">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $text = $_POST["text1"];
    echo htmlspecialchars($text, ENT_QUOTES, 'UTF-8');
}
?>

この例では、入力されたテキストは$_POST[“text1”]を通じてPHPに渡されます。

そして、htmlspecialchars関数によって、特殊文字をエスケープし、ブラウザ上で安全に表示するようにしています。

○方法2：パスワード入力フォームの作成

次に、パスワード入力フォームの作り方について学びましょう。

このフォームはログイン画面などに使用され、入力された内容が画面上では伏せ字（＊）で表示されます。

<form method="post" action="">
    <input type="password" name="password1">
    <input type="submit" value="送信">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $password = $_POST["password1"];
    echo htmlspecialchars($password, ENT_QUOTES, 'UTF-8');
}
?>

この例では、inputタグのtype属性を”password”と指定することで、パスワード入力フォームを作成しています。

同様に、入力されたパスワードも$_POSTを通じてPHPに渡されます。

○方法3：チェックボックスの利用

ユーザーに複数の選択肢から選ばせる場合には、チェックボックスを利用します。

このコードでは、チェックボックスを使用して、ユーザーからの複数の選択肢を受け取る方法を説明しています。

<form method="post" action="">
    <input type="checkbox" name="check1" value="1"> 選択肢1
    <input type="checkbox" name="check2" value="2"> 選択肢2
    <input type="submit" value="送信">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $checkbox1 = isset($_POST["check1"]) ? true : false;
    $checkbox2 = isset($_POST["check2"]) ? true : false;

    echo "選択肢1: ", $checkbox1 ? "選択済み" : "未選択";
    echo "選択肢2: ", $checkbox2 ? "選択済み" : "未選択";
}
?>

この例では、選択肢1と選択肢2という二つのチェックボックスを作成しています。

チェックボックスが選択された場合には、そのvalueが$_POSTに渡されます。

○方法4：ラジオボタンの利用

ラジオボタンは、選択肢から一つだけを選ぶ場合に利用します。

このコードでは、ラジオボタンを用いて、一つの選択肢を受け取る方法を説明しています。

<form method="post" action="">
    <input type="radio" name="radio1" value="1"> 選択肢1
    <input type="radio" name="radio1" value="2"> 選択肢2
    <input type="submit" value="送信">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $selected = $_POST["radio1"];
    echo "選択された選択肢: ", htmlspecialchars($selected, ENT_QUOTES, 'UTF-8');
}
?>

この例では、選択肢1と選択肢2という二つのラジオボタンを作成しています。

ラジオボタンが選択された場合、そのvalueが$_POSTに渡されます。

○方法5：セレクトボックスの利用

セレクトボックスはドロップダウンメニューとも呼ばれ、ユーザーが選択リストから一つだけ選ぶことができます。

このコードでは、セレクトボックスを作成し、選択されたオプションを受け取る方法を説明しています。

<form method="post" action="">
    <select name="select1">
        <option value="1">選択肢1</option>
        <option value="2">選択肢2</option>
    </select>
    <input type="submit" value="送信">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $selected = $_POST["select1"];
    echo "選択された選択肢: ", htmlspecialchars($selected, ENT_QUOTES, 'UTF-8');
}

この例では、選択肢1と選択肢2の二つのオプションを持つセレクトボックスを作成しています。

選択されたオプションのvalueが$_POSTに渡されます。

○方法6：複数行のテキスト入力（テキストエリア）の作成

長文の入力を受け付ける場合には、テキストエリアを使用します。

このコードでは、テキストエリアを作成し、ユーザーからの入力を受け取る方法を示しています。

<form method="post" action="">
    <textarea name="textarea1" rows="5" cols="40"></textarea>
    <input type="submit" value="送信">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $input = $_POST["textarea1"];
    echo "入力された内容: ", htmlspecialchars($input, ENT_QUOTES, 'UTF-8');
}

この例では、テキストエリアを作成し、そこに入力されたテキストを$_POSTから取得して表示しています。

○方法7：ファイルのアップロードフォームの作成

ユーザーからファイルをアップロードして受け取るためには、ファイルアップロードフォームの作成が必要となります。

次のサンプルコードでは、HTMLでファイルのアップロードフォームを作成し、PHPでそのファイルを受け取る方法を示します。

<form method="post" action="" enctype="multipart/form-data">
    <input type="file" name="file1">
    <input type="submit" value="送信">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $file = $_FILES["file1"];
    if (is_uploaded_file($file["tmp_name"])) {
        if (move_uploaded_file($file["tmp_name"], "./" . $file["name"])) {
            echo "ファイルがアップロードされました。";
        } else {
            echo "ファイルのアップロードに失敗しました。";
        }
    }
}

この例では、ファイル入力フィールドと送信ボタンを含むフォームを作成しています。

フォームのenctype属性には”multipart/form-data”が指定され、これによりファイルのアップロードが可能になります。

PHP側では、$_FILESスーパーグローバル配列を通じてアップロードされたファイルにアクセスします。

ファイルが適切にアップロードされていることを確認した後、move_uploaded_file関数を使ってファイルを最終的な保存先に移動します。

○方法8：隠しフィールドの利用

隠しフィールドは、ユーザーには見えないが、サーバーとの間でデータをやり取りする際に役立つフィールドです。

このコードでは、隠しフィールドを作成し、その値を受け取る方法を示します。

<form method="post" action="">
    <input type="hidden" name="hidden1" value="隠しデータ">
    <input type="submit" value="送信">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $hidden = $_POST["hidden1"];
    echo "隠しフィールドの値: ", htmlspecialchars($hidden, ENT_QUOTES, 'UTF-8');
}

この例では、タイプがhiddenのinput要素を作成しています。

この要素の値は、ユーザーから見ることはできませんが、サーバー側でPOSTデータとして受け取ることができます。

○方法9：リセットボタンの利用

リセットボタンは、フォームに入力されたすべてのデータを初期状態に戻す役割を果たします。

次のコードでは、リセットボタンを配置する方法を示しています。

<form method="post" action="">
    <input type="text" name="text1">
    <input type="reset" value="リセット">
    <input type="submit" value="送信">
</form>

この例では、type属性が”reset”のinput要素を配置しています。

このボタンをクリックすると、フォームのすべての入力フィールドの値が初期状態に戻ります。

○方法10：送信ボタンのデザイン変更

送信ボタンのデザインは、CSSを使用してカスタマイズすることが可能です。

このサンプルコードでは、送信ボタンの背景色、テキスト色、ボーダーラウンド（角の丸み）を変更する方法を紹介します。

<style>
.submit-btn {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    border: none;
}
</style>

<form method="post" action="">
    <input type="text" name="text1">
    <input type="submit" class="submit-btn" value="送信">
</form>

このコードでは、送信ボタンに”submit-btn”というクラスを指定し、このクラスに対してCSSを適用しています。

ボタンの背景色を#4CAF50（緑色）、テキスト色を白色に設定し、paddingで内側の余白を設定しています。

また、border-radiusを用いてボタンの角を丸くしています。

ユーザーの操作感を向上させるためには、送信ボタンのデザインは非常に重要な要素となります。

CSSを活用して、見た目や使用感を最適化しましょう。

●PHP入力フォームの注意点と対処法

PHPで入力フォームを作成する際には、セキュリティ面で注意しなければならない点がいくつかあります。

最も重要なのは、ユーザーからの入力をそのまま信用しないことです。

ユーザーからの入力は必ず適切に検証し、無害化する必要があります。

例えば、次のコードでは、ユーザーからの入力をエスケープしてXSS（クロスサイトスクリプティング）攻撃を防ぐ方法を示しています。

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $text = $_POST["text1"];
    echo "入力されたテキスト: ", htmlspecialchars($text, ENT_QUOTES, 'UTF-8');
}

この例では、htmlspecialchars関数を使ってユーザーからの入力をエスケープしています。

この関数は、HTMLに特別な意味を持つ文字（例えば、”<“, “>”, “&”など）を特殊なエンティティに変換し、ブラウザがこれらの文字をテキストとして解釈するようにします。

これにより、ユーザーが悪意を持ってスクリプトを入力した場合でも、そのスクリプトが実行されることを防ぎます。

次に、SQLインジェクション攻撃を防ぐためには、ユーザーからの入力をそのままSQLクエリに含めないことが重要です。

これを実現するために、プリペアドステートメントを使用すると良いです。

$db = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
$stmt = $db->prepare('SELECT * FROM users WHERE name = :name');
$stmt->execute([':name' => $name]);
foreach ($stmt as $row) {
    // do something with $row
}

この例では、ユーザーからの入力を直接SQLクエリに含めず、代わりにプレースホルダ（この場合は”:name”）を使用しています。

そして、executeメソッドを呼び出す際に、プレースホルダにユーザーからの入力をバインドします。

これにより、ユーザーからの入力が安全にエスケープされ、SQLインジェクション攻撃を防ぐことができます。

●PHP入力フォームのカスタマイズ方法

PHPの入力フォームは、CSSやJavaScriptを組み合わせて多彩なカスタマイズが可能です。

ここでは、バリデーションメッセージのカスタマイズと、入力済みの値の保持について具体的なコードを交えて説明します。

まず、バリデーションメッセージのカスタマイズです。

ユーザーからの入力が不適切な場合、具体的なエラーメッセージを表示してユーザーにフィードバックを提供できます。

下記に示すサンプルコードでは、入力が空だった場合にエラーメッセージを表示する簡単な例を紹介します。

<?php
$error_message = '';

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    if (empty($_POST["text1"])) {
        $error_message = 'テキストを入力してください。';
    }
}
?>

<form method="post" action="">
    <input type="text" name="text1">
    <input type="submit" value="送信">
</form>

<?php if (!empty($error_message)) : ?>
    <div style="color: red;"><?php echo $error_message; ?></div>
<?php endif; ?>

このコードでは、テキスト入力が空であれば$error_messageにエラーメッセージをセットしています。

そして、フォームの下部にエラーメッセージを表示する領域を設けています。エラーメッセージがセットされていれば、そのメッセージを表示します。

このようにして、具体的なエラーメッセージを表示することで、ユーザーは何が問題なのかを理解しやすくなります。

次に、入力済みの値の保持について説明します。

ユーザーがフォームを送信した後に再度フォームを表示する際、先ほど入力した値をフォームに保持しておくとユーザビリティが高まります。

このサンプルコードでは、POST送信された値をフォームに保持する方法を示しています。

<?php
$text = '';

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $text = $_POST["text1"];
}
?>

<form method="post" action="">
    <input type="text" name="text1" value="<?php echo htmlspecialchars($text, ENT_QUOTES, 'UTF-8'); ?>">
    <input type="submit" value="送信">
</form>

この例では、POST送信されたテキストを$textに保持し、それをフォームのvalue属性にセットしています。

これにより、ユーザーが先ほど入力した値がフォームに表示されます。

なお、ここでもhtmlspecialchars関数を用いてエスケープを行っています。

まとめ

この記事では、PHPを用いたウェブフォームの作成方法について詳しく解説しました。

チェックボックス、ラジオボタン、セレクトボックスの使い方から、複数行のテキスト入力やファイルのアップロード方法まで、様々な入力要素の実装方法を見てきました。

また、送信ボタンのデザイン変更や隠しフィールドの利用法、リセットボタンの利用法についても触れました。

これらのテクニックは、ユーザーの利便性を高めるだけでなく、データの取り扱いを安全に行うためにも重要です。

さらに、エラーメッセージのカスタマイズや、入力済みの値の保持など、フォームの使いやすさを向上するためのカスタマイズ方法についても学びました。

これらはユーザビリティを大幅に向上させ、ユーザーの満足度を高めることができます。

PHPによるウェブフォームの実装は、ウェブ開発の基本的なスキルであり、データの収集やユーザーとのインタラクションに不可欠です。

この記事で紹介したテクニックを理解し、自身のウェブアプリケーションに活用してみてください。