6.1 required 屬性
表單中的資料驗證是網頁開發中很重要的一部分，可以確保輸入資訊的正確性和完整性。HTML 提供了很多內建屬性來檢查資料輸入，比如
required、pattern、min、max，還有 placeholder 和 value 屬性，
可以改善使用者與表單的互動。
required 屬性表示此輸入欄位是必填的。若沒有填寫標記為 required 的欄位，瀏覽器將不允許提交表單。
語法
HTML
<input type="text" name="username" required>
使用範例
HTML
<form action="/" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<button type="submit">提交</button>
</form>
説明
如果指定了 required 屬性，使用者必須在提交表單之前填寫該欄位。
如果欄位是空的，瀏覽器會顯示錯誤訊息並不會提交表單。
6.2 pattern 屬性
pattern 屬性允許使用正則表達式來驗證資料輸入。如果輸入的資料不符合所提供的模式，瀏覽器會顯示錯誤訊息並不會提交表單。
語法
HTML
<input type="text" name="username" pattern="[A-Za-z]{3,}">
使用範例
pattern 屬性指定了輸入資料必須符合的正則表達式。
在這個例子中，用戶名必須只包含字母且不能少於三個字元。
HTML
<form action="/" method="post">
<label for="username">用戶名（僅限字母，至少3個字元）:</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">提交</button>
</form>
6.3 min 和 max 屬性
min 和 max 屬性用來設置數字和日期欄位的最小和最大允許值。
語法
HTML
<input type="number" name="age" min="18" max="99">
使用範例
數字欄位
min: 設置最小允許值。這個範例中，最小年齡是 18 歲max: 設置最大允許值。這個範例中，最大年齡是 99 歲
HTML
<form action="/" method="post">
<label for="birthday">出生日期（從 1900-01-01 到 2024-12-31）:</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">提交</button>
</form>
6.4 placeholder 屬性
placeholder 屬性設置在使用者輸入資料前顯示在輸入框內的佔位文字。這個屬性幫助使用者理解應該輸入什麼樣的資料。
語法
HTML
<input type="text" name="username" placeholder="輸入用戶名">
使用範例
placeholder 屬性在使用者開始輸入資料前顯示在輸入框內的文字。在這個例子中，佔位文字是 "輸入用戶名"。
HTML
<form action="/" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" placeholder="輸入用戶名" required>
<button type="submit">提交</button>
</form>
6.5 value 屬性
value 屬性設置輸入元素的初始值。這個值會在頁面加載或重置表單時顯示在欄位中。
語法
HTML
<input type="text" name="username" value="default user">
使用範例
value 屬性設置輸入欄位的初始值。在這個例子中，默認的用戶名是 "default user"。
HTML
<form action="/" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">提交</button>
</form>
GO TO FULL VERSION