PHP筆記(二) HTML表單

多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計(jì)算結(jié)果。

HTML表單的一些基本原則

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

創(chuàng)建基本HTML表單

首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁面可以包含多個(gè)表單。

創(chuàng)建HTML結(jié)構(gòu)

包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。

<HTML>
  <HEAD>
  <TITLE>標(biāo)題放在這</TITLE>
  </HEAD>
<BODY>
  表單頁面放在這
  </BODY>
  </HTML>

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

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

合并控件

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

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

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

提交按鈕：允許用戶將一個(gè)表單的內(nèi)容發(fā)送到服務(wù)器，一個(gè)HTML表單對(duì)應(yīng)應(yīng)該有一個(gè)提交按鈕。

示例：一個(gè)完整的HTML表單。

<HTML>
  <HEAD>
  <TITLE>標(biāo)題</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>

使用多個(gè)表單

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

<HTML>
  <HEAD>
  <TITLE>標(biāo)題</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>

創(chuàng)建表單控件

創(chuàng)建自定義的文本框

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

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

創(chuàng)建文本區(qū)域

文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時(shí)會(huì)滾動(dòng)。COLS屬性指明可見文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。

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

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

創(chuàng)建密碼框

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

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

創(chuàng)建復(fù)選框

取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會(huì)被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：

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

創(chuàng)建單選按鈕

語法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。

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

創(chuàng)建列表框

用戶可以選擇一個(gè)或者多個(gè)選項(xiàng)，它是一個(gè)滾動(dòng)菜單。

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

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

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

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

創(chuàng)建隱藏域

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

實(shí)現(xiàn)上傳文件的HTML表單

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

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

超文本標(biāo)記語言文本 .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

更多提交表單的信息

使用圖像提交數(shù)據(jù)

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

創(chuàng)建重置按鈕

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

紹input[type="hidden"],input[type="file"]兩種特殊的表單元素，readonly disabled只讀屬性與禁用屬性的區(qū)別于使用場景。

單的作用就是采集用戶填寫的信息,將其發(fā)往服務(wù)器做相應(yīng)的處理

表單的元素必須寫在form標(biāo)簽中,一個(gè)form就是一個(gè)表單,表單中最重要的元素是input

input元素有一個(gè)type屬性,type的可選值有：1)button(普通按鈕)2checkbox(復(fù)選框)3text(單行文本框)4password(密碼框)5radio(單選按鈕)6image(圖片按鈕)7file(文件選擇框)8hidden(隱藏字段)9<input type="file" />submit(提交按鈕)10reset(重置按鈕)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>表單元素</title>
</head>
<body>
    <form action="http://www.bd.com/register.aspx" method="post">
        用 戶 名:<input type="text" value="張三" size="8" name="txtName" /><br /><br />
        用戶密碼:<input type="password" size="8" /><br /><br />
        用戶性別:<input type="radio" name="rdGender" value="1" />男<input type="radio" name="rdGender"
            value="0" />女<br /><br />
        興趣愛好:<input type="checkbox" value="0" checked="checked" />乒乓球<input type="checkbox" value="1" />籃球<input
            type="checkbox" value="2" />排球<br /><br />
        省市選擇:省:<select>
            <option value="0">北京</option>
            <option selected="selected" value="1">河南</option>
            <option value="2">河北</option>
        </select>
        市:<select>
            <option value="0">密云</option>
            <option selected="selected" value="1">鄭州</option>
            <option value="2">石家莊</option>
        </select><br /><br />
        上傳文件:<input type="file" /><br/><br/>
        <textarea cols="50" rows="10" readonly="readonly">
				北京百度網(wǎng)訊科技有限公司
				統(tǒng)一社會(huì)信用代碼/注冊號(hào)：91110000802100433B
				注冊資本：1342128萬元
				法定代表人：梁志祥
				成立日期：2001-06-05
				營業(yè)期限：2001-06-05 至 長期
				企業(yè)類型：有限責(zé)任公司(自然人投資或控股)
				注冊地址：北京市海淀區(qū)上地十街10號(hào)百度大廈2層
				經(jīng)營范圍：技術(shù)轉(zhuǎn)讓、技術(shù)咨詢、技術(shù)服務(wù)、技術(shù)培訓(xùn)、技術(shù)推廣；設(shè)計(jì)、開發(fā)、銷售計(jì)算機(jī)軟件；經(jīng)濟(jì)信息咨詢；利用www.baidu.com、www.hao123.com(www.hao222.net、www.hao222.com)網(wǎng)站發(fā)布廣告；設(shè)計(jì)、制作、代理、發(fā)布廣告；貨物進(jìn)出口、技術(shù)進(jìn)出口、代理進(jìn)出口；醫(yī)療軟件技術(shù)開發(fā)；委托生產(chǎn)電子產(chǎn)品、玩具、照相器材；銷售家用電器、機(jī)械設(shè)備、五金交電（不含電動(dòng)自行車）、電子產(chǎn)品、文化用品、照相器材、計(jì)算機(jī)、軟件及輔助設(shè)備、化妝品、衛(wèi)生用品、體育用品、紡織品、服裝、鞋帽、日用品、家具、首飾、避孕器具、工藝品、鐘表、眼鏡、玩具、汽車及摩托車配件、儀器儀表、塑料制品、花、草及觀賞植物、建筑材料、通訊設(shè)備、汽車電子產(chǎn)品、器件和元件、自行開發(fā)后的產(chǎn)品；預(yù)防保健咨詢；公園門票、文藝演出、體育賽事、展覽會(huì)票務(wù)代理；翻譯服務(wù)；通訊設(shè)備和電子產(chǎn)品的技術(shù)開發(fā)；計(jì)算機(jī)系統(tǒng)服務(wù)；車聯(lián)網(wǎng)技術(shù)開發(fā)；汽車電子產(chǎn)品設(shè)計(jì)、研發(fā)、制造（北京市中心城區(qū)除外）；演出經(jīng)紀(jì)；人才中介服；經(jīng)營電信業(yè)務(wù)；利用信息網(wǎng)絡(luò)經(jīng)營音樂娛樂產(chǎn)品、演出劇（節(jié)）目、動(dòng)漫產(chǎn)品、游戲產(chǎn)品（含網(wǎng)絡(luò)游戲虛擬貨幣發(fā)行）、表演、網(wǎng)絡(luò)游戲技法展示或解說（網(wǎng)絡(luò)文化經(jīng)營許可證有效期至2020年04月17日）；因特網(wǎng)信息服務(wù)業(yè)務(wù)（除出版、教育、醫(yī)療保健以外的內(nèi)容）；圖書、電子出版物、音像制品批發(fā)、零售、網(wǎng)上銷售。（市場主體依法自主選擇經(jīng)營項(xiàng)目，開展經(jīng)營活動(dòng)；演出經(jīng)紀(jì)、人才中介服務(wù)、利用信息網(wǎng)絡(luò)經(jīng)營音樂娛樂產(chǎn)品、演出劇（節(jié)）目、動(dòng)漫產(chǎn)品、游戲產(chǎn)品（含網(wǎng)絡(luò)游戲虛擬貨幣發(fā)行）、表演、網(wǎng)絡(luò)游戲技法展示或解說、經(jīng)營電信業(yè)務(wù)以及依法須經(jīng)批準(zhǔn)的項(xiàng)目，經(jīng)相關(guān)部門批準(zhǔn)后依批準(zhǔn)的內(nèi)容開展經(jīng)營活動(dòng)；不得從事國家和本市產(chǎn)業(yè)政策禁止和限制類項(xiàng)目的經(jīng)營活動(dòng)。）
			</textarea><br /><br />
        <input type="button" value="按鈕" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

還有一些次要的表單元素以后需要用到再說;關(guān)于瀏覽器兼容性自己測試不再截圖

絕大多數(shù)表單元素必須有name與value屬性,這樣的表單元素才能將此元素的的value值傳遞給服務(wù)器;如果method屬性值為get,點(diǎn)擊submit這個(gè)按鈕時(shí)在網(wǎng)址中就能看到填寫的值

如果是radio(單選按鈕)name屬性值必須一樣,這樣此元素值就會(huì)只能選擇其中一個(gè)

button:只是一個(gè)普通按鈕,以后會(huì)通過JavaScript進(jìn)行操作;submit:自動(dòng)將填寫在此網(wǎng)頁表單元素的值發(fā)送給action指定的服務(wù)器相應(yīng)的程序去處理;reset:將表單元素中填入的值還原為默認(rèn)值

HTML表單

在線咨詢

上一篇：JavaScript 語句
下一篇：基于WebGL無插件虛擬場景漫游技術(shù)如何構(gòu)建？ThingJS

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。