網(wǎng)站的表單功能主要是通過(guò)form標(biāo)簽來(lái)實(shí)現(xiàn)，通過(guò)form表單可以實(shí)現(xiàn)將表單內(nèi)輸入的數(shù)據(jù)提交到服務(wù)器端進(jìn)行處理。下面以登錄功能，輸入用戶名、密碼作為表單元素來(lái)介紹網(wǎng)站表單功能的實(shí)現(xiàn)。

在HTML技術(shù)未進(jìn)行第五次修訂之前,表單元素置于form標(biāo)簽的開(kāi)頭與結(jié)尾中,而HTML5技術(shù)的升級(jí)使這個(gè)數(shù)據(jù)處理過(guò)程得到了完善,讓form表單以一種聲明式表單的形式出現(xiàn),打破了原有表單元素放置位置的局限性,HTML5技術(shù)中form表單新增了很多新的表單屬性和控件類型,讓網(wǎng)頁(yè)開(kāi)發(fā)工作者不需要再編寫(xiě)大量的Java代碼就能夠?qū)崿F(xiàn)很多性能,讓form表單的制作變得更加簡(jiǎn)便快捷。

網(wǎng)頁(yè)開(kāi)發(fā)工作者只需將表單元素放置網(wǎng)頁(yè)任意位置,就能依照相應(yīng)的運(yùn)用要求實(shí)現(xiàn)id關(guān)聯(lián)就能完成。例如:新增color類型可以彈出一個(gè)顏色選擇器,用戶只需選擇顏色值后可以直接反饋給value;還有email、tel、url類型可以對(duì)文本框中的郵箱地址、電話號(hào)碼、網(wǎng)址的合法性進(jìn)行檢測(cè)等功能的完成。

網(wǎng)頁(yè)設(shè)計(jì)表單制作技巧，教你如何設(shè)計(jì)網(wǎng)頁(yè)表單元素

作為UI設(shè)計(jì)師，需要對(duì)網(wǎng)頁(yè)中，界面中的元素熟悉和了解，有這樣一種元素，它作為頁(yè)面中的一種元素非常常見(jiàn)，而且在用戶交互中起著非常重要的作用，那就是表單元素。那么，什么是表單？表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能，一個(gè)表單有三個(gè)基本組成部分： 表單標(biāo)簽：包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法；表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等；表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕。

網(wǎng)頁(yè)表單元素，可以收集用戶的信息和反饋意見(jiàn)，是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。 實(shí)質(zhì)上表單包括兩個(gè)部分：一部分是HTML源代碼用于描述表單（例如，域，標(biāo)簽和用戶在頁(yè)面上看見(jiàn)的按鈕），另一部分是腳本或應(yīng)用程序用于處理提交的信息（如CGI腳本）。不使用處理腳本就不能搜集表單數(shù)據(jù)。而我們現(xiàn)在要討論的網(wǎng)頁(yè)設(shè)計(jì)表單就是第一部分的設(shè)計(jì)，而我們UI設(shè)計(jì)師需要設(shè)計(jì)的就是表單元素的樣式。

不管你在團(tuán)隊(duì)中處于什么樣的地位，是設(shè)計(jì)界面還是編寫(xiě)代碼，無(wú)論是要設(shè)計(jì)復(fù)選框還是要制作更為復(fù)雜的CRM程序，表單的設(shè)計(jì)至關(guān)重要。在許多情形下，用戶需要同這些表單進(jìn)行長(zhǎng)時(shí)間、大范圍的交互和操作，任何效率上的提升都會(huì)帶來(lái)體驗(yàn)的極大優(yōu)化。請(qǐng)務(wù)必記住，精心設(shè)計(jì)的界面不止是要保證形式上的漂亮，方便和高效的設(shè)計(jì)也是造福用戶的重要手段。

表單設(shè)計(jì)人性化設(shè)計(jì)的四個(gè)技巧：

1.一般表單中包括必填項(xiàng)和選填項(xiàng)，其中必填項(xiàng)會(huì)用“*”符號(hào)標(biāo)識(shí)出來(lái)，而且數(shù)量占多數(shù)，而選填項(xiàng)最好只有1-2個(gè)，因?yàn)樗鼈兺菀妆挥脩羲雎?，而且用處不大，比如職業(yè)、興趣等，多了就會(huì)讓人覺(jué)得累贅，影響用戶填寫(xiě)表單的效率。

2.當(dāng)添加單行文或多行文表單項(xiàng)時(shí)，會(huì)有“提醒文字”一欄需要我們完成，這個(gè)步驟千萬(wàn)不可以省去，因?yàn)樗梢蕴崾竞鸵龑?dǎo)用戶如何填寫(xiě)表單，如果沒(méi)有的話，用戶很有可能會(huì)對(duì)著一片空白無(wú)從下手，以致于跳出表單填寫(xiě)。

3.有時(shí)候，用戶填寫(xiě)表單時(shí)可能需要進(jìn)行驗(yàn)證，而驗(yàn)證的方式有很多種，包括手機(jī)驗(yàn)證、郵箱驗(yàn)證和身份驗(yàn)證。不得不說(shuō)，手機(jī)驗(yàn)證相對(duì)于其他驗(yàn)證方式，有著更高的方便性和快捷性，因?yàn)橐话阌脩舳紩?huì)隨身攜帶手機(jī)，打開(kāi)手機(jī)驗(yàn)證信息只是一秒鐘的事。