Kiểm tra biểu mẫu

Bài viết này giải thích về kiểm tra biểu mẫu.

Nó giải thích cách kiểm tra biểu mẫu trong HTML.

YouTube Video

Kiểm tra biểu mẫu HTML

Tổng quan về kiểm tra biểu mẫu HTML

• Kiểm tra biểu mẫu HTML là một cơ chế đảm bảo rằng dữ liệu đáp ứng các điều kiện nhất định trước khi người dùng gửi đi. Điều này giảm lỗi phía máy chủ và cải thiện trải nghiệm người dùng.

Thuộc tính 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>

• Thuộc tính required chỉ định rằng các trường nhập liệu phải được điền trước khi gửi biểu mẫu.

Thuộc tính 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>

• Thuộc tính pattern được sử dụng để kiểm tra xem đầu vào biểu mẫu có khớp với một mẫu regex cụ thể hay không. Ví dụ, điều này kiểm tra xem tên người dùng chỉ chứa các ký tự chữ và số.

Thuộc tính min và 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>

• Các thuộc tính <min> và <max> được sử dụng để chỉ định giá trị tối thiểu và tối đa cho một phần tử nhập liệu. Chúng thường được sử dụng với các kiểu nhập liệu như number, range, và date.
• Trong ví dụ này, bạn có thể nhập một số từ 18 đến 99.

Thuộc tính minlength và 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>

• Thuộc tính minlength chỉ định số ký tự tối thiểu cần thiết cho một trường nhập liệu, trong khi thuộc tính maxlength định nghĩa số ký tự tối đa được phép.
• Trong ví dụ này, bạn có thể nhập văn bản từ 4 đến 12 ký tự.

Thuộc tính 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>

• Thuộc tính type="email" được sử dụng để đảm bảo đầu vào có định dạng địa chỉ email hợp lệ. Thuộc tính này cung cấp tính năng xác thực tích hợp sẵn cho các trường nhập địa chỉ email.

Thuộc tính 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"> cung cấp một trường nhập yêu cầu đúng định dạng URL. Trình duyệt tự động kiểm tra liệu đầu vào có phải là URL hợp lệ hay không.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video