HTML的form表單標(biāo)簽用法學(xué)習(xí)教程
HTML中表單可以用來(lái)搜集用戶各種類型的輸入信息。表單實(shí)際上是包含表單元素的區(qū)域,在這個(gè)區(qū)域中的各種元素的輸入信息最終都將通過(guò)表單提交到程序腳本中。例如常見(jiàn)的有用戶登錄、注冊(cè)、發(fā)布文章等等,都是通過(guò)表單提交到動(dòng)態(tài)程序進(jìn)行處理的。本節(jié)主要講述表單和表單的元素,關(guān)于如何提交表單信息到動(dòng)態(tài)程序,將在以后的程序語(yǔ)言課中再來(lái)講述。
表單的區(qū)域是使用<form>標(biāo)簽定義表單的范圍,在<form></form>中的元素的值會(huì)被通過(guò)這個(gè)表單提交到對(duì)應(yīng)的地址中。
輸入信息
一般表單內(nèi)多以使用<input>標(biāo)簽收集用戶的輸入信息,其輸入類型是由type決定的。
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽(<input>)。輸入類型是由類型屬性(type)定義的。常見(jiàn)的輸入類型有文本域、單選按鈕、復(fù)選框、下拉菜單等等。
文本域
文本域可以為用戶提供輸入文字的功能,瀏覽器會(huì)將文本域解譯為一個(gè)矩形框,用戶將光標(biāo)移動(dòng)到該框體,并點(diǎn)擊即可將光標(biāo)移動(dòng)到框體內(nèi)。用戶可以在表單中鍵入字母、數(shù)字等內(nèi)容。
文本域的定義方法是在<input>標(biāo)簽中為type屬性設(shè)置text值
- <form>
- 文本域1:<input type=”text” name=”firstname” />
- 文本域2:<input type=”text” name=”lastname” />
- </form>
瀏覽器顯示如下:
單選按鈕
單選按鈕多數(shù)情況下出現(xiàn)在用戶注冊(cè)時(shí)錄入資料的選項(xiàng)中,該類型多用戶只允許用戶選擇一項(xiàng)結(jié)果時(shí)使用。
單選按鈕的定義方法是在<input>標(biāo)簽中將type屬性的值設(shè)置為radio
- <form>
- <input type=”radio” name=”sex” value=”male” /> 男生
- <input type=”radio” name=”sex” value=”female” /> 女生
- </form>
瀏覽器中的顯示為:
復(fù)選框
復(fù)選框可讓用戶勾選某些對(duì)應(yīng)的一個(gè)或多個(gè)選項(xiàng)。常見(jiàn)的一般是在用戶登錄時(shí),為用戶提供記住登錄帳號(hào)等功能。也可以在用戶調(diào)查的頁(yè)面中,搜集用戶的多項(xiàng)意見(jiàn)。
復(fù)選框定義方法是在<input>標(biāo)簽中將type屬性的值設(shè)置為checkbox
- <form>
- <input type=”checkbox” name=”val1″ />
- 前端開(kāi)拓者不錯(cuò)
- <input type=”checkbox” name=”val2″ />
- 前端開(kāi)拓者一般
- </form>
瀏覽器顯示如下:
下拉菜單
下拉菜單在信息選擇上與單選類似,但是下拉菜單可以容納更多的信息。并且下拉菜單在選擇菜單值后可以執(zhí)行額外的腳本。
下拉菜單以<select>為起始標(biāo)簽,在select標(biāo)簽中的每一個(gè)option標(biāo)簽都是下拉菜單中的一個(gè)值。
- <form>
- <select name=”cars”>
- <option value=”volvo”>Volvo</option>
- <option value=”saab”>Saab</option>
- <option value=”fiat”>Fiat</option>
- <option value=”audi”>Audi</option>
- </select>
- </form>
瀏覽器顯示:
提交按鈕
提交按鈕是每個(gè)表單的必要組成部分。用戶將對(duì)應(yīng)的信息錄入完畢后,需要通過(guò)點(diǎn)擊提交按鈕觸發(fā)動(dòng)作,將表單的值提交到下一個(gè)頁(yè)面。當(dāng)<form>標(biāo)簽中的action屬性設(shè)置了對(duì)應(yīng)的提交地址時(shí),提交按鈕會(huì)將該表單中獲得的所有數(shù)據(jù)提交到這個(gè)地址的頁(yè)面中。
提交按鈕的定義方法是在input標(biāo)簽中將type的值設(shè)置為submit。下面以前端開(kāi)拓者的搜索框?yàn)槔?,將提交地址設(shè)置為搜索頁(yè)面。
- <form name=”input” action=”http://www.frontopen.com/” method=”get”>
- 關(guān)鍵字:
- <input type=”text” name=”s” id=”s” />
- <input type=”submit” value=”搜索” />
- </form>
瀏覽器顯示如下:
結(jié)語(yǔ):本節(jié)只是對(duì)常用的表單前端布局元素進(jìn)行基本的演示與講解。真正的表單運(yùn)用多在服務(wù)器程序語(yǔ)言中運(yùn)用,并且需要設(shè)置更多的參數(shù)與規(guī)則。本課中大家只需要了解表單的各元素實(shí)現(xiàn)排列即可,多數(shù)情況下已經(jīng)基本可以配合后臺(tái)程序員完成網(wǎng)站開(kāi)發(fā)。
欄 目:CSS/HTML
本文標(biāo)題:HTML的form表單標(biāo)簽用法學(xué)習(xí)教程
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/9623.html
您可能感興趣的文章
- 04-02好看的字體樣式css,好看的字體樣式圖片
- 04-02分頁(yè)樣式css,分頁(yè)樣式欄里用來(lái)定義首頁(yè)的屬性
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css樣式引入方式有幾種,網(wǎng)頁(yè)引入css樣式有幾種方式
- 04-02css滾動(dòng)條樣式,css滾動(dòng)條的樣式
- 04-02html中加入css樣式的簡(jiǎn)單介紹
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表,外部樣式表中優(yōu)先級(jí)最高的
- 04-02vue中的css樣式布局,vue添加css樣式
- 01-10通過(guò)html為FLASH加鏈接的實(shí)現(xiàn)代碼(div層)
- 01-10IE瀏覽器HTML Hack標(biāo)簽總結(jié)


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02表格樣式css樣式,css樣式表單
- 04-02好看的字體樣式css,好看的字體樣式圖
- 04-02分頁(yè)樣式css,分頁(yè)樣式j(luò)q
- 04-02分頁(yè)樣式css,分頁(yè)樣式欄里用來(lái)定義首
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css滾動(dòng)條樣式,css滾動(dòng)條的樣式
- 04-02css樣式引入方式有幾種,網(wǎng)頁(yè)引入css樣
- 04-02html中加入css樣式的簡(jiǎn)單介紹
- 04-02vue中的css樣式布局,vue添加css樣式
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表
隨機(jī)閱讀
- 08-05DEDECMS點(diǎn)擊主欄目默認(rèn)顯示第一個(gè)子欄
- 08-05dedecms織夢(mèng)模板編輯文檔的同時(shí)自動(dòng)更
- 01-11常用的HTML富文本編譯器UEditor、CKEdi
- 08-05dedecms織夢(mèng)模板全站調(diào)用收藏?cái)?shù)的方法
- 01-10C語(yǔ)言打印楊輝三角示例匯總
- 01-10vue實(shí)現(xiàn)分頁(yè)加載效果
- 01-10bat批處理徹底隱藏文件的方法(使用
- 01-10C++實(shí)現(xiàn)將數(shù)組中的值反轉(zhuǎn)
- 01-10C++ 類訪問(wèn)控制的條件總結(jié)
- 08-05織夢(mèng)dedecms首頁(yè)調(diào)用縮略圖為背景