ケーススタディ PHP Web フォームビルダー-PHPチュートリアル-php.cn

ケーススタディ PHP Web フォームビルダー

この記事の例では、PHP Web フォームジェネレーターについて説明します。参考のために全員と共有してください。詳細は次のとおりです:

1. 例:

ケーススタディ PHP Web フォームビルダー

##関連する学習の推奨事項:
PHP プログラミング初心者から熟練者まで

2. 要件分析

実際のプロジェクト開発では、さまざまな帳票の設計が必要になることがよくあります。 HTML フォームを直接記述するのは簡単ですが、変更や保守は比較的面倒です。したがって、PHP を使用して Web フォームジェネレーターを実装すると、特定のニーズに応じてさまざまな機能を備えたフォームをカスタマイズできます。具体的な実装要件は次のとおりです。

サポートされるフォーム項目には、テキストボックス、テキストフィールド、ラジオボックス、チェックボックスと5種類のドロップダウンリスト
各フォーム項目のタグ、プロンプトテキスト、属性、オプション値、デフォルト値などを保存
関数を関数にカプセル化し、渡されたパラメータに基づいて指定されたフォームを生成します。

#データの保存形式によって、プログラムの実装方法が決まります。

したがって、上記の開発要件に従って、各フォーム項目は配列要素として使用でき、各要素は、タグ、プロンプトテキスト、属性配列 attr、オプション配列 option、およびデフォルトの連想配列によって記述されます。値。デフォルト。

ケーススタディ PHP Web フォームビルダー 3. ケースの実装

1. フォームの準備

#フォームの主な機能: Web ページ情報の入力に使用される領域は、ユーザーが入力した情報を収集し、バックエンドサーバーに送信して処理を行い、ユーザーとサーバー間の対話を実現します。

例: ショッピングの決済や情報検索などはすべてフォームを通じて実現されます。
2. フォームの準備 - フォームの作成

完全なフォームは、フォームフィールドとフォームコントロールで構成されます。このうち、フォームフィールドはformタグで定義され、ユーザー情報の収集や伝達に使用されます。

<form action="form.php" method="post" enctype="multipart/form-data">
  <!-- 各种表单控件 -->
</form>

ログイン後にコピー

「

ケーススタディ PHP Web フォームビルダー

アクション属性の値は、絶対パスまたは相対パスにすることができます。この属性が省略された場合は、アクションが送信されることを意味します。処理対象の現在のファイル。

GET メソッドと比較して、POST メソッドによって送信されたデータは目に見えず、対話中に比較的安全です。したがって、フォームデータの送信には通常 POST が使用されます。

enctype 属性のデフォルト値は application/x-www-form-urlencoded です。これは、フォームデータを送信する前にすべての文字がエンコードされることを意味します。さらに、文字エンコードなしを示すために multipart/form-data (POST モード) に設定することもできます。特にファイルのアップロードを含むフォームではこの値を使用する必要があります。通常のテキストを送信するには text/plain (POST モード) に設定します。

//input控件
<input type="text" name="user" value="test">	<!-- 文本框 -->
<input type="password" name="pwd" value="">		<!-- 密码框 -->
<input type="file" name="upload">     		<!-- 文件上传域 -->
<input type="hidden" name="id" value="2"> 		<!-- 隐藏域 -->
<input type="reset" value="重置">     		<!-- 重置按钮 -->
<input type="submit" value="提交">    		<!-- 提交按钮 -->

ログイン後にコピー

type 属性に異なる値を設定して、異なるフォームコントロールを取得します

name 属性はused フォーム内の複数の同一コントロールを区別するために、コントロールの名前を指定します。
value プロパティは、フォームコントロールのデフォルト値を設定するために使用されます。

//input控件
<!-- 单选框 -->
<input type="radio" name="gender" value="m" checked> 男
<input type="radio" name="gender" value="w"> 女
<!-- 复选框 -->
<input type="checkbox" name="hobby[]" value="swimming"> 游泳
<input type="checkbox" name="hobby[]" value="reading"> 读书
<input type="checkbox" name="hobby[]" value="running"> 跑步

ログイン後にコピー

チェックされたプロパティは、デフォルトの選択項目を設定するために使用されます。

//textarea控件
<textarea name="introduce" cols="5" rows="10">
<!-- 文本内容 -->
</textarea>

ログイン後にコピー

テキストエリアコントロールは、自己評価、コメント、および大量の情報の入力が必要なその他の機能に適しています

cols 属性と rows 属性は、テキスト領域の高さと幅を定義するために使用されます。

//select控件
<select name="area">
  <option selected>--请选择--</option>
  <option value="Beijing">北京</option>
  <option value="Shenzhen">深圳</option>
  <option value="Shanghai">上海</option>
</select>

ログイン後にコピー

select は、ドロップダウンリストを定義するタグです。

optionドロップダウンリストの特定のオプションを定義するタグです
The selected 属性は、デフォルトの選択項目を設定するために使用されます

フォームコントロールを作成するとき、より良いユーザーエクスペリエンスを提供するために、入力コントロールはラベルマークと組み合わせて使用されることがよくあります。コントロールの選択を拡張します。

たとえば、性別を選択する場合は、プロンプトテキスト「男性」または「女性」をクリックするか、対応するラジオボタンを選択します。
ラベルタグを使用してラジオボタンとプロンプトテキストを囲み、ラベルタグ内のコンテンツをクリックすると、対応するフォームコントロールが選択されるようにします。

<label><input type="radio" name="gender" value="m">男</label>
<label><input type="radio" name="gender" value="w">女</label>

ログイン後にコピー

5. 多次元配列

事例の需要分析によれば、フォーム項目の関連データは多次元配列に均一に保存されます。。このうち、数値キー名は帳票項目を区別するために使用され、各帳票項目は二次元の連想配列となっています。

// 利用多维数组保存表单元素
[
  0 => [],	// 表单项---单选按钮
  1 => [],	// 表单项
  2 => [],	// 表单项---文本框
  3 => [],	// 表单项
  ……
];

ログイン後にコピー

// 每个表单项的数组结构
0 => [
  &#39;tag&#39; => &#39;&#39;, 	// 标记----input、textarea、select
  &#39;text&#39; => &#39;&#39;, 	// 提示文本----label标签内显示的内容
  &#39;attr&#39; => [],	// 属性数组----表单元素的属性，如type
  &#39;option&#39; => [], 	// 选项数组----单选框或复选框中的每个选项
  &#39;default&#39; => &#39;&#39;	// 默认值----默认值
],

ログイン後にコピー

//准备表单数组
// $elements数组保存整个表单
$elements = [
  0 => [],		// 第1个表单项数组
  1 => [],		// 第2个表单项数组
];

ログイン後にコピー

//文本框
0 => [
  &#39;tag&#39; => &#39;input&#39;,
  &#39;text&#39; => &#39;姓　　名：&#39;,
  &#39;attr&#39; => [&#39;type&#39; => &#39;text&#39;, &#39;name&#39; => &#39;user&#39;]
],

ログイン後にコピー

//单选框
3 => [
  &#39;tag&#39; => &#39;input&#39;,
  &#39;text&#39; => &#39;性　　别：&#39;,
  &#39;attr&#39; => [&#39;type&#39; => &#39;radio&#39;, &#39;name&#39; => &#39;gender&#39;],
  &#39;option&#39; => [&#39;m&#39; => &#39;男&#39;, &#39;w&#39; => &#39;女&#39;],
  &#39;default&#39; => &#39;m&#39;
 ],

ログイン後にコピー

オプションは、連想配列を使用して特定のラジオオプションを保存します。キー名 m と w は、ラジオボタンの値属性であり、対応する値は「男性」ですオプションプロンプト情報

default の値はオプション連想配列内のキー名であり、どの項目がデフォルトで選択されるかを示します

//复选框
4 => [
  &#39;tag&#39; => &#39;input&#39;,
  &#39;text&#39; => &#39;爱　　好：&#39;,
  &#39;attr&#39; => [&#39;type&#39; => &#39;checkbox&#39;, &#39;name&#39; => &#39;hobby[]&#39;],
  &#39;option&#39; => [&#39;swimming&#39; => &#39;游泳&#39;, &#39;reading&#39; => &#39;读书&#39;, &#39;running&#39; => &#39;跑步&#39;],
  &#39;default&#39; => [&#39;swimming&#39;, &#39;reading&#39;]
],

ログイン後にコピー

//下拉列表
5 => [
  &#39;tag&#39; => &#39;select&#39;,
  &#39;text&#39; => &#39;住　　址：&#39;,
  &#39;attr&#39; => [&#39;name&#39; => &#39;area&#39;],
  &#39;option&#39; => [&#39;&#39; => &#39;--请选择--&#39;, &#39;BJ&#39;=>&#39;北京&#39;, &#39;SH&#39;=>&#39;上海&#39;, &#39;SZ&#39;=>&#39;深圳&#39;]
],

ログイン後にコピー

//文本域
6 => [
  &#39;tag&#39; => &#39;textarea&#39;,
  &#39;text&#39; => &#39;自我介绍：&#39;,
  &#39;attr&#39; => [&#39;name&#39; => &#39;introduce&#39;, &#39;cols&#39; => 50, &#39;rows&#39; => 5]
],

ログイン後にコピー

//提交按钮
7 => [
  &#39;tag&#39; => &#39;input&#39;,
  &#39;attr&#39; => [&#39;type&#39; => &#39;submit&#39;, &#39;value&#39; => &#39;提交&#39;]
]

ログイン後にコピー

form

1. 自動生成 - $elements 配列の読み取り

実装アイデア

ユーザーが送信したデータの処理を容易にするために、$elements の各フォーム項目が指定された配列とマージされ、各フォーム項目に 5 つのキー (tag、text、attr、option、default) が含まれるようになります。要素を同じ順序で並べます。
#タグの値に従って、「generate_」というプレフィックスが付いた関数を呼び出してフォーム項目を結合します。
各フォーム項目は 1 行を占め、結合されたフォームを返します

2. フォームの自動生成 - フォーム要素の属性の結合

実装アイデア

関数generate_attr($attr, $items = '' ) フォーム要素属性の結合を完了するために使用されます
#$attr 配列内の要素のキーは属性名であり、要素の値は属性の値です

type="radio" name="gender"

# など、トラバースして属性と $item の結合を完了します。

#3. フォームの自動生成 - 入力要素の結合

実装アイデア

オプション要素が含まれているかどうかに基づいて、単一選択か複数選択かを判断します。
そうでない場合は、属性関数を直接呼び出します。フォーム項目のスプライシングを完了するには
#その場合は、順番にトラバースします複数のオプションのスプライシングを完了し、

4 を返します。フォームの自動生成 -選択要素の結合
##実装のアイデア
ドロップダウンリストの結合オプション

選択タグの完全な結合を完了して戻る

5. フォームの自動生成 - textarea 要素の結合

実装アイデア
textarea 要素の属性の結合

テキストエリアを完全に結合して返す

以上がケーススタディ PHP Web フォームビルダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。