首頁  >  文章  >  後端開發  >  案例分析PHP Web表單產生器

案例分析PHP Web表單產生器

coldplay.xixi
coldplay.xixi轉載
2020-07-11 17:53:184560瀏覽

案例分析PHP Web表單產生器

本文實例講述了PHP Web表單產生器。分享給大家供大家參考,具體如下:

1.實例:

案例分析PHP Web表單產生器

相關學習推薦:PHP程式設計從入門到精通

2. 需求分析

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

  • 使用多維數組保存表單的相關資訊
  • 支援的表單項目包括文字方塊、文字域、單選框、複選框和下拉清單5種類型
  • 儲存每個表單項目的標記、提示文字、屬性、選項值、預設值等
  • 將功能封裝成函數,根據傳遞的參數產生指定的表單

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

案例分析PHP Web表單產生器

3.案例實作

1.準備表單

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

2.準備表單-建立表單

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

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

>」是HTML的註解標記,用於解釋和說明。

案例分析PHP Web表單產生器

  • 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 => [
  &#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;
 ],

option利用關聯數組保存具體的單選項,鍵名m、w為單選框的value屬性值,對應的值「男」、「女」為該單選項的提示訊息
default的值為option關聯數組中的一個鍵名,表示預設選取哪一項

//复选框
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;]
]

表單的自動產生

#1.表單的自動產生-讀取$elements數組

實作想法

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

2.表單的自動產生-拼接表單元素的屬性

實作想法

  • 定義函數generate_attr($attr, $items = '' )用於完成表單元素屬性的拼接
  • $attr數組中元素的鍵為屬性名稱,元素的值為屬性的值
  • 透過遍歷完成屬性與$items的拼接並傳回,如type=“radio” name=“gender”

3.表單的自動產生-拼接input元素

##實作想法

##根據是否含有option元素,判斷是否為單選或多選
  • 若不是,則直接呼叫屬性函數完成表單項目的拼接
  • 若是,則透過遍歷依序完成多個選項的拼接並傳回

  • 案例分析PHP Web表單產生器
  • 4.表單的自動產生-拼接select元素

實作想法

拼接下拉清單的選項option
  • 完成select標記的完整拼接並傳回
  • 案例分析PHP Web表單產生器
  • 5.表單的自動產生-拼接textarea元素

實作想法

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

  • 案例分析PHP Web表單產生器

以上是案例分析PHP Web表單產生器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除