Xác thực dữ liệu đầu vào

6.1 Thuộc tính required

Xác thực dữ liệu trong các form là một khía cạnh quan trọng của phát triển web, giúp đảm bảo tính đúng đắn và toàn vẹn của thông tin được nhập vào. HTML cung cấp nhiều thuộc tính tích hợp để kiểm tra dữ liệu đầu vào, như required, pattern, min, max, cũng như các thuộc tính placeholder và value, để nâng cao trải nghiệm người dùng với form.

Thuộc tính required cho biết rằng trường nhập là bắt buộc. Trình duyệt sẽ không cho phép gửi form nếu trường được đánh dấu như required không được điền.

Cú pháp

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

Ví dụ sử dụng

    
      <form action="/" method="post">
        <label for="username">Tên người dùng:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">Gửi</button>
      </form>
    
  

Giải thích

Nếu thuộc tính required được chỉ định, người dùng phải điền vào trường trước khi gửi form. Nếu trường để trống, trình duyệt sẽ hiển thị thông báo lỗi và không gửi form.

6.2 Thuộc tính pattern

Thuộc tính pattern cho phép đặt biểu thức chính quy để kiểm tra dữ liệu đầu vào. Nếu dữ liệu nhập vào không khớp với mẫu quy định, trình duyệt sẽ hiển thị thông báo lỗi và không gửi form.

Cú pháp

    
      <input type="text" name="username" pattern="[A-Za-z]{3,}">
    
  

Ví dụ sử dụng

Thuộc tính pattern đặt biểu thức chính quy, mà dữ liệu nhập vào cần khớp với. Trong ví dụ này, tên người dùng chỉ được chứa chữ và dài ít nhất ba ký tự.

    
      <form action="/" method="post">
        <label for="username">Tên người dùng (chỉ chữ cái, tối thiểu 3 ký tự):</label>
        <input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
        <button type="submit">Gửi</button>
      </form>
    
  

6.3 Các thuộc tính min và max

Các thuộc tính min và max được sử dụng để đặt giá trị tối thiểu và tối đa cho phép đối với các trường số và ngày tháng.

Cú pháp

    
      <input type="number" name="age" min="18" max="99">
    
  

Ví dụ sử dụng

Trường số

• min: đặt giá trị tối thiểu cho phép. Trong ví dụ này, tuổi tối thiểu là 18
• max: đặt giá trị tối đa cho phép. Trong ví dụ này, tuổi tối đa là 99

    
      <form action="/" method="post">
        <label for="birthday">Ngày sinh (từ 1900-01-01 đến 2024-12-31):</label>
        <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
        <button type="submit">Gửi</button>
      </form>
    
  

6.4 Thuộc tính placeholder

Thuộc tính placeholder đặt một văn bản mẫu, được hiển thị bên trong trường nhập, cho đến khi người dùng bắt đầu nhập dữ liệu. Thuộc tính này giúp người dùng hiểu loại dữ liệu nào được mong đợi trong trường này.

Cú pháp

    
      <input type="text" name="username" placeholder="Nhập tên người dùng">
    
  

Ví dụ sử dụng

Thuộc tính placeholder hiển thị văn bản bên trong trường nhập cho đến khi người dùng bắt đầu nhập dữ liệu. Trong ví dụ này, văn bản mẫu là "Nhập tên người dùng".

    
      <form action="/" method="post">
        <label for="username">Tên người dùng:</label>
        <input type="text" id="username" name="username" placeholder="Nhập tên người dùng" required>
        <button type="submit">Gửi</button>
      </form>
    
  

6.5 Thuộc tính value

Thuộc tính value đặt giá trị ban đầu cho phần tử nhập liệu. Giá trị này sẽ được hiển thị trong trường khi trang được tải hoặc form được đặt lại.

Cú pháp

    
      <input type="text" name="username" value="default user">
    
  

Ví dụ sử dụng

Thuộc tính value đặt giá trị ban đầu cho trường nhập liệu. Trong ví dụ này, tên người dùng mặc định là "default user".

    
      <form action="/" method="post">
        <label for="username">Tên người dùng:</label>
        <input type="text" id="username" name="username" value="default user" required>
        <button type="submit">Gửi</button>
      </form>
    
  

1

Khảo sát/đố vui

, cấp độ , bài học

Không có sẵn

Các biểu mẫu trong HTML

Các biểu mẫu trong HTML

Mở