77.if文でHTMLの表示を切り替えよう！ ～受け取ったデータで条件分岐～
昨日はフォームのデータ送受信について、ざっくりとした仕組みを確認しました。
action属性、name属性がいい味を出していましたね。
今回は「条件に基づいてHTMLの表示を切り替える。」
これをやっていきたいと思います。
if分の基本はこちらの記事でやっています。
ifで表示を切り替えるには？
if文を使ってHTMLの表示を切り替えるには
通常の書式とは少し異なる書き方が必要です。
とは言え、先日やったforeachとほぼ同じです。
<div class="php-test">
<?php if(条件): ?>
～HTML～
<?php endif; ?>
</div>
切り替えをしたいHTMLをphpタグ(if文)で囲ってあげるだけです。
<?php if(条件): ?>
この意味は、
条件が正しい時にendifタグまでの間を処理または、出力する
こんなイメージで良いと思います。
条件を指定して切り替える
まずは仮のコードから
<div class="php-test">
<?php if($_POST["number"] >= 1): ?>
<h2>テストタイトル</h2>
<p>これは<?php echo $_POST["number"];>番目のテスト文です</p>
<?php endif; ?>
<?php if($_POST["number"] < 1): ?>
<h2>nontitle</h2>
<p>これは番号が１より小さいテスト文です</p>
<?php endif; ?>
</div>
1つ目のphpのifブロックでは、
フォームから受け取った連想配列のキー「number」の中身が1以上の場合、
h2のタイトル文と、pタグがHTMLテキストとして出力されます。
仮にフォームから受け取ったnumberの中身が1未満なら表示されません。
2つ目のphpのifブロックでは、連想配列のキー「number」の中身が1未満の場合に出力されます。
因みにフォームデータの送受信については下記記事を参考ください。
どちらかのブロックが出力される為、
ブラウザが受け取るHTMLの構造としては、
<div class="php-test">
<h2>～分岐後の値が入ります～</h2>
<p>～分岐後の値が入ります～</p>
</div>
必ずこの形になるというわけですね。
これで「受け取る値によって、表示するコンテンツを切り替える」ことができました。
今日のまとめ
- 条件式でHTMLの表示を切り替えるにはforeachのときのようなコロンを使ったphpのifタグ、endifタグで囲む
- 条件式が成立しない場合は出力されない
フォームから受け取った値によってページ内容を切り替えることができるようになりました。
ガシガシ書いて、できたものを表示するだけだったWebページが、ユーザーの入力によって変化するの面白いですね。
では、また。
