PHP勉強1日目の2時限、はじまりです。
今日やることはこんな感じです。
- ユーザからの「入力」に応じてページを「処理」し、結果を「出力」するサンプルを作成する
- いろいろなフォームの種類
- 名前を入力する入力フォームを作成する
- フォームに名前を入力⇒送信
- 「こんにちわ、〇〇さん？」というメッセージを表示させる
今日の例題
お題
新規にコードを作成する
input.php
<html>
<head>
<title>フォーム情報を取得するよ</title>
</head>
<body>
<form method="POST" action="output.php">
お名前:
<input type="text" name="name" size="20" maxlength="30" />
<input type="submit" value="押せば？" />
<br />
</form>
</body>
</html>output.php
<html>
<head>
<title>フォーム情報を取得したよ</title>
</head>
<body>
こんにちわ、<?php print($_POST['name']); ?>さん？
</form>
<br />
<a href="input.php">戻る</a>
</body>
</html>
動作確認
ブラウザで以下URLを指定して確認。
https://5039.jp/php10/day01-2/input.php
サンプル
うほーできた、できた。
「入力」->「処理」->「出力」ってゆう、プログラムにおける基本的な流れ。こーゆうことか。
「動的なページ」のイメージが、ちょっとずつ沸いてきたかも。（`・ω・´） ･･･たぶん。
HTMLで利用可能なフォーム部品
上記で作成したようなフォーム以外にもフォーム部品の種類はたくさんある。
それぞれの局面と用途に応じてフォーム部品を使い分けることで、ユーザインターフェースを向上し、より親切で使いやすいアプリケーションを構築することができる。
ということで、他にどんなフォーム部品があるのか、メモしておく。
コードを書いてみる
sample.php
<html>
<head>
<title>いろいろなフォーム部品たち</title>
</head>
<body>
<form method="POST" action="output.php">
テキストボックス:
<input type="text" name="title" size="20" maxlength="18" value="なんか書いてや" />
<br />
パスワードボックス:
<input type="password" name="passwd" size="20" maxlength"18" value="" />
<br />
ラジオボタン:
<input type="radio" name="food" value="" />未選択
<input type="radio" name="food" value="orange" checked />オレンジ
<input type="radio" name="food" value="apple" />りんご
<input type="radio" name="food" value="melon" />メロン
<br />
チェックボックス:
<input type="checkbox" name="food[]" value="orange" checked />オレンジ
<input type="checkbox" name="food[]" value="apple" checked />りんご
<input type="checkbox" name="food[]" value="melon" />メロン
<br />
プルダウンメニュー:
<select name="food">
<option value="" selected>-</option>
<option value="orange">オレンジ</option>
<option value="apple">りんご</option>
<option value="melon">メロン</option>
</select>
<br />
リストボックス:<br />
<select name="food" size="3" multiple>
<option value="orange">オレンジ</option>
<option value="apple">りんご</option>
<option value="melon">メロン</option>
</select>
<br />
テキストエリア:<br />
<textarea name="memo" row="5" col="30">オラオラオラ</textarea>
<br />
隠しフィールド:
<input type="hidden" name="hide" value="hogehoge" />
</form>
</body>
</html>動作確認
ブラウザで以下URLを指定して確認。
https://5039.jp/php10/day01-2/sample.php
サンプル
テキストボックス
自由なテキストを入力できるが、改行文字を含めることができない。
sizeオプションでボックスの横の長さ、maxlengthオプションで入力できる最大文字列長、valueオプションでデフォルト値を、それぞれ指定することができる。
nameオプションで指定された値は、PHPやJavaScriptなどのプログラムからフォーム部品を参照する場合のキー（ラベル）となるもの。nameオプションの値は、ページ内で常に一意でなければならない。
パスワードボックス
入力された文字列が「*」で伏字になる。パスワードなど、第3者に見せたくない情報を入力する場合に使用する。
ラジオボタン（単一選択）
あらかじめ入力される値が想定される場合、かつ、必ず選択肢のうち1つだけを選ばせる場合に使用する。グルーピングするラジオボタンのnameオプションには同じ値をつけること。nameオプションが異なるラジオボタンは異なるグループに属するものと見なされる。
checkedオプションを指定することでデフォルト値を指定することができる。「非選択」を選ばせたい場合には、明示的に値（valueオプション）がブランクの選択肢を1つ作っておく必要がある。
※checkedオプションは原則1つの選択肢にしか指定することができない。
チェックボックス（複数選択）
複数選択が可能。1度選択したものは自由に解除可能で、checkedオプションを複数のチェックボックスに指定することも可能。また、単一の項目で On/Off のような選択をさせる場合にも使用できる。
なお、PHPで複数選択のチェックボックスを扱う場合には、フォーム名（nameオプション）の末尾に「[]」をつける必要がある。ついていない場合には、PHP側で複数値を受け取ることができないので注意。
プルダウンメニュー（単一選択ボックス）
ボックスの中に選択肢が納められているため、選択肢が多くなっても画面イメージを損なわずコンパクトに表示させることができる。ただし、一旦選択リストをポップアップさせた上で選択するため、2アクションが必要になる。
デフォルト値はselectedオプションで指定することが可能。ラジオボタンやチェックボックスで使用したcheckedオプションと混同しないこと。「選択しない」というオプションを設けたい場合は、明示的に値（valueオプション）がブランクの<option>タグを設ける必要がある。
リストボックス（複数選択ボックス）
sizeオプションをつけることによって、sizeオプションで指定された行数を持つリストボックスが作成される。（例は3行分の広さを持つリストボックス）
プルダウンメニューより画面上の領域をとるが、multipleオプションを付加することで複数選択ができるのが特徴。multipleオプションを取り除くことで、単一選択にすることも可能。
テキストエリア（複数行テキストボックス）
複数行のフリーテキストを入力する場合に用いる。rowsオプションで行数、colsオプションで桁数を指定する。デフォルト値は<textarea>タグの間に指定する。<textarea>タグではvalueオプションは指定できない。また、プログラム上でテキストエリアから入力されたデータを処理する場合、改行文字が含まれていることを考慮しなければならないため、注意が必要。
隠しフィールド
目に見えないフィールドで、あらかじめセットされた値をユーザが変更することはできない。システムを制御するための情報やセッションを通じて保持したい情報などを受け渡しする場合に使用する。
今日のまとめ
- HTMLフォームは、PHPに対してユーザからのデータを渡すための基本的な手法である。
- さまざまな種類のHTMLフォーム部品を、目的や用途に応じて使い分けることでユーザビリティを向上することができる。
今日はここまで。
次回は、2時限目（後半）として、リクエスト情報・ポストデータの取得について勉強します。
参考書：
10日でおぼえるPHP5 入門教室
