表單驗證
本文解釋了表單驗證。
它解釋了 HTML 中的表單驗證。
YouTube Video
HTML 表單驗證
HTML 表單驗證概覽
- HTML 表單驗證是一種機制，用於確保用戶提交前資料符合特定條件。這可減少伺服器端錯誤並提升用戶體驗。
required 屬性
1<form>
2 <label for="email">Email:</label>
3 <input type="email" id="email" required placeholder="Enter your email">
4 <button type="submit">Submit</button>
5</form>required屬性指定在提交表單之前輸入欄位必須被填寫。
pattern 屬性
1<form>
2 <label for="username">Username (letters and numbers only):</label>
3 <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4 <button type="submit">Submit</button>
5</form>pattern屬性用於驗證表單輸入是否符合指定的正則表達式模式。例如，這可以檢查用戶名是否僅包含字母和數字。
min 和 max 屬性
1<form>
2 <label for="age">Age:</label>
3 <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4 <button type="submit">Submit</button>
5</form><min>和<max>屬性用於指定輸入元素的最小和最大允許值。它們通常與number、range和date類型的輸入一起使用。- 在此範例中，您可以輸入 18 到 99 之間的數字。
minlength 和 maxlength 屬性
1<form>
2 <label for="username">Username:</label>
3 <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4 <button type="submit">Submit</button>
5</form>minlength屬性指定輸入欄位所需的最小字符數，而maxlength屬性定義允許的最大字符數。- 在此範例中，您可以輸入4到12個字元的文字。
type="email" 屬性
1<form>
2 <label for="email">Email:</label>
3 <input type="email" id="email" placeholder="Enter your email">
4 <button type="submit">Submit</button>
5</form>type="email"屬性用於確保輸入為有效的電子郵件地址格式。此屬性為電子郵件地址輸入欄位提供內建的驗證功能。
type="url" 屬性
1<form>
2 <label for="website">Website:</label>
3 <input type="url" id="website" name="website" placeholder="https://example.com" required>
4 <button type="submit">Submit</button>
5</form><input type="url">提供一個要求正確URL格式的輸入欄位。瀏覽器會自動檢查輸入是否為有效的URL。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。