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

1.實(shí)例：

2. 需求分析

在項(xiàng)目的實(shí)際開(kāi)發(fā)中，經(jīng)常需要設(shè)計(jì)各種各樣表單。直接編寫(xiě)HTML表單雖然簡(jiǎn)單，但修改、維護(hù)相對(duì)麻煩。因此，可以利用PHP實(shí)現(xiàn)一個(gè)Web表單生成器，使其可以根據(jù)具體的需求定制不同功能的表單。具體實(shí)現(xiàn)需求如下：

使用多維數(shù)組保存表單的相關(guān)信息 支持的表單項(xiàng)包括文本框、文本域、單選框、復(fù)選框和下拉列表5種類(lèi)型 保存每個(gè)表單項(xiàng)的標(biāo)記、提示文本、屬性、選項(xiàng)值、默認(rèn)值等 將功能封裝成函數(shù)，根據(jù)傳遞的參數(shù)生成指定的表單

數(shù)據(jù)的保存形式?jīng)Q定了程序?qū)崿F(xiàn)的方式。因此，根據(jù)上述開(kāi)發(fā)要求，可以將每個(gè)表單項(xiàng)作為一個(gè)數(shù)組元素，每個(gè)元素利用一個(gè)關(guān)聯(lián)數(shù)組描述，分別為：標(biāo)記tag、提示文本text、屬性數(shù)組attr、選項(xiàng)數(shù)組option和默認(rèn)值default。

3.案例實(shí)現(xiàn)1.準(zhǔn)備表單

表單的主要功能：就是在網(wǎng)頁(yè)上用于輸入信息的區(qū)域，收集用戶(hù)輸入的信息，并將其提交給后端的服務(wù)器進(jìn)行處理，實(shí)現(xiàn)用戶(hù)與服務(wù)器的交互。例如：購(gòu)物結(jié)算、信息搜索等都是通過(guò)表單實(shí)現(xiàn)的。

2.準(zhǔn)備表單——?jiǎng)?chuàng)建表單

一個(gè)完整的表單是由表單域和表單控件組成的。其中，表單域由form標(biāo)記定義，用于實(shí)現(xiàn)用戶(hù)信息的收集和傳遞。

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

“<!-- ?>”是HTML的注釋標(biāo)記，用于解釋和說(shuō)明。

action屬性的值可以是絕對(duì)路徑、相對(duì)路徑，若省略該屬性則表示提交給當(dāng)前文件進(jìn)行處理。 GET方式傳遞的表單在URL地址欄中可見(jiàn)。 相比GET方式，POST方式提交的數(shù)據(jù)是不可見(jiàn)的，在交互時(shí)相對(duì)安全。因此，通常情況下使用POST方式提交表單數(shù)據(jù)。 enctype屬性的默認(rèn)值為application/x-www-form-urlencoded，表示在發(fā)送表單數(shù)據(jù)前編碼所有字符。除此之外還可以設(shè)置為multipart/form-data（POST方式）表示不進(jìn)行字符編碼，尤其是含有文件上傳的表單必須使用該值；設(shè)置為text/plain（POST方式）表示傳輸普通文本。3.準(zhǔn)備表單—表單控件

//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屬性設(shè)置不同的值，即可得到不同的表單控件 name屬性用于指定控件的名稱(chēng)，用以區(qū)分表單中多個(gè)相同的控件 value屬性用于設(shè)置表單控件的默認(rèn)值

//input控件<!-- 單選框 --><input type='radio' name='gender' value='m' checked> 男<input type='radio' name='gender' value='w'> 女<!-- 復(fù)選框 --><input type='checkbox' name='hobby[]' value='swimming'> 游泳<input type='checkbox' name='hobby[]' value='reading'> 讀書(shū)<input type='checkbox' name='hobby[]' value='running'> 跑步 checked屬性用于設(shè)置默認(rèn)選中項(xiàng)

//textarea控件<textarea name='introduce' cols='5' rows='10'><!-- 文本內(nèi)容 --></textarea> textarea控件適用于自我評(píng)價(jià)、評(píng)論等可能需要輸入大量信息的功能 屬性cols和rows用于定義文本域的高度和寬度

//select控件<select name='area'> <option selected>--請(qǐng)選擇--</option> <option value='Beijing'>北京</option> <option value='Shenzhen'>深圳</option> <option value='Shanghai'>上海</option></select> select是定義下拉列表的標(biāo)記 option是定義下拉列表中具體選項(xiàng)的標(biāo)記 selected屬性用于設(shè)置默認(rèn)選中項(xiàng)4.準(zhǔn)備表單—label標(biāo)記

在編寫(xiě)表單控件時(shí)，為了提供更好的用戶(hù)體驗(yàn)，經(jīng)常將input控件與label標(biāo)記聯(lián)合使用，以擴(kuò)大控件的選擇范圍。例如，選擇性別時(shí)，單擊提示文字“男”或“女”，也可選中相應(yīng)的單選按鈕。使用label標(biāo)記包裹單選按鈕和提示文本，即可實(shí)現(xiàn)單擊label標(biāo)記里的內(nèi)容時(shí)，相應(yīng)的表單控件就會(huì)被選中。

<label><input type='radio' name='gender' value='m'>男</label><label><input type='radio' name='gender' value='w'>女</label>5.多維數(shù)組

根據(jù)案例的需求分析可知，表單項(xiàng)的相關(guān)數(shù)據(jù)統(tǒng)一保存到一個(gè)多維數(shù)組中。其中，利用數(shù)字鍵名區(qū)分不同的表單項(xiàng)，每個(gè)表單項(xiàng)又是一個(gè)二維的關(guān)聯(lián)數(shù)組。

// 利用多維數(shù)組保存表單元素[ 0 => [],// 表單項(xiàng)---單選按鈕 1 => [],// 表單項(xiàng) 2 => [],// 表單項(xiàng)---文本框 3 => [],// 表單項(xiàng) ……];

// 每個(gè)表單項(xiàng)的數(shù)組結(jié)構(gòu)0 => [ ’tag’ => ’’, // 標(biāo)記----input、textarea、select ’text’ => ’’, // 提示文本----label標(biāo)簽內(nèi)顯示的內(nèi)容 ’attr’ => [],// 屬性數(shù)組----表單元素的屬性，如type ’option’ => [], // 選項(xiàng)數(shù)組----單選框或復(fù)選框中的每個(gè)選項(xiàng) ’default’ => ’’// 默認(rèn)值----默認(rèn)值],

//準(zhǔn)備表單數(shù)組// $elements數(shù)組保存整個(gè)表單$elements = [ 0 => [],// 第1個(gè)表單項(xiàng)數(shù)組 1 => [],// 第2個(gè)表單項(xiàng)數(shù)組];

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

//單選框3 => [ ’tag’ => ’input’, ’text’ => ’性別：’, ’attr’ => [’type’ => ’radio’, ’name’ => ’gender’], ’option’ => [’m’ => ’男’, ’w’ => ’女’], ’default’ => ’m’ ],

option利用關(guān)聯(lián)數(shù)組保存具體的單選項(xiàng)，鍵名m、w為單選框的value屬性值，對(duì)應(yīng)的值“男”、“女”為該單選項(xiàng)的提示信息default的值為option關(guān)聯(lián)數(shù)組中的一個(gè)鍵名，表示默認(rèn)選中哪一項(xiàng)

//復(fù)選框4 => [ ’tag’ => ’input’, ’text’ => ’愛(ài)好：’, ’attr’ => [’type’ => ’checkbox’, ’name’ => ’hobby[]’], ’option’ => [’swimming’ => ’游泳’, ’reading’ => ’讀書(shū)’, ’running’ => ’跑步’], ’default’ => [’swimming’, ’reading’]],

//下拉列表5 => [ ’tag’ => ’select’, ’text’ => ’住址：’, ’attr’ => [’name’ => ’area’], ’option’ => [’’ => ’--請(qǐng)選擇--’, ’BJ’=>’北京’, ’SH’=>’上海’, ’SZ’=>’深圳’]],

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

//提交按鈕7 => [ ’tag’ => ’input’, ’attr’ => [’type’ => ’submit’, ’value’ => ’提交’]]表單的自動(dòng)生成1.表單的自動(dòng)生成——讀取$elements數(shù)組

實(shí)現(xiàn)思路

為了方便處理用戶(hù)提交的數(shù)據(jù)，將$elements中的每個(gè)表單項(xiàng)與指定的數(shù)組進(jìn)行合并，使得每個(gè)表單項(xiàng)都含有鍵為tag、text、attr、option和default五個(gè)元素，且順序相同。 根據(jù)tag值，分別調(diào)用前綴為“generate_”的函數(shù)進(jìn)行表單項(xiàng)的拼接 每個(gè)表單項(xiàng)占據(jù)一行，并返回拼接好的表單2.表單的自動(dòng)生成——拼接表單元素的屬性

實(shí)現(xiàn)思路

定義函數(shù)generate_attr($attr, $items = ‘’)用于完成表單元素屬性的拼接 $attr數(shù)組中元素的鍵為屬性名稱(chēng)，元素的值為屬性的值 通過(guò)遍歷完成屬性與$items的拼接并返回，如type=“radio” name=“gender”3.表單的自動(dòng)生成——拼接input元素

實(shí)現(xiàn)思路

根據(jù)是否含有option元素，判斷是否是單選或多選 若不是，則直接調(diào)用屬性函數(shù)完成表單項(xiàng)的拼接 若是，則通過(guò)遍歷依次完成多個(gè)選項(xiàng)的拼接并返回 4.表單的自動(dòng)生成——拼接select元素

實(shí)現(xiàn)思路

拼接下拉列表的選項(xiàng)option 完成select標(biāo)記的完整拼接并返回5.表單的自動(dòng)生成——拼接textarea元素

實(shí)現(xiàn)思路

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

更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《php程序設(shè)計(jì)安全教程》、《php安全過(guò)濾技巧總結(jié)》、《PHP基本語(yǔ)法入門(mén)教程》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門(mén)教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫(kù)操作入門(mén)教程》及《php常見(jiàn)數(shù)據(jù)庫(kù)操作技巧匯總》

希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。