資源簡介

(共19張PPT)
7
表 單
HTML是利用表單(Fom)來設計交互界面的.表單則是接受瀏覽者在網頁中的操作,并傳遞給服務器中的程序(例如CG1程序).它是動態(tài)的,有輸入框及按鈕等。使用表單并配合CG程序,網頁能夠知道瀏覽者做了哪些事情,然后針對這些事情適當地加以回應,就可以做成一個具有交互功能的網頁了。
本章的內容就是要介紹,如何制作表單讓自己的網頁和瀏覽者之間進行互相交流.
7、表單
1
表單
表單標簽是成對標簽。在首標簽和尾標簽

之間的內容就是一個表單。表單form為瀏覽者在屏幕上建立一張表格,表格中有明確的文字提示,使瀏覽者可以在表格上輸入自己的信息,然后使用提交按鈕,將瀏覽者的信息傳送給服務器。表單form中的HTML代碼要完成兩件事情,一是指出CGl的路徑和名稱,二是要將表單輸入的信息傳遞給CGI。
CGI(Common Gateway Interface) 是 WWW 技術中最重要的技術之一，有著不可替代的重要地位。CGI 是外部應用程序（CGI 程序）與 WEB 服務器之間的接口標準，是在 CGI 程序和 Web 服務器之間傳遞信息的過程。CGI 規(guī)范允許 Web 服務器執(zhí)行外部程序，并將它們的輸出發(fā)送給 Web 瀏覽器，CGI 將 Web 的一組簡單的靜態(tài)超媒體文檔變成一個完整的新的交互式媒體。
7、表單
1
定義表單標記及其屬性
屬性 功能
action 指定處理表單數據的URL地址,其值通常為動態(tài)網頁文件的路徑,可以設置為空鏈接
method 指定將表單數據提交給服務器的傳送方式,值為post(一般用于傳送大容量數據或需要保密的信息)和get(不能傳送大容量數據,且數據傳送不安全,易被截取)
name 定義表單的名稱
target 定義表單數據結果顯示的目標窗口
格式:< form action=“執(zhí)行CGI程序的URL地址” method=”數據傳送方式">…
功能:在網頁中建立一個表單,定義信息的收集范圍
注意：所有的表單控件都必須包含在

...

標記中
7、表單
1
定義表單標記及其屬性
格式:< form action=“執(zhí)行CGI程序的URL地址” method=”數據傳送方式">…
功能:在網頁中建立一個表單,定義信息的收集范圍
2
表單控件標記及其屬性
格式:< Input type=”輸入控件類型">。
功能:在已建好的表單中建立一個指定類型的輸入控件
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
控件名稱 控件類型
Text 文本框
Password 密碼框
Radio 單選按鈕
Checkbox 多選按鈕
submit 確定提交按鈕
Reset 重置按鈕
Image 圖像按鈕
file 文件選擇輸入框
7、表單
2
表單控件標記input及其屬性
格式:< Input type=”輸入控件類型">。
功能:在已建好的表單中建立一個指定類型的輸入控件，其他屬性如下
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
屬性 控件名稱 控件類型
name 指定各個控件的名稱,方便CGI程序對其輸入控件的引用
size 設置輸入窗口的寬度,控件類型為文本框、密碼框和文件域時可使用
value 控件類型為文本框、密碼框、文件域、單選框和復選框時,用于設置輸入控件提交的值;控件 類型為提交按鈕或重置按鈕時,用于設置按鈕上顯示的文本
checked 設置單選框和復選框的初始狀態(tài),指定表示選中,不指定表示未選中
maxlength 設置文本框和密碼框可輸入的最大字符數
7、表單
2
文本框text及其屬性
格式:< Input type=”輸入控件類型">。
功能:在已建好的表單中建立一個指定類型的輸入控件，其他屬性如下
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
屬性 控件名稱 控件類型
size 設置輸入窗口的寬度,控件類型為文本框、密碼框和文件域時可使用
value 用于設置輸入文本框中默認的值;
maxlength 設置文本框和密碼框可輸入的最大字符數
7、表單
2
表單控件標記input及其屬性
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、表單
2
提交submit和重置按鈕reset及其屬性
當type= submit時,瀏覽器會在相應的位置產生一個提交按鈕。當用戶單擊該按鈕時瀏覽器就會將表單的輸入信息傳送給服務器。提交按鈕的name屬性是可以默認的,除name屬性外,它還有一個可選的屬性 value,用于指定顯示在提交按鈕上的文字。 value屬性的默認方式“提交查詢內容”。在一個表單中必須有提交按鈕,不然將無法向服務器傳送信息.
當 type= reset時,瀏覽器會在相應位置產生一個重置按鈕。當用戶單擊該按鈕時,瀏覽器就會清除表單中所有的輸入信息而恢復到初始狀態(tài)。重置按鈕的name屬性也是可以默認的。除name屬性外,它也有一個可選的屬性 value,用于指定顯示在清除按鈕上的文字,vale屬性的默認方式是“重置”。
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、表單
2
表單控件標記
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、表單
2
密碼框password
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、表單
2
單選按鈕radio
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、表單
3
其他表單控件及其屬性
②列表框 格式如下:
< select name=”名稱">
< option>列表項一
< option>列表項二
< option>列表項三
>
功能:在已建好的表單中建立一個指定列表框
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
①多行文本框
格式;< Textarea name=“名稱”rows=“行數" cols=“列數”>文本內容
功能:在已建好的表單中建立一個指定多行多列的文本框
7、表單
7、表單
3
列表框常用屬性
屬性
size 設置列表框顯示的列表項數,如省略此屬性或取值為1時,列表框為下拉式列表框
multiple 指定時表示可以選擇多項,省略時只能選擇單項
selected 只能用在< Option>標記中,表示默認選中當前項
value 只能用在標記中,表示當前項的取值
4
Lable標簽
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、表單
使用lable標記可做為光標選擇對象
語法格式：
……

例如：用戶名：


4
生成分組標簽
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、表單
利用fieldset和legend標簽生成分組標簽
語法格式：

分組名稱

例如：

基本信息

用戶名：

4
Get 和post屬性
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、表單
Method制定表單的運行方式。屬性值有get個post。默認是get。
Get一般是從服務器獲取信息，因此傳遞給服務器的反饋信息長度不能超過255個字符，而且安全性不高 ，提交后會在地址欄顯示輸入信息（控件需要設置name屬性才能收集信息）
post一般是向服務器發(fā)送信息，反饋信息長度不受限制，而且安全性較高 ，提交后不會在地址欄顯示輸入信息（控件需要設置name屬性才能收集信息）
一個測試網站地址https:///api/html/signin
作業(yè)：完成下發(fā)的TASK6 中的作業(yè)
要求：利用記事本編輯網頁，按照要求保存為HTML文件，自己預覽后提交。有問題及時反饋練習。

展開更多......

收起↑