建立表單頁面課件

第11章建立表單頁面1第11章建立表單頁面1本章目標(biāo)：什么是表單表單標(biāo)記<FORM>輸入標(biāo)記<INPUT>菜單和列表標(biāo)記<SELECT>文字域標(biāo)記<TEXTAREA>本章目標(biāo)：什么是表單表單示例表單示例11.1什么是表單1、概念：表單是實(shí)現(xiàn)動態(tài)網(wǎng)頁的一種主要的外在形式，是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段，利用表單可以收集客戶端提供的有關(guān)信息。2、功能：表單的主要功能是收集信息，具體說是收集瀏覽者的信息。可用于調(diào)查、定購、搜索等功能。11.1什么是表單1、概念：11.1什么是表單3、組成：①描述表單元素的HTML源代碼；②客戶端的腳本，或者服務(wù)器端用來處理用戶用戶所填信息的程序。4、處理過程：當(dāng)單擊表單中的提交按鈕時(shí)，輸入在表單中的信息就會上傳到服務(wù)器中，然后由服務(wù)器的有關(guān)應(yīng)用程序進(jìn)行處理，處理后或者將用戶提交的信息存儲在服務(wù)器端的數(shù)據(jù)庫中，或者將有關(guān)的信息返回到客戶端瀏覽器上。11.1什么是表單3、組成：1、基本語法：

<FORMname=“form_name”method=“method”action=“url”enctype=“value”

target=“target_win”>……</FORM>11.2表單標(biāo)記<FORM>1、基本語法：11.2表單標(biāo)記<FORM>屬性描述NAME表單的名稱METHOD定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get和postACTION用來定義表單處理程序（一個(gè)ASP，CGI等程序）的位置（相對地址或絕對地址）ENCTYPE設(shè)置表單資料的編碼方式TARGET設(shè)置返回信息的顯示方式<FORM>標(biāo)記屬性屬性描述NAME表單的名稱METHOD定義表單結(jié)果從1、基本語法：

<FORMname=“from_name”>……

</FORM>2、語法解釋：

通過為表單命名可以控制表單與后臺程序之間的關(guān)系。

3、文件范例：11-1.htm11.2.1<FORM>標(biāo)記的NAME屬性1、基本語法：11.2.1<FORM>標(biāo)記的NAME屬性1、基本語法：

<FORMaction=“URL”>……

</FORM>2、語法解釋：

在action屬性中定義表單提交的地址。

3、文件范例：11-2.htm11.2.2<FORM>標(biāo)記的action屬性1、基本語法：11.2.2<FORM>標(biāo)記的action屬1、基本語法：

<FORMmethod=“method”>……

</FORM>2、語法解釋：定義提交表單的方法，有g(shù)et和post兩種方法。區(qū)別見下表。

3、文件范例：11-3.htm11.2.3<FORM>標(biāo)記的method屬性1、基本語法：11.2.3<FORM>標(biāo)記的method屬get和post的區(qū)別：

區(qū)別方法地址欄信息長度保密性非ASCII碼字符GET將表單內(nèi)容附加在URL地址后面有限制，不超過8192個(gè)字符不具有保密性不傳送POST不顯示提交信息無限制具有保密性傳送get和post的區(qū)別：區(qū)別地址欄1、基本語法：

<FORMenctype=“value”>……

</FORM>2、語法解釋：

value的取值見下表。3、文件范例：11-4.htm11.2.4<FORM>標(biāo)記的enctype屬性1、基本語法：11.2.4<FORM>標(biāo)記的enctypeenctype屬性值屬性值描述Text/plain以純文本形式傳送信息Application或x-www-Form-urlencoded默認(rèn)的編碼方式Multipart或Form-data使用MINE編碼enctype屬性值屬性值描述Text/plain以純1、基本語法：

<FORMtarget=“target-win”>……

</FORM>2、語法解釋：

設(shè)置表單信息返回的窗口，target的取值見下表。

3、文件范例：11-5.htm11.2.5<FORM>標(biāo)記的target屬性1、基本語法：11.2.5<FORM>標(biāo)記的target屬target屬性值屬性值描述_blank將返回信息顯示在新開的瀏覽器窗口中_parent將返回信息顯示在父級瀏覽器窗口中_self將返回信息顯示在當(dāng)前瀏覽器窗口中_top將返回信息顯示在頂級瀏覽器窗口中target屬性值屬性值描述_blank將返回信息顯<FORM>標(biāo)記內(nèi)的標(biāo)記標(biāo)記描述<INPUT>表單輸入標(biāo)記<SELECT>菜單和列表標(biāo)記<OPTION>菜單和列表項(xiàng)目標(biāo)記<TEXTAREA>文字域標(biāo)記<FORM>標(biāo)記內(nèi)的標(biāo)記標(biāo)記描述<INPUT>表單輸示例：<FORM><input>…</input><textarea>…<textarea><select><option>…</option></select></FORM>示例：<FORM>1、基本語法：

<form>

<inputname=“field_name”type=“type_name”></form>2、語法解釋：

name指域的名稱，type指域的類型。type屬性值見下表。

11.3輸入標(biāo)記<INPUT>1、基本語法：11.3輸入標(biāo)記<INPUT>type屬性值屬性值描述屬性值描述text文字域button普通按鈕password密碼域submit提交按鈕file文件域reset重置按鈕checkbox復(fù)選框hidden隱藏域radio單選框image圖像域type屬性值屬性值描述屬性值描述text文字域1、基本語法：

<INPUTtype=“text”name=“field_name”maxlength=valuesize=valuevalue=“field_value”>2、語法解釋：

這些屬性的含義見下表。

3、文件范例：11-6.htm11.3.1文字域text1、基本語法：11.3.1文字域text文字域?qū)傩晕淖钟驅(qū)傩悦枋鰊ame文字域的名稱maxlength文字域的最大可輸入字符數(shù)size文字域的寬度（以字符為單位）value文字域的默認(rèn)值文字域?qū)傩晕淖钟驅(qū)傩悦枋鰊ame文字域的名稱maxle1、基本語法：

<INPUTtype=“password”name=“field_name”maxlength=valuesize=valuevalue=field_value>2、語法解釋：

這些屬性的含義見下表。

3、文件范例：11-7.htm11.3.2密碼域password1、基本語法：11.3.2密碼域password密碼域?qū)傩悦艽a域?qū)傩悦枋鰊ame密碼域的名稱maxlength密碼域的最大可輸入字符數(shù)size密碼域的寬度（以字符為單位）value密碼域的默認(rèn)值密碼域?qū)傩悦艽a域?qū)傩悦枋鰊ame密碼域的名稱maxle1、基本語法：

<INPUTtype=“file”name=“field_name”>2、語法解釋：

讓用戶在域的內(nèi)部填寫自己硬盤中的文件路徑，然后通過表單上傳。

3、文件范例：11-8.htm11.3.3文件域file1、基本語法：11.3.3文件域file1、基本語法：

<INPUTtype=“checkbox”name=“field_name”value=“value”checked>2、語法解釋：

checked表示此項(xiàng)被默認(rèn)選中，value表示選中項(xiàng)目后傳送到服務(wù)器端的值。

3、文件范例：11-9.htm11.3.4復(fù)選框checkbox1、基本語法：11.3.4復(fù)選框checkbox1、基本語法：

<INPUTtype=“radio”name=“field_name”value=“value”checked>2、語法解釋：

checked表示此項(xiàng)被默認(rèn)選中，value表示選中項(xiàng)目后傳送到服務(wù)器端的值。

3、文件范例：11-10.htm11.3.5單選框radio1、基本語法：11.3.5單選框radio1、基本語法：

<INPUTtype=“button”name=“field_name”value=“button_text”>2、語法解釋：

value值代表顯示在按鈕上面的文字。

3、文件范例：11-11.htm11.3.6普通按鈕BUTTON1、基本語法：11.3.6普通按鈕BUTTON1、基本語法：

<INPUTtype=“submit”name=“field_name”value=“button_text”>2、語法解釋：

單擊提交按鈕后，可以實(shí)現(xiàn)表單內(nèi)容的提交。

3、文件范例：11-12.htm11.3.7提交按鈕SUBMIT1、基本語法：11.3.7提交按鈕SUBMIT1、基本語法：

<INPUTtype=“reset”name=“field_name”value=“button_text”>2、語法解釋：

單擊重置按鈕后，可以清除表單的內(nèi)容，恢復(fù)默認(rèn)的表單內(nèi)容設(shè)定。

3、文件范例：11-13.htm11.3.8重置按鈕RESET1、基本語法：11.3.8重置按鈕RESET1、基本語法：

<INPUTtype=“image”name=“field_name”SRC=“image_url”>2、語法解釋：

是指可以用在提交按鈕位置上的圖片，這副圖片具有按鈕的功能。3、文件范例：11-14.htm11.3.9圖像域IMAGE1、基本語法：11.3.9圖像域IMAGE1、基本語法：

<INPUTtype=“hidden”name=“field_name”value=“value”>2、語法解釋：

對于用戶是不可見的，在于收集或發(fā)送信息，以利于被處理表單的程序所使用。3、文件范例：11-15.htm11.3.10隱藏域HIDDEN1、基本語法：11.3.10隱藏域HIDDEN1、基本語法：

<selectname=“name”size=valuemultiple><optionvalue=“value”selected>選項(xiàng)<optionvalue=“value”>選項(xiàng)……</select>2、語法解釋：

這些屬性的含義見下表。

3、文件范例：11-16.htm11.4菜單和列表標(biāo)記<SELECT><OPTION>1、基本語法：11.4菜單和列表標(biāo)記<SELECT><OP菜單和列表標(biāo)記屬性菜單和列表標(biāo)記屬性描述name菜單和列表的名稱size顯示的選項(xiàng)數(shù)目multiple列表中的項(xiàng)目多選value選項(xiàng)值selected默認(rèn)選項(xiàng)菜單和列表標(biāo)記屬性菜單和列表標(biāo)記屬性描述name菜單和1、基本語法：

<textareaname=“name”rows=valuecols=valuevalue=“value”></textarea>2、語法解釋：

這個(gè)標(biāo)記用來制作多行的文字域，屬性的含義見下表。

3、文件范例：11-17.htm11.5文字域標(biāo)記<TEXTAREA>1、基本語法：11.5文字域標(biāo)記<TEXTAREA>文字域標(biāo)記屬性文字域標(biāo)記屬性描述name文字域的名稱rows文字域的行數(shù)cols文字域的列數(shù)value文字域的默認(rèn)值文字域標(biāo)記屬性文字域標(biāo)記屬性描述name文字域的名稱r作業(yè)：P273頁1、2、3作業(yè)：P273頁第11章建立表單頁面37第11章建立表單頁面1本章目標(biāo)：什么是表單表單標(biāo)記<FORM>輸入標(biāo)記<INPUT>菜單和列表標(biāo)記<SELECT>文字域標(biāo)記<TEXTAREA>本章目標(biāo)：什么是表單表單示例表單示例11.1什么是表單1、概念：表單是實(shí)現(xiàn)動態(tài)網(wǎng)頁的一種主要的外在形式，是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段，利用表單可以收集客戶端提供的有關(guān)信息。2、功能：表單的主要功能是收集信息，具體說是收集瀏覽者的信息?？捎糜谡{(diào)查、定購、搜索等功能。11.1什么是表單1、概念：11.1什么是表單3、組成：①描述表單元素的HTML源代碼；②客戶端的腳本，或者服務(wù)器端用來處理用戶用戶所填信息的程序。4、處理過程：當(dāng)單擊表單中的提交按鈕時(shí)，輸入在表單中的信息就會上傳到服務(wù)器中，然后由服務(wù)器的有關(guān)應(yīng)用程序進(jìn)行處理，處理后或者將用戶提交的信息存儲在服務(wù)器端的數(shù)據(jù)庫中，或者將有關(guān)的信息返回到客戶端瀏覽器上。11.1什么是表單3、組成：1、基本語法：

<FORMname=“form_name”method=“method”action=“url”enctype=“value”

target=“target_win”>……</FORM>11.2表單標(biāo)記<FORM>1、基本語法：11.2表單標(biāo)記<FORM>屬性描述NAME表單的名稱METHOD定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get和postACTION用來定義表單處理程序（一個(gè)ASP，CGI等程序）的位置（相對地址或絕對地址）ENCTYPE設(shè)置表單資料的編碼方式TARGET設(shè)置返回信息的顯示方式<FORM>標(biāo)記屬性屬性描述NAME表單的名稱METHOD定義表單結(jié)果從1、基本語法：

<FORMname=“from_name”>……

</FORM>2、語法解釋：

通過為表單命名可以控制表單與后臺程序之間的關(guān)系。

3、文件范例：11-1.htm11.2.1<FORM>標(biāo)記的NAME屬性1、基本語法：11.2.1<FORM>標(biāo)記的NAME屬性1、基本語法：

<FORMaction=“URL”>……

</FORM>2、語法解釋：

在action屬性中定義表單提交的地址。

3、文件范例：11-2.htm11.2.2<FORM>標(biāo)記的action屬性1、基本語法：11.2.2<FORM>標(biāo)記的action屬1、基本語法：

<FORMmethod=“method”>……

</FORM>2、語法解釋：定義提交表單的方法，有g(shù)et和post兩種方法。區(qū)別見下表。

3、文件范例：11-3.htm11.2.3<FORM>標(biāo)記的method屬性1、基本語法：11.2.3<FORM>標(biāo)記的method屬get和post的區(qū)別：

區(qū)別方法地址欄信息長度保密性非ASCII碼字符GET將表單內(nèi)容附加在URL地址后面有限制，不超過8192個(gè)字符不具有保密性不傳送POST不顯示提交信息無限制具有保密性傳送get和post的區(qū)別：區(qū)別地址欄1、基本語法：

<FORMenctype=“value”>……

</FORM>2、語法解釋：

value的取值見下表。3、文件范例：11-4.htm11.2.4<FORM>標(biāo)記的enctype屬性1、基本語法：11.2.4<FORM>標(biāo)記的enctypeenctype屬性值屬性值描述Text/plain以純文本形式傳送信息Application或x-www-Form-urlencoded默認(rèn)的編碼方式Multipart或Form-data使用MINE編碼enctype屬性值屬性值描述Text/plain以純1、基本語法：

<FORMtarget=“target-win”>……

</FORM>2、語法解釋：

設(shè)置表單信息返回的窗口，target的取值見下表。

3、文件范例：11-5.htm11.2.5<FORM>標(biāo)記的target屬性1、基本語法：11.2.5<FORM>標(biāo)記的target屬target屬性值屬性值描述_blank將返回信息顯示在新開的瀏覽器窗口中_parent將返回信息顯示在父級瀏覽器窗口中_self將返回信息顯示在當(dāng)前瀏覽器窗口中_top將返回信息顯示在頂級瀏覽器窗口中target屬性值屬性值描述_blank將返回信息顯<FORM>標(biāo)記內(nèi)的標(biāo)記標(biāo)記描述<INPUT>表單輸入標(biāo)記<SELECT>菜單和列表標(biāo)記<OPTION>菜單和列表項(xiàng)目標(biāo)記<TEXTAREA>文字域標(biāo)記<FORM>標(biāo)記內(nèi)的標(biāo)記標(biāo)記描述<INPUT>表單輸示例：<FORM><input>…</input><textarea>…<textarea><select><option>…</option></select></FORM>示例：<FORM>1、基本語法：

<form>

<inputname=“field_name”type=“type_name”></form>2、語法解釋：

name指域的名稱，type指域的類型。type屬性值見下表。

11.3輸入標(biāo)記<INPUT>1、基本語法：11.3輸入標(biāo)記<INPUT>type屬性值屬性值描述屬性值描述text文字域button普通按鈕password密碼域submit提交按鈕file文件域reset重置按鈕checkbox復(fù)選框hidden隱藏域radio單選框image圖像域type屬性值屬性值描述屬性值描述text文字域1、基本語法：

<INPUTtype=“text”name=“field_name”maxlength=valuesize=valuevalue=“field_value”>2、語法解釋：

這些屬性的含義見下表。

3、文件范例：11-6.htm11.3.1文字域text1、基本語法：11.3.1文字域text文字域?qū)傩晕淖钟驅(qū)傩悦枋鰊ame文字域的名稱maxlength文字域的最大可輸入字符數(shù)size文字域的寬度（以字符為單位）value文字域的默認(rèn)值文字域?qū)傩晕淖钟驅(qū)傩悦枋鰊ame文字域的名稱maxle1、基本語法：

<INPUTtype=“password”name=“field_name”maxlength=valuesize=valuevalue=field_value>2、語法解釋：

這些屬性的含義見下表。

3、文件范例：11-7.htm11.3.2密碼域password1、基本語法：11.3.2密碼域password密碼域?qū)傩悦艽a域?qū)傩悦枋鰊ame密碼域的名稱maxlength密碼域的最大可輸入字符數(shù)size密碼域的寬度（以字符為單位）value密碼域的默認(rèn)值密碼域?qū)傩悦艽a域?qū)傩悦枋鰊ame密碼域的名稱maxle1、基本語法：

<INPUTtype=“file”name=“field_name”>2、語法解釋：

讓用戶在域的內(nèi)部填寫自己硬盤中的文件路徑，然后通過表單上傳。

3、文件范例：11-8.htm11.3.3文件域file1、基本語法：11.3.3文件域file1、基本語法：

<INPUTtype=“checkbox”name=“field_name”value=“value”checked>2、語法解釋：

checked表示此項(xiàng)被默認(rèn)選中，value表示選中項(xiàng)目后傳送到服務(wù)器端的值。

3、文件范例：11-9.htm11.3.4復(fù)選框checkbox1、基本語法：11.3.4復(fù)選框checkbox1、基本語法：

<INPUTtype=“radio”name=“field_name”value=“value”checked>2、語法解釋：

checked表示此項(xiàng)被默認(rèn)選中，value表示選中項(xiàng)目后傳送到服務(wù)器端的值。

3、文件范例：11-10.htm11.3.5單選框radio1、基本語法：11.3.5單選框radio1、基本語法：

<INPUTtype=“button”name=“field_name”value=“button_text”>2、語法解釋：

value值代表顯示在按鈕上面的文字。

3、文件范例：11-11.htm11.3.6普通按鈕BUTTON1、基本語法：11.3.6普通按鈕BUTTON1、基本語法：

<INPUTtype=“submit”name=“field_name”value=“button_text”>2、語法解釋：

單擊提交按鈕后，可以實(shí)現(xiàn)表單內(nèi)容的提交。

3、文件范例：11-12.htm11.3.7提交按鈕SUBMIT1、基本語法：11.3.7提交按鈕SUBMIT1、基本語法：

<INPUTtype=“reset”name=“field_name”value=“button_text”>2、語法解釋：

單擊重置按鈕后，可以清除表單的內(nèi)容，恢復(fù)默認(rèn)的表單內(nèi)容設(shè)定。