HTML5表單——讓您的網站輸入體驗更優秀

一、表單的基本元素

在HTML5中，表單被加強了很多新的特性。我們先來看下錶單的基本元素。

1、輸入框

輸入框是表單中最常用的元素之一，它用於接收用戶的輸入信息。HTML5新增了一些類型，如email、url等，可以在輸入時進行驗證，防止用戶輸入錯誤的格式。

    <input type="text" name="username" placeholder="請輸入用戶名">

2、下拉列表

下拉列表是一種不同於輸入框的表單元素。它可以讓用戶選擇一項或多項值，HTML5也可以設置默認選中項等。

    <select name="city">
        <option value="1" selected>上海</option>
        <option value="2">北京</option>
        <option value="3">廣州</option>
    </select>

3、單選框和複選框

單選框和複選框用於選擇一項或多項值，HTML5中可以設置默認選中項等。

    <input type="radio" name="gender" value="male" checked>男
    <input type="radio" name="gender" value="female">女
    <br>
    <input type="checkbox" name="hobby" value="reading" checked>閱讀
    <input type="checkbox" name="hobby" value="music">音樂

二、表單驗證

表單驗證是HTML5增加的一個非常重要的功能，它可以在用戶提交表單時對錶單中的數據進行驗證，避免用戶輸入不合法的數據。

1、required屬性

required屬性可以強制要求用戶必須輸入某些信息，否則無法提交表單。

    <input type="text" name="username" required>

2、pattern屬性

pattern屬性可以用正則表達式驗證用戶輸入的數據是否符合規則，例如要求用戶輸入一個6-12位的數字和字母組合。

    <input type="text" name="password" pattern="[0-9a-zA-Z]{6,12}">

三、表單設計

表單在網站中的設計也非常重要，一個好的設計可以讓用戶輸入信息的體驗更加良好。

1、清晰的標籤和提示

在表單中，清晰的標籤和提示可以讓用戶更好地理解需要輸入哪些信息，可以減少用戶輸入錯誤信息的機會。

    <label>用戶名:</label>
    <input type="text" name="username" placeholder="請輸入用戶名">

2、良好的布局

對於較長的表單，良好的布局可以避免用戶的迷失和混淆，讓用戶能夠快速找到需要輸入的信息。

    <fieldset>
        <legend>個人信息</legend>
        <label>姓名:</label>
        <input type="text" name="name">
        <br>
        <label>性別:</label>
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <br>
        <label>出生日期:</label>
        <input type="date" name="birthday">
        <br>
        <label>聯繫電話:</label>
        <input type="tel" name="phone">
        <br>
        <label>郵箱:</label>
        <input type="email" name="email">
    </fieldset>

四、表單提交

表單提交後，服務器會處理表單中的數據。在HTML5中，我們可以使用下面的語法來進行表單提交。

    <form action="提交地址" method="post">
        <!-- 表單元素 -->
        <input type="submit" value="提交">
    </form>

其中，action屬性指定表單提交的地址，method屬性指定表單提交的方式（get或post）。