普段コーディングしていて、実はform周りはあまり使う機会がありません。WordPressとかだと、プラグイン使っておしまいですからねぇ。。。
で、このformが実技に毎年出ています。内容はほとんど同じなのでこれを機会に勉強してしまおうというのが今回の記事の趣旨。
下準備
XAMPPを使っているので練習はhtdocsフォルダで。
htdocsに新しいフォルダを作って、そこで取り扱いを覚えます。
エディタはDreamweaverを使用。
新規フォルダ内に index.html と form.phpを作成。
試験問題の中身としては、
- form のactionとmethodの指定
- inputのタイプの適切な選択（text, password, hidden, mail, radio, checkbox, submit, reset）
- textareaの設定
- selectの設定と配列での送信
- valueプロパティ（初期値）の取り扱い
あたりが出題範囲。
以下復習。
form
<form action="form.php" method="post"> </form>
form
送信するデータの入力エリア
action
データの送信先。ここではform.phpに入力したデータを送信する。送信されるデータは$_POSTあるいは$_GETのスーパーグローバル変数に入っているので、受け手のPHPプログラムはデータをこれらの変数から取り出す。
method
postまたはget。通常はpost。GoogleMapなどデータをURLに追加してやり取りする場合にgetを使う。
enctype
デフォルトでは指定不要だが、フォームからファイルを送信する場合は、enctype="multipart/form-data"を指定する。
label
<label for="name名">ラベル名</label>
name名のinput要素に対するラベル。for=""で対応するinputのname名を指定することで、ラベル名をクリックしたときに入力エリアにカーソルが入る。アクセシビリティを高めるためこの関連付けは大事。
検定試験では送信する各パラメータのタイトル名を入れる。
input
<input type="type名" name="name名" value="初期値" size="">
name=""
action先に渡す変数に入れるキーの名前
name, tel, user, emailなど、分かりやすいものを入れる。検定試験ではHTTPリクエストインターフェイスに指定されている文字列を使用する。
配列を入れたい場合は、name="name"として入れるか、name="name[0]" name="name[1]"…のように配列番号を入れる。内に番号を入れない場合は最初に出てきたものから順番に0、1、2…とキーが割り当てられる。
value=""
inputの初期値を入れる。textであれば入力フィールドに最初からその文字が入る。
size=""
入力フィールドの長さ（文字数）を指定する。省略可。
type="text"
1行テキスト入力フォーム
type="mail"
メール専用のテキスト入力フォーム。メールアドレスのフォーマットではない文字列の場合、ブラウザの方で勝手に警告を出して拒否してくれるので便利。
type="password"
<input type="password" name="" size="" maxlength="">
パスワード入力フィールド。入力した文字が伏字になる。maxlengthで最大文字数を指定することができる。
type="radio" value=""
<input type="radio" name="name" value="選択肢1" id="radio1" checked><label for="radio1">選択肢1</label> <input type="radio" name="name" value="選択肢2" id="radio2"><label for="radio2">選択肢2</label> <input type="radio" name="name" value="選択肢3" id="radio3"><label for="radio3">選択肢3</label>
ラジオボタンを設置する。
label for=""の値に対応するのはidになるので注意。
どちらかというとinputごとlabelで囲むとこれらの指定が省けるので楽。
排他選択になるため、nameの値はすべて同じものにする。
value値は必須。
checkedを付けたラジオボタンは初期で選択された状態となる。
type="submit" value="送信"
送信ボタン
type="reset" value="リセット"
リセットボタン
textarea
<textarea name="" rows="" cols=""></textarea>
name
action先に渡す変数に入れるキーの名前
rows
行数
cols
幅
select
<select name="" size=""> <option value="" selected>選択肢1</option> <option value="">選択肢2</option> <option value="">選択肢3</option> </select>
name
action先に渡す変数に入れるキーの名前
size
デフォルトは1。指定した数字がリストボックスの表示行数となる。
option
選択肢。選択肢の数だけ列挙する。
value
送信値。選択肢の文字列をそのまま送信する場合は指定不要。
selected
デフォルトで選択される選択肢に対して指定する。
正しく送信されているか確認
送信側（index.html）のフォームのコード
※selectのオプションは一部省略。
<form action="form.php" method="post"> <p><label for="name">名前</label></p> <p><input type="text" name="name"></p> <p><label for="mail">Emal</label></p> <p><input type="email" name="mail"></p> <p>日時</p> <p><label><select name="date[0]"> <option>1</option> <option>2</option> <option>3</option> </select>月</label> <label><select name="date[1]"> <option>1</option> <option>2</option> <option>3</option> </select>日</label> <label><select name="date[2]"> <option>0</option> <option>1</option> <option>2</option> <option>3</option></option></select>時</label></p> <p><label for="address">住所</label></p> <p><input type="text" name="address"></p> <p><label for="question">お問い合わせ内容</label></p> <p><textarea name="question"></textarea></p> <input type="submit" value="送信"> </form>
受信側(form.php)のコード
<?php $date = $_POST["date"];?>
<p>名前：<?php echo $_POST["name"] ;?></p> <p>email：<?php echo $_POST["mail"] ;?></p> <p>日時：<?php echo $date[0] ;?>月 <?php echo $date[1] ;?>日 <?php echo $date[2] ;?>時</p> <p>住所：<?php echo $_POST["address"] ?></p> <p>お問い合わせ内容：</p> <p><?php echo $_POST["question"] ;?></p>
index.htmlで送信ボタンを押すと、form.phpへページが遷移し、入力結果を表示することができる。
