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

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

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

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

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

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

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

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

1.一般表單中包括必填項和選填項，其中必填項會用“*”符號標(biāo)識出來，而且數(shù)量占多數(shù)，而選填項最好只有1-2個，因為它們往往容易被用戶所忽略，而且用處不大，比如職業(yè)、興趣等，多了就會讓人覺得累贅，影響用戶填寫表單的效率。

2.當(dāng)添加單行文或多行文表單項時，會有“提醒文字”一欄需要我們完成，這個步驟千萬不可以省去，因為它可以提示和引導(dǎo)用戶如何填寫表單，如果沒有的話，用戶很有可能會對著一片空白無從下手，以致于跳出表單填寫。

3.有時候，用戶填寫表單時可能需要進行驗證，而驗證的方式有很多種，包括手機驗證、郵箱驗證和身份驗證。不得不說，手機驗證相對于其他驗證方式，有著更高的方便性和快捷性，因為一般用戶都會隨身攜帶手機，打開手機驗證信息只是一秒鐘的事。