読者です 読者をやめる 読者になる 読者になる

半地下備忘録

たつさんの日記的ななにか。

Progateの復習を兼ねてPHPでフォームのサンプルを作ってみました(コード付き)

Web関係のなにか PHP

f:id:tatsu-n:20150224145516j:plain

プログラミング学習サイトProgateのPHPのコースを進めて、ひと通り終えてこの前 ProgateのPHP受講完了したので感想でも - 半地下備忘録 という記事を書いた。

この中で

Progateは区切りがいいのでいったん終了して、自分で借りたサーバーに自分で打って、今回の演習を復習する感じにしていくつもり。

って書いてたので、復習を兼ねて、自分で借りたサーバーにちまちまとフォームを作ってみた。Progateと同じことをやるなら、改めて書くほどのことじゃないだろう!! というお叱りを受けるかもしれないけど、ここでまた次どうするかを書くことによってモチベーションを保つライフハック(?)。

サンプルフォームの入力画面

取り立てて特長的なところはなにもない。普通の入力画面で名前、所属、アドレス、出欠を入力するシンプルなかたち。

f:id:tatsu-n:20150224141545p:plain

フォームのサンプルコード(attend.php

さすがに案内部分はいらないだろうということで、とりあえずフォームの部分だけ。どうでもいいけどこの画面、PHP使ってないからattend.htmlとしても動くね。もちろんphpで揃えるほうが普通に自然だと思うけど。

<form action="sent.php" method="post">
	<label>名前</label>
	<input type="text" name="name" size="10" value="" />
	<br />
	<label>所属</label>
	<input type="text" name="company" size="10" value="" />
	<br />
	<label>メールアドレス</label>
	<input type="text" name="email" size="10" value="" />
	<br />
	<input type="radio" name="attend" value="出席します" id="ans1"><label for="ans1">出席します</label>
	<input type="radio" name="attend" value="欠席します" id="ans2"><label for="ans2">欠席します</label>
	<br />

	<input type="submit" name="register" value="登録" />
</form>

実行結果画面

f:id:tatsu-n:20150224141722p:plain

実行結果のサンプルコード(sent.php

こちらも受け取った結果を表示する部分だけ一応。

<h3>入力内容</h3>
<ul>
	<li>名前:<?php echo htmlspecialchars($_POST['name']) ?></li>
	<li>所属:<?php echo htmlspecialchars($_POST['company']) ?></li>
	<li>メールアドレス:<?php echo htmlspecialchars($_POST['email']) ?></li>
	<li>出欠:<?php echo htmlspecialchars($_POST['attend']) ?></li>
</ul>

ポイント

  • フォームからmethod="post"で送ったデータは$_POST['フォームの部品に付けた名前'という変数に格納されている
  • ラジオボタンを使うときはlabel付けて、文字列をクリックしても動作するようにすること*1
  • 入力を受け取って表示する場合は、htmlspecialchars関数で悪意ある入力を無害化しておくこと

次やってみること

今のところ、項目に未入力のものがあってもなんのエラーにもならない。というか、全く入力してなくても実行結果の画面に遷移する。
f:id:tatsu-n:20150224143841p:plain
さすがにこれはイケてないから直したい。

ほかにも

  • 入力されたメールアドレスのチェック(@が含まれているかどうかなど)
  • 表示させるだけじゃなくてメール飛ばしたりデータベースに登録したりしたい
  • attend.phpとsent.phpに分かれてるのもイケてない?

いつになるかはわからないけど、のんびり挑戦していきまっす。

今回作ったサンプルベージ
フォームのテスト - 半地下備忘録

ちなみにサーバーは広告ありですが、Xdomainの無料サーバーを使っています。広告なしで安いとこならロリポップ!あたりが安くてオススメです。

最後に

今回作ったPHPのフォームはすべてProgateで勉強できるので、興味がある方はProgate見てみると幸せになれます(宣伝)。

Progate | プログラミングの入門なら基礎から学べるProgate (プロゲート)

*1:文字だけじゃなくて領域の指定もできるっぽい?要学習