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

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

1. 例:

##関連する学習の推奨事項:

PHP プログラミング初心者から熟練者まで

2. 要件分析

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

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

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

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

3. ケースの実装

1. フォームの準備

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

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

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

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

「

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

GET メソッドで渡されたフォームは URL アドレス バーに表示されます。
• GET メソッドと比較して、POST メソッドによって送信されたデータは目に見えず、対話中に比較的安全です。したがって、フォーム データの送信には通常 POST が使用されます。
  
  enctype 属性のデフォルト値は application/x-www-form-urlencoded です。これは、フォーム データを送信する前にすべての文字がエンコードされることを意味します。さらに、文字エンコードなしを示すために multipart/form-data (POST モード) に設定することもできます。特にファイルのアップロードを含むフォームではこの値を使用する必要があります。通常のテキストを送信するには text/plain (POST モード) に設定します。
• 3. フォームを準備します — フォーム コントロール

//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 属性は、デフォルトの選択項目を設定するために使用されます
• 4. フォームの準備 - ラベル マーク

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

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

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

5. 多次元配列

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

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

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

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

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

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

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

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

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

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

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

//提交按钮
7 => [
  'tag' => 'input',
  'attr' => ['type' => 'submit', 'value' => '提交']
]

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 サイトの他の関連記事を参照してください。