PEAR HTML_QuickForm を使ってみる

概要

HTML_QuickForm は、HTML のフォームを作成したり入力情報の検証を行うことができます。
前回インストールしたPEARのパッケージマネージャーを使って HTML_QuickForm をインストールします。

HTML_QuickForm オブジェクトを生成する

まずは、PEAR HTML_QuickForm を読み込んで、オブジェクトを生成します。

// HTML_QuickForm の読み込み
require_once 'HTML/QuickForm.php';

// HTML_QuickForm オブジェクトを生成
$form = new HTML_QuickForm('firstForm');

今回はフォームの名前だけを設定してあとはデフォルトのままです。
フォームの method 属性は POST、action 属性は現在のファイル名となります。

フォームを構築する

次にフォームの要素を追加します。

$form->addElement('header', null, 'サンプルフォーム');
$form->addElement('text', 'name', 'お名前:', array('size' => 50, 'maxlength' => 30));
$form->addElement('submit', null, '送信');

'header'はフォーム要素とは関係ありません。見出し用の装飾を施すための属性です。

入力値の検証ルールを作成する

フォームに入力された値の検証ルールを追加します。

$form->applyFilter('name', 'trim');  // 空白を削除
$form->addRule('name', '名前を入力してください', 'required', null, 'client');

名前が空白の場合、 QuickForm が表示するエラーメッセージを設定します。
'client' は、JavaScript による検証も有効にします。
'required' は、必須入力を要求します。*印を自動的につけます。

「* denotes required field」と表示される部分を日本語に修正するには、HTML_QuickForm クラスの $_requiredNote プロパティを上書きします。

// HTML_QuickForm オブジェクトを生成
$form = new HTML_QuickForm('firstForm');
$form->_requiredNote->setRequiredNote("<span style="color:#ff0000;">*</span>必須入力");

入力値の検証とその後の処理

フォームでどんな処理を行うのか記述します。

// フォームの入力値の検証
if ($form->validate()) {
    echo '<p>こんにちは、' . htmlspecialchars($form->exportValue('name')) . 'さん。ようこそ QuickForm の世界へ!</p>';
} else {
  // フォームの出力
  $form->display();
}

$form->exportValue('name') で「name」に入力された値を取得します。
exportValue() および exportValues() は検証・フィルタされた後の値を取得します。
また、送信されるはずのない値 (例えば、<select> 要素の選択肢の中に存在しない値など) は、有効な値とはみなされず、返されません。

if ($form->validate()) で入力値の検証を通過したときの処理を記述します。
if ($form->validate()) でtrueが返らなかったときは、現在のフォームを表示します。

まとめ

firststep.php

<?php // C:\var\www\html\firststep.php ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>サンプルフォーム</title>
</head>
<body>

<?php
// メインクラスの読み込み
require_once 'HTML/QuickForm.php';

// HTML_QuickForm オブジェクトを生成
$form = new HTML_QuickForm('firstForm');
$form->_requiredNote = '<span style="font-size:80%; color:#ff0000;">*</span><span style="font-size:80%;"> 必須入力</span>';

// フォームに要素をいくつか追加
$form->addElement('header', null, 'サンプルフォーム');
$form->addElement('text', 'name', 'お名前:', array('size' => 50, 'maxlength' => 30));
$form->addElement('submit', null, '送信');

// 検証ルールを追加
$form->applyFilter('name', 'trim');
$form->addRule('name', '名前を入力してください', 'required', null, 'client');

// 入力値の検証
if ($form->validate()) {
    echo '<p>こんにちは、' . htmlspecialchars($form->exportValue('name')) . 'さん。ようこそ QuickForm の世界へ!</p>';
} else {
  // フォームの出力
  $form->display();
}
?>

</body>
</html>

表示結果

htmlソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>サンプルフォーム</title>
</head>
<body>

<script type="text/javascript">
//<![CDATA[
function validate_firstForm(frm) {
  var value = '';
  var errFlag = new Array();
  var _qfGroups = {};
  _qfMsg = '';

  value = frm.elements['name'].value;
  if (value == '' && !errFlag['name']) {
    errFlag['name'] = true;
    _qfMsg = _qfMsg + '\n - 名前を入力してください';
  }

  if (_qfMsg != '') {
    _qfMsg = 'Invalid information entered.' + _qfMsg;
    _qfMsg = _qfMsg + '\nPlease correct these fields.';
    alert(_qfMsg);
    return false;
  }
  return true;
}
//]]>
</script>

<form action="firststep.php" method="post" name="firstForm" id="firstForm" onsubmit="try { var myValidator = validate_firstForm; } catch(e) { return true; } return myValidator(this);">
<div>

<table border="0">
  <tr>
    <td style="white-space: nowrap; background-color: #CCCCCC;" align="left" valign="top" colspan="2"><b>サンプルフォーム</b></td>
  </tr>
  <tr>
    <td align="right" valign="top"><span style="color: #ff0000">*</span><b>お名前:</b></td>
    <td valign="top" align="left">	<input size="50" maxlength="30" name="name" type="text" /></td>
  </tr>
  <tr>
    <td align="right" valign="top"><b></b></td>
    <td valign="top" align="left">  <input value="送信" type="submit" /></td>
  </tr>
  <tr>
    <td></td>
    <td align="left" valign="top"><span style="color:#ff0000;">*</span><span style="font-size:80%;"> 必須入力</span></td>
  </tr>
</table>
</div>
</form>
</body>
</html>

入力画面
エラー表示画面
送信完了画面

投稿日：2008年12月30日

概要

目次

HTML_QuickForm オブジェクトを生成する

フォームを構築する

入力値の検証ルールを作成する

入力値の検証とその後の処理

まとめ

表示結果