PHP筆記(二) HTML表單

多數PHP程序都使用HTML表單從用戶那里獲取數據并計算結果。

HTML表單的一些基本原則

選擇適合于收集的數據類型和提供交互方式的控件。
清楚標記每一個控件，這樣用戶就可以理解其功能。
盡可能將標簽對齊。將控件的左邊緣對齊。
將相關的標簽分組，并且通過設計中使用空白將每一個分組分開。
表單上的控件順序應該類似于用戶操作他們的順序。

創建基本HTML表單

首先創造一個基本的HTML大綱，包含表單控件；然后將控件進行合并（HTML表單必須包括一個提交按鈕，用戶單擊它可以將表單數據發送到服務器。）一個單獨的HTML頁面可以包含多個表單。

創建HTML結構

包含表單的HTML結構和和普通的HTML結構一樣。

<HTML>
  <HEAD>
  <TITLE>標題放在這</TITLE>
  </HEAD>
<BODY>
  表單頁面放在這
  </BODY>
  </HTML>

在包含表單的HTML頁面中可以使用任何HTML標簽。基本的表單使用FROM標簽來說明。該標簽中METHOD屬性接收GET或POST兩個值中的一個。ACTION屬性子明PHP腳本的url，該腳本可以收集通過表單收集的數據，可以是絕對路徑或者相對路徑。

<FORM METHOD="method" ACTION="url"> 
  中間可以放置表單控件
  </FORM>

合并控件

兩個常用的基本控件：文本框和提交按鈕。

文本框：允許用戶鍵入信息以發送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過名稱準確訪問其內容，因此它應該是唯一的且符合PHP變量命名規則（但不需要$符號），單標簽。VALUE屬性指明出現在提交按鈕上面的標題。創建方式如下：

<INPUT TYPE = "TEXT" NAME="text">

提交按鈕：允許用戶將一個表單的內容發送到服務器，一個HTML表單對應應該有一個提交按鈕。

示例：一個完整的HTML表單。

<HTML>
  <HEAD>
  <TITLE>標題</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>

使用多個表單

可以在一個HTML頁面中包含多個表單，注意下一個表單的FORM開始之前需要結束前一個FORM表單。

<HTML>
  <HEAD>
  <TITLE>標題</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>

創建表單控件

創建自定義的文本框

文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設置文本框的可視大小；MAXLENGTH指明用戶鍵入字符的最大長度；VALUE給出了一個最初顯示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">

創建文本區域

文本區域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區域內可以看到的文本行數，充滿時會滾動。COLS屬性指明可見文本列數與行數類似。WRAP屬性指明文本區域內單詞換行的方式，可以指定如下值。該標簽為雙標簽。

值	說明
off	禁止單詞換行但用戶可以輸入換行符強制換行
virtual/soft	各行顯示為換行，但是換行并沒有被發送到服務器
physica/hard	啟用了單詞換行

<inputarea name="" rows="" cols="" wrap="">

創建密碼框

創建密碼框的語法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">

創建復選框

取兩個值中的一個，即二選一。TYPE屬性是必須的，checked屬性出現，該復選框默認情況會被選定。value屬性指定復選框被選定情況下被發送到服務器的值，默認發送on值。法如下：

<input type="checkbox" name="" checked value="">

創建單選按鈕

語法與復選框屬性含義相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。

<input type="radio" name="" checked value="">

創建列表框

用戶可以選擇一個或者多個選項，它是一個滾動菜單。

<select name="" multipile size="">options go here</select>

name屬性是必須的，multipile屬性指明用戶可以通過按下crtl鍵并單擊多個選項來選擇它們

列表框的單選行為可作為單選按鈕。

<option selected value="text"></options>

創建隱藏域

<input type="hidden" name="text"value="">

實現上傳文件的HTML表單

<input type="FILE" name="name" accept="time" value="text">

其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下：

超文本標記語言文本 .html,.html text/html

　　普通文本：txt text/plain

　　word文檔：application/msword

　　RTF文本：rtf application/rtf

　　GIF圖形：gif image/gif

　　JPEG圖形：jpeg,

　　jpg： image/jpeg

　　au聲音文件：au audio/basic

　　MIDI音樂文件：mid,.midi audio/midi,audio/x-midi

　　RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　壓縮文件.rar application/octet-stream

　　壓縮文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

更多提交表單的信息

使用圖像提交數據

<input type="image" src="url" name="text" align="align">

創建重置按鈕

<input type="reset" value="text">

.引用相關頭文件

引入CSS：

引入JS：

因為jqGrid3.6及以后的版本集成了jQuery UI，所以，此處需要導入UI相關js和css。另外grid.locale-en.js這個語言文件必須在jquery.jqGrid.min.js之前加載，否則會出問題。

2.將jqgrid加入頁面中

根據jqGrid的文檔，要想生成一個jqGrid，最直接的方法就是：

$("#list").jqGrid(options);

其中list是頁面上的一個table：<table id="list"></table>

下面是一個簡單的例子：

$(document).ready(function () {

jQuery("#list").jqGrid({

url: 'Handler.ashx',

datatype: "json",

mtype: 'GET',

colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],

colModel: [

{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },

{ name: 'Name', index: 'Name', width: 100, align: "center" },

{ name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },

{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }

rowList: [10, 20, 30],

sortname: 'SalesReasonID',

viewrecords: true,

sortorder: "desc",

jsonReader: {

root: "griddata",

total: "totalpages",

page: "currpage",

records: "totalrecords",

repeatitems: false

pager: jQuery('#pager'),

rowNum: 5,

altclass: 'altRowsColour',

//width: 'auto',

width: '500',

height: 'auto',

caption: "DemoGrid"

}).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;

})

二、 jqgrid的重要選項

具體的options參考，可以訪問jqGrid文檔關于option的章節（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個是比較常用的，重點介紹一下：

url ：jqGrid控件通過這個參數得到需要顯示的數據，具體的返回值可以使XML也可以是Json。
datatype ：這個參數用于設定將要得到的數據類型。類型包括：json 、xml、xmlstring、local、javascript、function。
mtype : 定義使用哪種方法發起請求，GET或者POST。
height ：Grid的高度，可以接受數字、%值、auto，默認值為150。
width ：Grid的寬度，如果未設置，則寬度應為所有列寬的之和；如果設置了寬度，則每列的寬度將會根據shrinkToFit選項的設置，進行設置。
shrinkToFit ：此選項用于根據width計算每列寬度的算法。默認值為true。如果shrinkToFit為true且設置了width值，則每列寬度會根據width成比例縮放；如果shrinkToFit為false且設置了width值，則每列的寬度不會成比例縮放，而是保持原有設置，而Grid將會有水平滾動條。
autowidth ：默認值為false。如果設為true，則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段；如果當父容器尺寸變化了，同時也需要變化Grid的尺寸的話，則需要在自己的代碼中調用setGridWidth方法來完成。
pager ：定義頁碼控制條Page Bar，在上面的例子中是用一個div(<div id=”pager”></div>)來放置的。
sortname ：指定默認的排序列，可以是列名也可以是數字。此參數會在被傳遞到Server端。
viewrecords ：設置是否在Pager Bar顯示所有記錄的總數。
caption ：設置Grid表格的標題，如果未設置，則標題區域不顯示。
rowNum ：用于設置Grid中一次顯示的行數，默認值為20。正是這個選項將參數rows（prmNames中設置的）通過url選項設置的鏈接傳遞到Server。注意如果Server返回的數據行數超過了rowNum的設定，則Grid也只顯示rowNum設定的行數。
rowList ：一個數組，用于設置Grid可以接受的rowNum值。例如[10,20,30]。
colNames ：字符串數組，用于指定各列的題頭文本，與列的順序是對應的。
colModel ：最重要的數組之一，用于設定各列的參數。（稍后詳述）
prmNames ：這是一個數組，用于設置jqGrid將要向Server傳遞的參數名稱。（稍后詳述）
jsonReader ：這又是一個數組，用來設定如何解析從Server端發回來的json數據。（稍后詳述）

2.1 prmNames選項

prmNames是jqGrid的一個重要選項，用于設置jqGrid將要向Server傳遞的參數名稱。其默認值為：

prmNames : {

page:"page", // 表示請求頁碼的參數名稱

rows:"rows", // 表示請求行數的參數名稱

sort: "sidx", // 表示用于排序的列名的參數名稱

order: "sord", // 表示采用的排序方式的參數名稱

search:"_search", // 表示是否是搜索請求的參數名稱

nd:"nd", // 表示已經發送請求的次數的參數名稱

id:"id", // 表示當在編輯數據模塊中發送數據時，使用的id的名稱

oper:"oper", // operation參數名稱

editoper:"edit", // 當在edit模式中提交數據時，操作的名稱

addoper:"add", // 當在add模式中提交數據時，操作的名稱

deloper:"del", // 當在delete模式中提交數據時，操作的名稱

subgridid:"id", // 當點擊以載入數據到子表時，傳遞的數據名稱

npage: null,

totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱，參見jqGrid選項中的rowTotal

}

2.2 jsonReader選項

jsonReader是jqGrid的一個重要選項，用于設置如何解析從Server端發回來的json數據，如果Server返回的是xml數據，則對應的使用xmlReader來解析。jsonReader的默認值為：

jsonReader : {

root: "rows", // json中代表實際模型數據的入口

page: "page", // json中代表當前頁碼的數據

total: "total", // json中代表頁碼總數的數據

records: "records", // json中代表數據行總數的數據

repeatitems: true, // 如果設為false，則jqGrid在解析json時，會根據name來搜索對應的數據元素（即可以json中元素可以不按順序）；而所使用的name是來自于colModel中的name設定。

cell: "cell",

id: "id",

userdata: "userdata",

subgrid: {

root:"rows",

repeatitems: true,

cell:"cell"

}

假如有下面一個json字符串：

{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}

其對應的jsonReader為：jsonReader: {

root: "griddata",

total: "totalpages",

page: "currpage",

records: "totalrecords",

repeatitems: false

}

注：cell、id在repeatitems為true時可以用到，即每一個記錄是由一對id和cell組合而成，即可以適用另一種json結構。援引文檔中的例子：

repeatitems為true時：

jQuery("#gridid").jqGrid({

...

jsonReader : {

root:"invdata",

page: "currpage",

total: "totalpages",

records: "totalrecords"

...

});

json結構為：

{

"totalpages": "xxx",

"currpage": "yyy",

"totalrecords": "zzz",

"invdata" : [

{"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name，只要值就OK了，但是需要保持對應

{"id" :"2", "cell" :["cell21", "cell22", "cell23"]},

...

]

}

repeatitems為false時：

jQuery("#gridid").jqGrid({

...

jsonReader : {

root:"invdata",

page: "currpage",

total: "totalpages",

records: "totalrecords",

repeatitems: false,

id: "0"

...

});

json結構為：

{

"totalpages" : "xxx",

"currpage" : "yyy",

"totalrecords" : "zzz",

"invdata" : [

{"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 數據中需要各列的name，但是可以不按列的順序

{"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},

...

]

}

2.3 colModel的重要選項

colModel也有許多非常重要的選項，在使用搜索、排序等方面都會用到。這里先只說說最基本的。

name ：為Grid中的每個列設置唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。
index ：設置排序時所使用的索引名稱，這個index名稱會作為sidx參數（prmNames中設置的）傳遞到Server。
label ：當jqGrid的colNames選項數組為空時，為各列指定題頭。如果colNames和此項都為空時，則name選項值會成為題頭。
width ：設置列的寬度，目前只能接受以px為單位的數值，默認為150。
sortable ：設置該列是否可以排序，默認為true。
search ：設置該列是否可以被列為搜索條件，默認為true。
resizable ：設置列是否可以變更尺寸，默認為true。
hidden ：設置此列初始化時是否為隱藏狀態，默認為false。
formatter ：預設類型或用來格式化該列的自定義函數名。常用預設格式有：integer、date、currency、number等（具體參見文檔）。

三、注意事項

1. 動態改變Add Form或者Edit Form中的select的內容，如：改變下圖中的Comparator下拉中的內容。

$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},

{

checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,

beforeInitData:function(formid){

initComparator();

beforeShowForm: function(formid){

$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});

$('#tr_Name', formid).hide();

}

}，//edit

{},//add

{}//del

）

beforeInitData, beforeShowForm在每次點擊編輯的時候都會執行。initComparator的作用是通過ajax獲取數據，然后利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });來設置Comparator下拉中的內容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。鍵值之間用冒號隔開，2項之間用分號隔開。注意：把recreateForm設為true，否則'setColProp'只在第一次調用時有效。

2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到數據條數。

3. jQuery("#list_d").clearGridData();清空數據。

4. jQuery("#list").getCell(ids,"Key");獲取第ids行的key列。

5. $("#list").jqGrid('setSelection', "1");選中第一行。放在loadComplete：中在gird加載完成的時候自動選中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");

}

6. 對于像1中的可編輯的字段，可以設定rule，參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules

7. 修改Option，以URL為例

jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');

、html表單控件

<input type="radio"  name="nw" value="1" title="內網" checked="" runat="server">
<input type="radio" name="nw" value="2" title="外網" runat="server">

獲取值：

在線咨詢

上一篇：這份雅思學習資源白嫖指南，建議收藏
下一篇：用HTML怎么制作網頁呢?

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

PHP筆記(二) HTML表單

HTML表單的一些基本原則

創建基本HTML表單

創建表單控件

更多提交表單的信息

您的項目需求