前回、Web版読書ログサービスについて、バリデーション処理を施しましたが、バリデーションエラーとなった場合、フォームに入力された値が全てリセットされてしまう仕様となっていました。
そこで、今回はエラーとなっていない箇所の入力値を残すように修正しました。
フォームの入力値を残すには
- inputタグのvalue属性を使う。
value属性とは
- input要素の値を指定する属性
- テキスト入力欄などにおいては初期入力値を表す
サンプルコード
<label for="title">書籍名</label> <input type="text" id="title" name="title" value="<?php echo $review['title'] ?>">
ラジオボタンで入力値を残すには
- ラジオボタンの初期値の設定にはchecked属性を使う。
- checked属性を付けると初期値で選択された状態になる。
- 三項演算子（以下参照）を使って条件式で書く。
三項演算子とは
条件式を一行で書きたい時に三項演算子を使うと便利。
- 比較条件がTRUEの場合に値1を、比較条件がFALSEの場合に値2を値として返す。
(比較条件) ? (値1) : (値2)
サンプルコード
echo ($review['status'] === '未読') ? 'checked' : ''; ?>
// 以下と同じ意味
if ($review['status'] === '未読') {
echo 'checked';
} else {
echo '';
}
テキストエリアで入力値を残すには
- テキストエリアにはvalue属性がない。
- そこで
textareaの開始タグと閉じタグの間に値を入れる。
<textarea>表示させたい値</textarea>
サンプルコード
<label for="summary">感想</label> <textarea name="summary" id="summary" cols="20" rows="3"><?php echo $review['summary'] ?></textarea>
読書ログサービスに実装
src/views/new.php
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>読書ログの登録</title> </head> <body> <h1>読書ログ</h1> <h2>読書ログの登録</h2> <form action="create.php" method="POST"> <!-- バリデーションエラーを表示する --> <!-- phpをHTML内に記載する際は・・・ if (count($errors) > 0) { <ul> foreach ($errors as $error) { <li>$error</li> } </ul> } を以下のように書く --> <?php if (count($errors)) : ?> <ul> <?php foreach ($errors as $error) : ?> <li><?php echo $error ?></li> <?php endforeach ?> </ul> <?php endif ?> <div> <label for="title">書籍名</label> <input type="text" id="title" name="title" value="<?php echo $review['title'] ?>"> </div> <div> <label for="author">著者名</label> <input type="text" id="author" name="author" value="<?php echo $review['author'] ?>"> </div> <div> <label>読書状況</label> <div> <div> <input type="radio" name="status" id="not_yet" value="未読" <?php echo ($review['status'] === '未読') ? 'checked' : ''; ?>> <label for="not_yet">未読</label> </div> <div> <input type="radio" name="status" id="reading" value="読んでいる" <?php echo ($review['status'] === '読んでいる') ? 'checked' : ''; ?>> <label for="reading">読んでいる</label> </div> <div> <input type="radio" name="status" id="finish" value="読了" <?php echo ($review['status'] === '読了') ? 'checked' : ''; ?>> <label for="finish">読了</label> </div> </div> </div> <div> <label for="score">評価(5点満点の整数)</label> <input type="number" id="score" name="score" min="1" max="5" value="<?php echo $review['score'] ?>"> </div> <div> <label for="summary">感想</label> <textarea name="summary" id="summary" cols="20" rows="3"><?php echo $review['summary'] ?></textarea> </div> <button type="submit">登録する</button> </form> </body> </html>
src/new.php
<?php // $errorsを定義していないとエラーとなるため、$errorsを初期化しておく $errors = []; // $reviewを定義していないとエラーとなるため、$companyを初期化しておく $review = [ 'title' => '', 'author' => '', 'status' => '', 'score' => '', 'summary' => '', ]; // views/new.phpを取り込む include 'views/new.php';
