HTML5的表單設計

2020-10-11 編程實踐



使用過Delphi的程式設計師，對Form這個詞應該比較熟悉。在Delphi中，Form被翻譯為「界面、窗口」，作用是：為用戶提供界面，供用戶輸入信息，向用戶展示處理結果。

HTML5中也有Form，功能與Delphi中的Form差不多，用於接收用戶輸入，和伺服器進行交互。不過HTML5中的Form，中文一般譯為「表單」。

1、Web前端與Web後端的交互

Web前端，指瀏覽器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript腳本。

Web後端，指運行在伺服器上的，為Web前端提供服務的軟體，Web後端也常常被稱為Web伺服器。

在HTML5中，Web前端與Web後端交互的流程一般如下：

（1）Web前端向Web後端發起HTTP請求；

（2）Web後端收到HTTP請求後，進行業務處理；

（3）Web後端向Web前端返回HTTP響應。

到目前為止，我們在HTML5中碰到的Web前端發起HTTP請求的方式有兩種：

第1種：HTML頁面通過<a>元素向用戶提供超級連結，用戶點擊該連結時，會向伺服器發起請求；

第2種：HTML頁面通過表單為用戶提供輸入界面，用戶提交表單時，會向伺服器發起請求。

2、GET請求和POST請求

HTTP請求有八種，對Web前端開發者來說，最常用的是GET請求和POST請求。

GET請求：向Web後端請求指定的頁面；GET請求攜帶的數據，以URL參數的形式提供；

POST請求：向Web後端提交數據，請求Web後端對數據進行處理；POST請求攜帶的數據，在請求消息體中提供。

在HTML5中，用戶點擊連結地址，Web前端向後端發起GET請求；

在HTML5中，用戶提交表單，Web前端可以向後端發起GET請求，也可以發起POST請求。

說明：由於目前沒有和後端伺服器對接，為了便於對表單設計進行展示，下面的例子HTML文檔，都是用GET請求來提交數據。

3、表單的主要元素

<form>元素：表示表單；

<input>元素：表單中的輸入控制項，輸入控制項可以是文本框、單選框、複選框、按鈕等等；

<label>元素：表單中的標籤控制項；

<button>元素：表單中的按鈕控制項；

<select>與<option>元素：用於實現列表框和下拉菜單；

<textarea>元素：多行文本控制項。

4、表單提交文本框的輸入

下面是一個可以提交文本框輸入的HTML文檔：

<!DOCTYPE html><html> <head> <title>form001</title> <meta charset="utf-8" /> </head> <body> <form action="process.html" method="get"> <label>請輸入您的姓名：</label> <input type="text" name="name" /> <br/> <input type="submit"/> </form> </body></html>

在瀏覽器中打開該HTML文檔時，展示效果如下：



我們可以在文本框中輸入信息，例如輸入tom：



當我們點擊「提交」按鈕後，瀏覽器顯示信息如下；



可以看到，數據被提交給process.html頁面，並且附帶了一個參數name，且值為我們輸入的tom。

5、表單提交用戶對單選框的選擇

下面是一個可以提交單選框被選信息的HTML文檔：

<!DOCTYPE html><html> <head> <title>form002</title> <meta charset="utf-8" /> </head> <body> <form action="process.html" method="get"> <label>性別：</label> <br/> 男：<input type="radio" name="gender" value="male" /> 女：<input type="radio" name="gender" value="female" /> <br/><br/> <label>國籍：</label> <br/> 中國：<input type="radio" name="nationality" value="Chinese" /> <br/> 美國：<input type="radio" name="nationality" value="American" /> <br/> 日本：<input type="radio" name="nationality" value="Japanese" /> <br/> 英國：<input type="radio" name="nationality" value="English" /> <br/> 其它：<input type="radio" name="nationality" value="Other" /> <br/> <br/> <input type="submit"/> </form> </body></html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：



我們可以選擇性別和國籍，例如我們選擇「男」和「中國」：



當我們點擊「提交」按鈕後，瀏覽器顯示信息如下：



可以看到，我們選擇的信息被提交給process.html文件，並且附帶了gender參數的值為male，nationality參數的值為Chinese。

6、表單提交用戶對複選框的選擇

下面是一個可以提交複選框被選信息的HTML文檔；

<!DOCTYPE html><html> <head> <title>form003</title> <meta charset="utf-8" /> </head> <body> <form action="process.html" method="get"> <label>請選擇您的業餘愛好：</label> <br/> 美術：<input type="checkbox" name="hobby" value="Art" /> <br/> 足球：<input type="checkbox" name="hobby" value="Football" /> <br/> 唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/> 廚藝：<input type="checkbox" name="hobby" value="Cook" /> <br/> 其它：<input type="checkbox" name="hobby" value="Other" /> <br/> <br/> <input type="submit"/> </form> </body></html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：



我們可以選擇自己的業餘愛好，例如我們選擇足球、唱歌、廚藝：



當我們點擊「提交」按鈕後，瀏覽器顯示信息如下：



可以看到，我們選擇的信息被提交給process.html文件，並且附帶了三個hobby參數，其值分別為Football，Singing和Cook。

7、表單提交用戶對下拉菜單的選擇

下面是一個可以提交下拉菜單被選信息的HTML文檔；

<!DOCTYPE html><html> <head> <title>form004</title> <meta charset="utf-8" /> </head> <body> <form action="process.html" method="get"> <label>請選擇您的學歷：</label> <br/> <select name="education"> <option value="primary_school">小學</option> <option value="junior_high_school">初中</option> <option value="senior_high_school">高中</option> <option value="college">大學</option> </select> <br/><br/> <label>請選擇您的興趣愛好：</label> <br/> <select name="hobby" multiple="true"> <option value="Art">美術</option> <option value="Football">足球</option> <option value="Singing">唱歌</option> <option value="Cook">廚藝</option> <option value="Other">其它</option> </select> <br/><br/> <input type="submit"/> </form> </body></html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：



我們可以單選我們的學歷，也可以通過按下Shift+滑鼠鍵多選我們的興趣。例如我們選擇「初中」學歷，選擇「美術」和「廚藝」兩項愛好：



當我們點擊「提交」按鈕後，瀏覽器顯示信息如下：



可以看到，我們選擇的信息被提交給process.html文件，並且附帶了education參數和兩個hobby參數，education的值為junior_high_school，hobby的值為Art和Cook。

上面列舉了幾種控制項的HTML5表單設計方法，其它的控制項也大概差不多，把多個控制項組合在同一個<form>元素中的方法也是相同的，這裡就不再贅述了。

相關焦點

  • 相對HTML4,HTML5中新增的6大表單屬性,你掌握了幾個?
    在html開發中，表單是頁面上重要的內容，用戶輸入內容大部分內容都是通過表單收集的，在html4中表單元素是相對繁瑣的，在html5中，吸納了web forms2.0標準，大大加強了針對表單元素的功能。下面為大家介紹html5中新增的表單元素。
  • 使用React和HTML5表單驗證API處理表單
    DevKit中的表單如果你喜歡去的devkit ReactBootstrap或AntDesign你很可能已經高興的形式。兩者都提供組件來構建滿足不同要求的表單。例如，在AntDesign中，我們使用元素和帶有的表單欄位來定義表單，該 是集合中任何輸入控制項的封裝。
  • HTML5時代 實戰PHP之Web頁面表單設計
    在本教程中，將帶領大家使用HTML5，CSS3及PHP實際設計一個符合HTML5標準的簡單的表單提交網頁，讀者可以從中學習到HTML5 新的表單頁面的基本元素。本文的讀者為有一定HTML，CSS及PHP的讀者學習　　表單的設計草圖　　由於本文不是教photoshop製作的文章，因此只是把設計的表單的草圖設計出來，然後去使用HTML5，CSS3和PHP去實現，我們要設計的表單草圖如下圖所示：
  • html5和h5的區別
    等技術寫成的頁面，可以是動態效果圖，視頻，或者酷炫的場景頁面h5和html5HTML5的設計目的是為了在行動裝置上支持多媒體。HTML5 簡單易學。什麼是 HTML5?HTML5 是下一代 HTML 標準。
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法，有興趣的朋友可以學習一下！在html中，表單是經常用到的，用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤，接下來我們就一起來看看它的用法吧！「form」作為英文單詞有「表格」的意思，那它在html中作為標籤又充當什麼樣的角色呢！我們一起來看看吧！
  • 表單設計:掌握表單設計方法
    編輯導語：表單是我們比較常見的一個信息錄入工具，糟糕的表單設計會帶來令用戶抓狂的交互體驗。這些都是設計師需要進行全盤考慮的問題，所以在設計表單的時候需要先確定這些框架，由外>內，層層深入，再對細節進行處理。所以接下來我會針對如何由外>內設計表單進行詳細的陳述。
  • 23 HTML5表單標籤
    表單是做什麼的？表單是用來收集信息的，比如註冊、登錄、發送評論反饋、購買商品等等的場景，都是用表單來實現的。form這個單詞在英語中就會表格、表單的意思。也就是說，action屬性表示要把當前這個表單上的數據，提交到後臺的哪個程序去處理。等到後面學了伺服器相關知識，就明白這個action屬性的值如何寫了。現在先了解就行，寫表單的時候，可以先把action屬性的值留空。
  • 怎麼用html5新增元素製作用戶註冊頁面?這個例子告訴你!
    表單數據提交是網站中比較常見的用戶交互行為，在html頁面中常見的是註冊表單，提交數據前，會檢查表單數據的完整性，是否出現漏填、誤填）。如果出現漏填、誤填會提示用戶提示用戶，確保填寫數據準確有效。在檢查表單數據數據一般都是使用php或者JavaScript，今天為大家介紹怎麼使用html5新增元素製作用戶註冊頁面並進行檢查的數據檢查。
  • HTML5新增表單元素
    新增type類型：Type=「email」 限制用戶必須輸入email類型Type=「url」 限制用戶必須輸入url類型，「http://」Type=「range」 產生一個滑動條表單Type=「number」 產生一個數字意義表單Type=「search」 產生一個搜索意義的表單
  • 【匯總】HTML5和CSS3表單示例和詳細教程
    導讀：作者Paul Andrew是Speckyboy設計雜誌的創始人和編輯。引導大家一步一步創建佔位符文本、表單域、郵箱+網絡+手機、日程選擇器等功能。有大部分的表單為了增強功能卻降低輸入框的標準。雖然在舊版本的瀏覽器中並不完全支持HTML5特性，但在教程中會演示如何解決和正確添加新功能。【示例】如何使用HTML5創建跨瀏覽器的表單
  • HTML5新增加的一些表單屬性
    HTML5新增加了一些表單屬性，form增加了autocomplete和novalidate，input控制項增加了autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height
  • 26 HTML5中新增的表單控制項
    前面兩篇圖文介紹的表單控制項，都是HTML4版本中就已經存在的表單控制項，不過它們同樣在HTML5規範中被兼容，而今天這一篇圖文介紹的這些表單控制項，都是在HTML5中新增的。網頁結構的代碼相信小夥伴們都很熟悉了，我這裡就只寫HTML5新增表單控制項的代碼。
  • 26 HTML5中新增的表單控制項
    前面兩篇圖文介紹的表單控制項，都是HTML4版本中就已經存在的表單控制項，不過它們同樣在HTML5規範中被兼容，而今天這一篇圖文介紹的這些表單控制項，都是在HTML5中新增的。在HTML5中新增的表單控制項，主要有下圖所示的這些，input標籤的type屬性不同的值，表示不同的控制項。
  • 分享學習HTML5的心得與體會
    HTML5加入了許多的新特性，其中包含語義化標籤、增強型表單、音頻和視頻、canvas 繪圖、SVG 繪圖、地理定位（Geolocation）、拖放API 、Web Storage、WebSocket。這些新特性的加入讓網頁開發變得靈活了。
  • 25 HTML5表單基本控制項(二)
    點擊這個按鈕時，表單將會提交到form標籤的action屬性值所指向的那個後臺網站。submit這個單詞就是提交的意思。當<input>標籤的type屬性值為"reset"時，就創建了一個重置按鈕。點擊這個按鈕時，表單中的所有控制項都將被立即重置。reset這個單詞就是重置的意思。
  • 界面設計方法(5):表單功能的設計
    編輯導語：在前幾篇系列文章中，作者已經為我們介紹了界面的概念與分類、活動功能、字典功能以及看板功能的設計方法。在系列文章的最後一篇，作者為我們精心總結了表單功能的設計流程，相信認真看完這五篇文章的你，一定會有所收穫。表單功能，是4大業務功能（活動、字典、看板和表單）中的最後一個。
  • 詳解HTML5中的figure元素、details元素和mark元素
    HTML5中，不僅增加了很多的表單元素，同時也增加和改良了可以應用在整個頁面中的元素。下面為大家介紹html5中的figure元素、details元素和mark元素。figure元素和figcaption元素figure元素是元素組合，帶有可選標題。
  • 表單不知道該怎麼設計?看這篇《表單設計指南》
    目錄表單組成表單結構輸入欄位標籤按鈕驗證會話界面：設計表單的新方式總結概要用戶使用應用或網站都有一個目的。通常，用戶實現目標的的方式之一就是表單。 表單仍然是用戶在網頁和應用中最重要的交互類型之一。大多數情況下，表單往往是完成目標的最後一步。用戶應該能夠快速完成表單。在本文中，您將看到從可用性測試、試驗測試、眼動追蹤研究以及用戶的投訴中獲得的實用技巧。
  • PC端表單設計的研究:如何設計一個優秀的表單頁面
    最近身邊的一些小夥伴，總會遇見B端設計工作，對於這種偏後臺設計的B端設計，總會有大量的表單設計需要做，結合以前自己也有過不少表單設計的工作，在這裡給大家分享一下自己對於PC端表單設計的研究，聊一聊表單在PC端中的運用。
  • 移動端表單設計構思
    本文主要是根據項目的表單填寫體驗差被客戶撤下線重新整改，而對此將表單進行了新的用戶體驗設計的一些構思。一、現狀傳統的PC端空間範圍大，能夠將表單的所有信息連同溫馨提示語等平鋪展示出來，但是一下子用戶看到這麼多內容會給用戶帶來壓力，進而放棄表單的填寫， 這也是在PC端表單設計的用戶體驗很不好的地方。