HTML5的表單設計

用過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>元素中的方法也是相同的，這里就不再贅述了。

站制作的過程中，表單設計與驗證是至關重要的一步，它直接影響著用戶體驗和數據的準確性。一個優秀的表單設計能夠簡化用戶輸入過程，提高用戶滿意度，而有效的錯誤處理則能夠防止錯誤數據的提交，保護網站的安全性和穩定性。本文將詳細介紹網站制作中的表單設計與驗證的關鍵技巧，幫助您優化用戶輸入和錯誤處理，提升網站的整體體驗。

一、關鍵技巧1：簡化表單設計

在設計表單時，應盡量簡化用戶的輸入過程，減少繁瑣的操作和信息的填寫。以下是幾個值得注意的技巧：

1.1 使用合理的表單字段數量：避免設計過多的表單字段，只保留必要的信息項，例如姓名、郵箱、聯系電話等。過多的字段會給用戶造成困擾，并可能導致信息填寫不完整。

1.2 使用清晰的表單標簽與提示：為每個表單字段添加清晰的標簽和必要的提示文字，幫助用戶理解所需填寫的信息內容，并提供合理的格式要求。

1.3 提供默認值和自動填充：對于一些常用字段，可以提供默認值或使用自動填充功能，例如自動填充地址或根據郵編自動填充城市信息。這樣能夠節省用戶的時間和輸入成本。

二、關鍵技巧2：有效的表單驗證

表單驗證是確保用戶提交正確數據的關鍵步驟，以下是一些有效的表單驗證技巧：

2.1 客戶端驗證：使用HTML5的表單驗證功能，例如required、type、pattern等屬性來驗證表單字段的格式，確保用戶輸入的數據符合要求。

2.2 服務器端驗證：客戶端驗證只是一種表面的驗證手段，為了數據的安全性和準確性，必須進行服務器端的驗證。通過編寫后端驗證規則，對用戶提交的數據進行進一步驗證，例如數據的完整性、合法性等。

2.3 錯誤提示信息：當用戶輸入錯誤時，應提供明確的錯誤提示信息，指出錯誤的具體原因和如何修正錯誤。錯誤提示信息應簡潔明了，幫助用戶快速定位并解決問題。

三、關鍵技巧3：友好的錯誤處理

錯誤處理是網站制作中不可忽視的一環，以下是幾個友好的錯誤處理技巧：

3.1 錯誤反饋頁面：當用戶提交錯誤的數據或發生其他錯誤時，應為用戶提供一個友好的錯誤反饋頁面，清晰地顯示錯誤信息，并提供解決問題的建議或聯系方式。

3.2 數據保護與恢復：在用戶提交錯誤數據后，應盡量保護用戶已輸入的正確數據，避免用戶重新填寫所有信息。例如，可以在頁面刷新或返回時，自動填充上次正確的輸入內容。

3.3 日志記錄與分析：對于較為嚴重的錯誤，應及時記錄日志并進行分析，找出錯誤產生的原因，并及時修正，以提升網站的穩定性和安全性。

通過合理的表單設計與驗證，我們能夠簡化用戶輸入的過程，減少錯誤數據的產生，并提升用戶體驗。無論是從用戶的角度還是網站的運營角度來看，優化表單設計與驗證都是非常重要的一項工作。我們希望本文所介紹的關鍵技巧能夠幫助您更好地實現這一目標。

TML5 為前端開發者帶來了許多表單增強功能，這些功能使得創建交互式和用戶友好的表單變得更加容易。在本文中，我們將介紹幾種 HTML5 新增的表單功能，并提供完整的 HTML 示例，以幫助你了解如何在實際項目中應用這些功能。

1. 新的輸入類型

HTML5 引入了一系列新的 input 類型，以支持更多種類的數據輸入，比如電子郵件、日期等。

例子：電子郵件和網址輸入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>電子郵件和網址輸入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設置字體 */
            padding: 20px; /* 頁面內邊距 */
        }

        form {
            max-width: 400px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標簽獨占一行 */
            margin-bottom: 5px; /* 標簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 輸入框寬度 */
            padding: 8px; /* 內邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">個人網站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，我們使用了 type="email" 和 type="url" 來要求用戶輸入有效的電子郵件地址和網址。如果用戶輸入的不符合格式，瀏覽器會在提交表單前顯示一個警告。

2. 占位符屬性

placeholder 屬性允許我們在輸入字段中設置一個提示文本，當輸入字段為空時顯示，一旦開始輸入，提示文本就會消失。

例子：帶占位符的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>帶占位符的輸入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設置字體 */
            padding: 20px; /* 頁面內邊距 */
        }

        form {
            max-width: 300px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標簽獨占一行 */
            margin-bottom: 10px; /* 標簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 輸入框寬度，減去內邊距和邊框的寬度 */
            padding: 10px; /* 內邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
            box-sizing: border-box; /* 盒子模型，使寬度包含邊框和內邊距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="請輸入搜索關鍵字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

這里的 placeholder="請輸入搜索關鍵字" 就是一個占位符，它會在用戶輸入之前顯示在搜索框中。

3. 自動聚焦屬性

autofocus 屬性可以讓頁面加載時自動將焦點放到某個表單元素上。

例子：自動聚焦的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自動聚焦的輸入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，當頁面加載完成后，姓名輸入框將自動獲得焦點。

4. 表單驗證

HTML5 為表單驗證提供了內置支持，通過簡單的屬性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情況下進行基本的驗證。

例子：表單驗證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表單驗證示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括邊框和內邊距在內的寬度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年齡:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">郵編:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="請輸入5位數字的郵編" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，年齡字段要求用戶輸入一個介于 18 到 99 之間的數字，而郵編字段要求用戶輸入一個符合特定模式（5位數字）的文本。

結語

HTML5 的表單增強功能大大簡化了表單處理和驗證的工作，使得開發更加高效，同時也提高了用戶體驗。通過上述示例，我們可以看到，利用 HTML5 的新特性，可以創建功能強大且易于使用的表單。隨著技術的不斷進步，我們作為開發者應該不斷學習和實踐，以便更好地利用這些新工具來構建更好的網頁。

在線咨詢

上一篇：jQuery Mobile 按鈕
下一篇：HTML基礎篇-18HTML之音頻播放

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5的表單設計

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

2、GET請求和POST請求

3、表單的主要元素

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

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

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

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

1. 新的輸入類型

例子：電子郵件和網址輸入

2. 占位符屬性

例子：帶占位符的輸入框

3. 自動聚焦屬性

例子：自動聚焦的輸入框

4. 表單驗證

例子：表單驗證

結語

您的項目需求