html 入力フォーム作り方

HTML入力フォームの作り方

要約

この記事では、HTMLの入力フォームの基本的な作り方について解説します。フォームの構造や要素、魅力的で機能的なフォームを作成するためのヒントを提供します。

1. 基本的なフォームの作成【`<form>`タグ】

`<form>`タグは、ウェブページ上にユーザーがデータを入力するための領域を作ります。このタグには、データの送信先や送信方法を指定する属性があります。

- `<form>`タグの基本書式：

<form action="データ処理プログラムのURL" method="送信方法">
  <!-- フォームの内容 -->
</form>

- action属性：

フォームに入力されたデータを処理するプログラムのURLを指定します。例えば、"contact.php"というファイルに処理させる場合は、`action="contact.php"`と記述します。

- method属性：

データの送信方法を指定します。主に"get"と"post"の2種類があります。

get: データをURLの末尾にくっつけて送信します。URLにデータが表示されるため、パスワードなど重要な情報の送信には適していません。
post: データをHTTPリクエストの本文に含めて送信します。URLにデータが表示されないため、セキュリティ面で優れています。

例：

<form action="process.php" method="post">
  <!-- フォームの内容 -->
</form>

この例では、入力されたデータは"process.php"というプログラムに"post"メソッドで送信されます。

2. フォームに部品を追加する

`<form>`タグでフォームの領域を作成したら、その中に様々な入力部品を追加していくことができます。

2.1 テキストフィールドを作成する【`<input>`タグ】

`<input>`タグは、ユーザーが1行のテキストを入力するためのフィールドを作成します。

type属性: 入力フィールドの種類を指定します。テキストフィールドを作成するには、`"text"`を指定します。
name属性: プログラムでデータを受け取る際に使用する名前を指定します。分かりやすい名前を付けましょう。

例：

<form action="process.php" method="post">
  <label for="name">氏名:</label><br>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="送信">
</form>

2.2 複数行の入力フィールドを作成する【`<textarea>`タグ】

`<textarea>`タグは、ユーザーが複数行のテキストを入力するためのフィールドを作成します。

name属性: `<input>`タグと同様に、プログラムに渡す名前を指定します。
cols属性: テキストフィールドの幅を文字数で指定します。
rows属性: テキストフィールドの高さを行数で指定します。

例：

<form action="process.php" method="post">
  <label for="message">メッセージ:</label><br>
  <textarea id="message" name="message" cols="40" rows="5"></textarea><br><br>
  <input type="submit" value="送信">
</form>

2.3 送信ボタンを作成する【`<input type="submit">`】

`<input type="submit">`は、フォームに入力したデータをサーバーに送信するためのボタンを作成します。

type属性: `"submit"` を指定することで送信ボタンを作成します。
value属性: ボタンに表示するテキストを指定します。

例：

<form action="process.php" method="post">
  <!-- フォームの内容 -->
  <input type="submit" value="送信">
</form>

データ処理プログラムへの受け渡しについて:

送信ボタンがクリックされると、フォームに入力されたデータは、`<form>`タグの`action`属性で指定されたプログラムに送信されます。データは、`name`属性で指定された名前と値のペアで送信されます。

3. PHPで入力フォームの内容を確認するページを作成する

ここでは、PHPを使って、フォームから送信されたデータを受け取り、表示する簡単なプログラムを作成します。

3.1 PHPとは？

PHPは、動的なウェブページを作成するためのプログラミング言語です。HTMLに埋め込んで使用することができ、データベースとの連携や複雑な処理も可能です。

3.2 `<form>`タグとPHPプログラムの作成

contact.html (フォーム)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせ</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <form action="contact.php" method="post">
    <label for="name">お名前:</label><br>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">メールアドレス:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <label for="message">お問い合わせ内容:</label><br>
    <textarea id="message" name="message" cols="40" rows="5"></textarea><br><br>

    <input type="submit" value="送信">
  </form>
</body>
</html>

contact.php (PHPプログラム)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせ内容の確認</title>
</head>
<body>
  <h1>お問い合わせ内容の確認</h1>
  <p>以下の内容でよろしければ、送信ボタンを押してください。</p>
  <p>お名前: <?php echo $_POST['name']; ?></p>
  <p>メールアドレス: <?php echo $_POST['email']; ?></p>
  <p>お問い合わせ内容:</p>
  <p><?php echo nl2br($_POST['message']); ?></p>
</body>
</html>

3.3 `<form>`タグ "action属性"の設定

`<form>`タグの`action`属性には、データを受け取るPHPプログラムのファイル名を指定します。上記の例では、"contact.php"を指定しています。

データ処理の流れ:

ユーザーが"contact.html"にアクセスし、フォームに入力します。
送信ボタンを押すと、データが"contact.php"に送信されます。
"contact.php"では、`$_POST`変数を使ってフォームから送信されたデータを受け取ります。
受け取ったデータを表示します。

4. フォームデーター送信時のセキュリティを考慮する

フォームデータの送信には、セキュリティリスクが伴います。悪意のあるユーザーによって、不正なデータを送信される可能性があるからです。

- クロスサイトスクリプティング(XSS)対策:

`<script>`タグなどを埋め込まれて、悪意のあるスクリプトを実行される攻撃です。対策として、PHPの`htmlspecialchars()`関数などを使って、特殊文字を無害化します。

セキュリティ対策を施したcontact.phpの例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせ内容の確認</title>
</head>
<body>
  <h1>お問い合わせ内容の確認</h1>
  <p>以下の内容でよろしければ、送信ボタンを押してください。</p>
  <p>お名前: <?php echo htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8'); ?></p>
  <p>メールアドレス: <?php echo htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8'); ?></p>
  <p>お問い合わせ内容:</p>
  <p><?php echo nl2br(htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8')); ?></p>
</body>
</html>

上記のように、`htmlspecialchars()`関数を使うことで、特殊文字を無害化し、XSSを防ぐことができます。

HTML入力フォームの基本要素

HTML入力フォームを作成する際に必要な基本要素には、<input>タグや<select>タグ、<textarea>タグなどがあります。これらを使用することで、ユーザーからのデータ入力を受け付けることができます。それぞれのタグの使い方と特徴を詳しく説明します。

タグ名	説明
<input>	テキスト、パスワード、チェックボックスなど、さまざまな種類のデータを受け付けるための基本的なフォーム要素。
<select>	ドロップダウンリストから選択するための要素。
<textarea>	複数行のテキスト入力を受け付けるための要素。

コード例

以下は、基本的なHTMLフォームの例です。

<form action="submit.php" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email"><br>

    <label for="gender">性別:</label>
    <select id="gender" name="gender">
        <option value="male">男性</option>
        <option value="female">女性</option>
    </select><br>

    <label for="message">メッセージ:</label>
    <textarea id="message" name="message"></textarea><br>

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

参考文献

詳しい情報については、次のリンクをご参照ください:

MDN Web Docs: HTMLフォームに関する記事