第6章-階段案例——Web表單生成器

1、第6章 階段案例Web表單生成器數(shù)組的應(yīng)用函數(shù)的應(yīng)用目錄需求分析6.26.1案例展示案例實(shí)現(xiàn)6.36.1 案例展示樣式一樣式二樣式三6.2 需求分析 在項(xiàng)目的實(shí)際開發(fā)中，經(jīng)常需要設(shè)計(jì)各種各樣表單。直接編寫HTML表單雖然簡(jiǎn)單，但修改、維護(hù)相對(duì)麻煩。 因此，可以利用PHP實(shí)現(xiàn)一個(gè)Web表單生成器，使其可以根據(jù)具體的需求定制不同功能的表單。具體實(shí)現(xiàn)需求如下：6.2 需求分析使用多維數(shù)組保存表單的相關(guān)信息支持的表單項(xiàng)包括文本框、文本域、單選框、復(fù)選框和下拉列表5種類型保存每個(gè)表單項(xiàng)的標(biāo)記、提示文本、屬性、選項(xiàng)值、默認(rèn)值等將功能封裝成函數(shù)，根據(jù)傳遞的參數(shù)生成指定的表單6.2 需求分析數(shù)據(jù)的保存形式?jīng)Q定

2、了程序?qū)崿F(xiàn)的方式。因此，根據(jù)上述開發(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。6.3 案例實(shí)現(xiàn)準(zhǔn)備表單表單的主要功能：就是在網(wǎng)頁(yè)上用于輸入信息的區(qū)域，收集用戶輸入的信息，并將其提交給后端的服務(wù)器進(jìn)行處理，實(shí)現(xiàn)用戶與服務(wù)器的交互。例如：購(gòu)物結(jié)算、信息搜索等都是通過表單實(shí)現(xiàn)的。6.3 案例實(shí)現(xiàn)準(zhǔn)備表單創(chuàng)建表單一個(gè)完整的表單是由表單域和表單控件組成的。其中，表單域由form標(biāo)記定義，用于實(shí)現(xiàn)用戶信息的收集和傳遞。 “”是HTML的注釋標(biāo)記，用于解釋和說(shuō)明。6.3 案例實(shí)現(xiàn)準(zhǔn)

3、備表單創(chuàng)建表單屬性名稱說(shuō)明action指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的URL地址method設(shè)置表單數(shù)據(jù)的提交方式，常用的有GET和POST方式，默認(rèn)值為GETenctype規(guī)定發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼action屬性的值可以是絕對(duì)路徑、相對(duì)路徑，若省略該屬性則表示提交給當(dāng)前文件進(jìn)行處理。GET方式傳遞的表單在URL地址欄中可見。相比GET方式，POST方式提交的數(shù)據(jù)是不可見的，在交互時(shí)相對(duì)安全。因此，通常情況下使用POST方式提交表單數(shù)據(jù)。6.3 案例實(shí)現(xiàn)準(zhǔn)備表單創(chuàng)建表單enctype屬性的默認(rèn)值為application/x-www-form-urlencoded，表示

4、在發(fā)送表單數(shù)據(jù)前編碼所有字符。除此之外還可以設(shè)置為multipart/form-data（POST方式）表示不進(jìn)行字符編碼，尤其是含有文件上傳的表單必須使用該值；設(shè)置為text/plain（POST方式）表示傳輸普通文本。6.3 案例實(shí)現(xiàn)準(zhǔn)備表單表單控件 input控件type屬性設(shè)置不同的值，即可得到不同的表單控件name屬性用于指定控件的名稱，用以區(qū)分表單中多個(gè)相同的控件value屬性用于設(shè)置表單控件的默認(rèn)值6.3 案例實(shí)現(xiàn)準(zhǔn)備表單表單控件 男 女 游泳 讀書 跑步input控件checked屬性用于設(shè)置默認(rèn)選中項(xiàng)6.3 案例實(shí)現(xiàn)準(zhǔn)備表單表單控件textarea控件textarea控件適用

5、于自我評(píng)價(jià)、評(píng)論等可能需要輸入大量信息的功能屬性cols和rows用于定義文本域的高度和寬度6.3 案例實(shí)現(xiàn)準(zhǔn)備表單表單控件 -請(qǐng)選擇- 北京 深圳 上海select控件select是定義下拉列表的標(biāo)記option是定義下拉列表中具體選項(xiàng)的標(biāo)記selected屬性用于設(shè)置默認(rèn)選中項(xiàng)6.3 案例實(shí)現(xiàn)準(zhǔn)備表單label標(biāo)記在編寫表單控件時(shí)，為了提供更好的用戶體驗(yàn)，經(jīng)常將input控件與label標(biāo)記聯(lián)合使用，以擴(kuò)大控件的選擇范圍。例如，選擇性別時(shí)，單擊提示文字“男”或“女”，也可選中相應(yīng)的單選按鈕。6.3 案例實(shí)現(xiàn)準(zhǔn)備表單label標(biāo)記使用label標(biāo)記包裹單選按鈕和提示文本，即可實(shí)現(xiàn)單擊labe

6、l標(biāo)記里的內(nèi)容時(shí)，相應(yīng)的表單控件就會(huì)被選中。男女6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)根據(jù)案例的需求分析可知，表單項(xiàng)的相關(guān)數(shù)據(jù)統(tǒng)一保存到一個(gè)多維數(shù)組中。其中，利用數(shù)字鍵名區(qū)分不同的表單項(xiàng)，每個(gè)表單項(xiàng)又是一個(gè)二維的關(guān)聯(lián)數(shù)組。6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)數(shù)據(jù)的保存形式/ 利用多維數(shù)組保存表單元素 0 = ,/ 表單項(xiàng) 1 = ,/ 表單項(xiàng) 2 = ,/ 表單項(xiàng) 3 = ,/ 表單項(xiàng) ;單選按鈕文本框6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)數(shù)據(jù)的保存形式/ 每個(gè)表單項(xiàng)的數(shù)組結(jié)構(gòu)0 = tag = , / 標(biāo)記 text = , / 提示文本 attr = ,/ 屬性數(shù)組 option = , / 選項(xiàng)數(shù)組 d

7、efault = / 默認(rèn)值,input、textarea、selectlabel標(biāo)簽內(nèi)顯示的內(nèi)容表單元素的屬性，如type單選框或復(fù)選框中的每個(gè)選項(xiàng)默認(rèn)值6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)準(zhǔn)備表單生成數(shù)據(jù)/ $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,準(zhǔn)備表單數(shù)組文本框6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)準(zhǔn)備表單生成數(shù)據(jù)3 = tag = input, text = 性別：, attr = type

8、= 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)6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)準(zhǔn)備表單生成數(shù)據(jù)4 = tag = input, text = 愛好：, attr = type = checkbox, name = hobby, option = swimming = 游泳, reading = 讀書, running = 跑

9、步, default = swimming, reading,復(fù)選框6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)準(zhǔn)備表單生成數(shù)據(jù)5 = tag = select, text = 住址：, attr = name = area, option = = -請(qǐng)選擇-, BJ=北京, SH=上海, SZ=深圳,下拉列表6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)準(zhǔn)備表單生成數(shù)據(jù)6 = tag = textarea, text = 自我介紹：, attr = name = introduce, cols = 50, rows = 5,文本域6.3 案例實(shí)現(xiàn)多維數(shù)組保存數(shù)據(jù)準(zhǔn)備表單生成數(shù)據(jù)7 = tag = input, att

10、r = type = submit, value = 提交提交按鈕6.3 案例實(shí)現(xiàn)表單的自動(dòng)生成定義表單生成函數(shù)實(shí)現(xiàn)思路按照指定的格式保存待生成表單的數(shù)據(jù)，如$elements數(shù)組自定義表單生成函數(shù)generate()，將函數(shù)的返回值輸出到對(duì)應(yīng)的HTML表單中6.3 案例實(shí)現(xiàn)表單的自動(dòng)生成讀取$elements數(shù)組實(shí)現(xiàn)思路為了方便處理用戶提交的數(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ù)一行，并返回拼接好的表單6.3 案例實(shí)現(xiàn)表單的自動(dòng)生成拼接表單元素的屬性實(shí)現(xiàn)思路定義函數(shù)generate_attr($attr, $items = )用于完成表單元素屬性的拼接$attr數(shù)組中元素的鍵為屬性名稱，元素的值為屬性的值通過遍歷完成屬性與$items的拼接并返回，如type=radio name=gender6.3 案例實(shí)現(xiàn)表單的自動(dòng)生成拼接input元素實(shí)現(xiàn)思路根據(jù)是否含有option元素，判斷是否是單選或