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值
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <form>
- 文本域1:<input type=”text” name=”firstname” />
- 文本域2:<input type=”text” name=”lastname” />
- </form>
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <form>
- <input type=”radio” name=”sex” value=”male” /> 男生
- <input type=”radio” name=”sex” value=”female” /> 女生
- </form>
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <form>
- <input type=”checkbox” name=”val1″ />
- 前端開(kāi)拓者不錯(cuò)
- <input type=”checkbox” name=”val2″ />
- 前端開(kāi)拓者一般
- </form>
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <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>
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <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ā)。