案例分析PHP Web表單生成器

本文範例講述了PHP Web表單生成器。分享給大家供大家參考，具體如下：

1.範例：

2. 需求分析

在專案的實際開發中，經常需要設計各種各樣表單。直接編寫HTML表單雖然簡單，但修改、維護相對麻煩。
因此，可以利用PHP實現一個Web表單生成器，使其可以根據具體的需求客製化不同功能的表單。具體實現需求如下：

• 使用多維陣列儲存表單的相關資訊
• 支援的表單項包括文字方塊、文字域、單選框、核取方塊和下拉選單5種型別
• 儲存每個表單項的標記、提示文字、屬性、選項值、預設值等
• 將功能封裝成函數，根據傳遞的引數生成指定的表單

資料的儲存形式決定了程式實現的方式。
因此，根據上述開發要求，可以將每個表單項作為一個陣列元素，每個元素利用一個關聯陣列描述，分別為：標記tag、提示文字text、屬性陣列attr、選項陣列option和預設值default。

3.案例實現

1.準備表單

表單的主要功能：就是在網頁上用於輸入資訊的區域，收集使用者輸入的資訊，並將其提交給後端的伺服器進行處理，實現使用者與伺服器的互動。
例如：購物結算、資訊搜尋等都是通過表單實現的。

2.準備表單——建立表單

一個完整的表單是由表單域和表單控制元件組成的。其中，表單域由form標記定義，用於實現使用者資訊的收集和傳遞。

<form action="form.php" method="post" enctype="multipart/form-data">
  <!-- 各種表單控制元件 -->
</form>

「<!-- –>」是HTML的注釋標記，用於解釋和說明。

• action屬性的值可以是絕對路徑、相對路徑，若省略該屬性則表示提交給當前檔案進行處理。
  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屬性用於指定控制元件的名稱，用以區分表單中多個相同的控制元件
• 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"> 跑步

• checked屬性用於設定預設選中項

//textarea控制元件
<textarea name="introduce" cols="5" rows="10">
<!-- 文字內容 -->
</textarea>

• 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是定義下拉選單中具體選項的標記
• selected屬性用於設定預設選中項

4.準備表單—label標記

在編寫表單控制元件時，為了提供更好的使用者體驗，經常將input控制元件與label標記聯合使用，以擴大控制元件的選擇範圍。
例如，選擇性別時，單擊提示文字「男」或「女」，也可選中相應的無線電鈕。
使用label標記包裹無線電鈕和提示文字，即可實現單擊label標記裡的內容時，相應的表單控制元件就會被選中。

<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'
 ],

option利用關聯陣列儲存具體的單選項，鍵名m、w為單選框的value屬性值，對應的值「男」、「女」為該單選項的提示資訊
default的值為option關聯陣列中的一個鍵名，表示預設選中哪一項

//核取方塊
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' => '提交']
]

表單的自動生成

1.表單的自動生成——讀取$elements陣列

實現思路

• 為了方便處理使用者提交的資料，將$elements中的每個表單項與指定的陣列進行合併，使得每個表單項都含有鍵為tag、text、attr、option和default五個元素，且順序相同。
• 根據tag值，分別呼叫字首為「generate_」的函數進行表單項的拼接
• 每個表單項佔據一行，並返回拼接好的表單

2.表單的自動生成——拼接表單元素的屬性

實現思路

• 定義函數generate_attr($attr, $items = ‘')用於完成表單元素屬性的拼接
• $attr陣列中元素的鍵為屬性名稱，元素的值為屬性的值
• 通過遍歷完成屬性與$items的拼接並返回，如type=「radio」 name=「gender」

3.表單的自動生成——拼接input元素

實現思路

• 根據是否含有option元素，判斷是否是單選或多選
• 若不是，則直接呼叫屬性函數完成表單項的拼接
• 若是，則通過遍歷依次完成多個選項的拼接並返回
  

4.表單的自動生成——拼接select元素

實現思路

• 拼接下拉選單的選項option
• 完成select標記的完整拼接並返回

5.表單的自動生成——拼接textarea元素

實現思路

• 拼接textarea元素的屬性
• 完整拼接textarea並返回
  

以上就是案例分析PHP Web表單生成器的詳細內容，更多請關注TW511.COM其它相關文章！