通過代碼實(shí)例跟我學(xué)j2eeweb組件相關(guān)技術(shù)——html標(biāo)簽的相關(guān)的教學(xué)示例第3部分-閱讀頁
2024-12-04 07:42本頁面
【正文】 熟悉表單及相關(guān)的各個(gè)控件標(biāo)簽 （ 1）表單用于收集和提交用戶輸入的信息 Web 表單是 B/S（ Browser/Server， Web 瀏覽器 /Web 服務(wù)器）體系架構(gòu)的企業(yè)應(yīng)用系統(tǒng)中用戶與 Web 系統(tǒng)之間進(jìn)行人機(jī)交互的主要圖形用戶界面（ Graphical User Interface，簡稱 GUI）元素，應(yīng)用系統(tǒng)通過 Web 表單可以收集用戶的各個(gè)請求參數(shù)，并對客戶端的請求加以對應(yīng)的后臺處理。 2) 提交表單時(shí)，其中收集到的信息會(huì)被發(fā)送到服務(wù)器端，服務(wù)器端相關(guān)應(yīng)用程序（ PHP、ASP 或 JSP 等）會(huì)進(jìn)行處理，比如將信息保存到數(shù)據(jù)庫中，也可將處理結(jié)果再回送到客戶端瀏覽器上顯示。 表單內(nèi)的各個(gè)控件標(biāo)簽的定義，在此省略 /form 其中的 action 屬性定義該表單請求的 Web 服務(wù)器端程序的 URL 地址，本示例為某個(gè) JSP頁面文件； method 屬性指定本表單的請求方式，可以為 get 請求和 post 請求；而 id 屬性定義該表單的名稱，有助于在 JavaScript 腳本程序中對表單進(jìn)行動(dòng)態(tài)編程控制； onsubmit 屬性為該表單添加一個(gè)事件響應(yīng)的 JavaScript 腳本函數(shù)，當(dāng)該表單進(jìn)行提交后將首先執(zhí)行由 onsubmit屬性所指定的 JavaScript 腳本程序代碼。 而 GET 方法將參數(shù)追加到請求的 URL 上，因此，這些參數(shù)對于查看頁 面的任何人都是可見的。 form標(biāo)簽內(nèi)的 input標(biāo)簽（ type 屬性表示輸入的類型， name 屬性表示該標(biāo)簽的名稱標(biāo)識） 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 4/13 頁 4 input標(biāo)簽產(chǎn)生各種“輸入”類的 Web 表單控件，用于搜集用戶請求的各種輸入信息。下表說明了 input標(biāo)簽內(nèi)的 type 屬性的各種可能的取值及對應(yīng)的控件類型。 下面為利用 select和 option標(biāo)簽相互組合，定義描述某個(gè)表單中的下拉列表框的代碼楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 5/13 頁 5 片段示例，其中的第一個(gè)列表項(xiàng)目作為默認(rèn)的選中項(xiàng)目（注意黑體所標(biāo)識的標(biāo)簽）： select id=showStyle_FormSelect option value=0 selected=selected選擇風(fēng)格 /option option value=1正常風(fēng)格 /option option value=2古典風(fēng)格 /option option value=3自定義風(fēng)格 /option /select 多行文本輸入框 由于 input type=text標(biāo)簽只能產(chǎn)生單行文本輸入控件，而在許多 Web 應(yīng)用系統(tǒng)（比如BBS 論壇、新聞等系統(tǒng)）中需要收集用戶輸入的多行文本信息，此時(shí)可以在 form表單標(biāo)簽中內(nèi)嵌 textarea標(biāo)簽。 textarea標(biāo)簽中的 name 屬性 項(xiàng)目 定義該多行文本輸入控件的標(biāo)簽對象的名稱， cols 屬性項(xiàng)目 定義出列寬、 rows 屬性 項(xiàng)目 定義行高，如果添加了 disabled 屬性 項(xiàng)目 ，則該多行文本輸入控件將被改變?yōu)?“只讀 ”效果 ，操作者 不能編輯修改其中的文本內(nèi)容。 form action=“ method=post label for=userName用戶名： /label input type=text name=userNamebr 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 7/13 頁 7 label for=userPassWord 密碼： /labelinput type=password name=“userPassWordbr input type=submit value=提交 input type=reset value=重置 /form （ 3）為 Web 表單添加 accesskey（快捷鍵）和 tabindex（ Tab 鍵產(chǎn)生制表位）屬性 為了使得 Web 應(yīng)用系統(tǒng)在沒有鼠標(biāo)等設(shè)備的情況下，也還能繼續(xù)使用鍵盤實(shí)現(xiàn)操作和填寫表單，可以選用 label標(biāo)簽的 accesskey（快捷鍵，在 IE 瀏覽器下為 Alt + accesskey 屬性值，而在 FireFox 瀏覽器下為 Alt + shift + accesskey 屬性值）和 tabindex 屬性（ tabindex 屬性值為Tab 鍵順序）添加到表單標(biāo)簽上。但 optgroup標(biāo)簽不支持
黨政相關(guān)相關(guān)推薦
鄂ICP備17016276號-1