Hướng dẫn how do you insert a validation in html? - làm cách nào để bạn chèn xác thực vào html?

Xác thực hình thức là gì?

Truy cập bất kỳ trang web phổ biến nào với biểu mẫu đăng ký và bạn sẽ nhận thấy rằng họ cung cấp phản hồi khi bạn không nhập dữ liệu của mình theo định dạng mà họ đang mong đợi. Bạn sẽ nhận được tin nhắn như:

• "Trường này là bắt buộc" (bạn không thể để trống trường này).
• "Vui lòng nhập số điện thoại của bạn theo định dạng xxx-xxxx" (một định dạng dữ liệu cụ thể là bắt buộc để nó được coi là hợp lệ).
• "Vui lòng nhập một địa chỉ email hợp lệ" (dữ liệu bạn đã nhập không ở định dạng phù hợp).
• "Mật khẩu của bạn cần phải dài từ 8 đến 30 ký tự và chứa một chữ hoa, một ký hiệu và một số." (Một định dạng dữ liệu rất cụ thể là bắt buộc cho dữ liệu của bạn).

Điều này được gọi là xác thực mẫu. Khi bạn nhập dữ liệu, trình duyệt và/hoặc máy chủ web sẽ kiểm tra xem dữ liệu ở định dạng chính xác và trong các ràng buộc được đặt bởi ứng dụng. Xác thực được thực hiện trong trình duyệt được gọi là xác thực phía máy khách, trong khi xác thực được thực hiện trên máy chủ được gọi là xác thực phía máy chủ. Trong chương này, chúng tôi đang tập trung vào xác thực phía khách hàng.form validation. When you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. In this chapter we are focusing on client-side validation.

Nếu thông tin được định dạng chính xác, ứng dụng cho phép dữ liệu được gửi đến máy chủ và (thường) được lưu trong cơ sở dữ liệu; Nếu thông tin không được định dạng chính xác, nó cung cấp cho người dùng một thông báo lỗi giải thích những gì cần phải sửa và cho phép họ thử lại.

Chúng tôi muốn làm cho việc điền vào các biểu mẫu web dễ dàng nhất có thể. Vậy tại sao chúng ta khăng khăng xác nhận các hình thức của chúng ta? Có ba lý do chính:

• Chúng tôi muốn có được dữ liệu phù hợp, theo định dạng phù hợp. Các ứng dụng của chúng tôi sẽ không hoạt động đúng nếu dữ liệu của người dùng của chúng tôi được lưu trữ ở định dạng sai, không chính xác hoặc bị bỏ qua hoàn toàn. Our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether.
• Chúng tôi muốn bảo vệ dữ liệu của người dùng. Buộc người dùng của chúng tôi nhập mật khẩu an toàn giúp bảo vệ thông tin tài khoản của họ dễ dàng hơn.. Forcing our users to enter secure passwords makes it easier to protect their account information.
• Chúng tôi muốn bảo vệ chính mình. Có nhiều cách mà người dùng độc hại có thể sử dụng sai các hình thức không được bảo vệ để làm hỏng ứng dụng. Xem bảo mật trang web.. There are many ways that malicious users can misuse unprotected forms to damage the application. See Website security.

  CẢNH BÁO: Không bao giờ tin tưởng dữ liệu được truyền vào máy chủ của bạn từ máy khách. Ngay cả khi biểu mẫu của bạn đang xác thực chính xác và ngăn chặn đầu vào bị dị tật ở phía máy khách, người dùng độc hại vẫn có thể thay đổi yêu cầu mạng. Never trust data passed to your server from the client. Even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request.

Các loại xác thực phía máy khách khác nhau

Có hai loại xác thực phía máy khách khác nhau mà bạn sẽ gặp trên web:

• Xác thực biểu mẫu tích hợp sử dụng các tính năng xác thực biểu mẫu HTML, mà chúng tôi đã thảo luận ở nhiều nơi trong suốt mô-đun này. Xác nhận này thường không yêu cầu nhiều JavaScript. Xác thực biểu mẫu tích hợp có hiệu suất tốt hơn JavaScript, nhưng nó không thể tùy chỉnh như xác thực JavaScript. uses HTML form validation features, which we've discussed in many places throughout this module. This validation generally doesn't require much JavaScript. Built-in form validation has better performance than JavaScript, but it is not as customizable as JavaScript validation.
• Xác thực JavaScript được mã hóa bằng JavaScript. Xác thực này hoàn toàn có thể tùy chỉnh, nhưng bạn cần tạo tất cả (hoặc sử dụng thư viện). validation is coded using JavaScript. This validation is completely customizable, but you need to create it all (or use a library).

Sử dụng xác thực biểu mẫu tích hợp

Một trong những tính năng quan trọng nhất của các điều khiển hình thức hiện đại là khả năng xác nhận hầu hết dữ liệu người dùng mà không cần dựa vào JavaScript. Điều này được thực hiện bằng cách sử dụng các thuộc tính xác thực trên các yếu tố biểu mẫu. Chúng tôi đã thấy nhiều trong số này sớm hơn trong khóa học, nhưng để tóm tắt lại:

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  8: Chỉ định xem một trường biểu mẫu có cần được điền trước khi có thể gửi biểu mẫu hay không.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9 và

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  0: Chỉ định độ dài tối thiểu và tối đa của dữ liệu văn bản (chuỗi).

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  1 và

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  2: Chỉ định các giá trị tối thiểu và tối đa của các loại đầu vào số.

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  3: Chỉ định liệu dữ liệu cần phải là số, địa chỉ email hoặc một số loại cài đặt trước cụ thể khác.

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  4: Chỉ định một biểu thức chính quy xác định một mẫu mà dữ liệu đã nhập cần phải tuân theo.

Nếu dữ liệu được nhập trong một trường biểu mẫu tuân theo tất cả các quy tắc được chỉ định bởi các thuộc tính trên, thì nó được coi là hợp lệ. Nếu không, nó được coi là không hợp lệ.

Khi một yếu tố hợp lệ, những điều sau đây là đúng:

• Phần tử phù hợp với lớp giả CSS, cho phép bạn áp dụng một kiểu cụ thể cho các yếu tố hợp lệ.
• Nếu người dùng cố gắng gửi dữ liệu, trình duyệt sẽ gửi biểu mẫu, miễn là không có gì khác ngăn không cho nó làm như vậy (ví dụ: JavaScript).

Khi một phần tử không hợp lệ, những điều sau đây là đúng:

• Phần tử phù hợp với lớp giả CSS và đôi khi các lớp giả UI khác (ví dụ:

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  7) tùy thuộc vào lỗi, cho phép bạn áp dụng một kiểu cụ thể cho các phần tử không hợp lệ.
• Nếu người dùng cố gắng gửi dữ liệu, trình duyệt sẽ chặn biểu mẫu và hiển thị thông báo lỗi.

Ví dụ xác nhận biểu mẫu tích hợp

Trong phần này, chúng tôi sẽ kiểm tra một số thuộc tính mà chúng tôi đã thảo luận ở trên.

Tệp bắt đầu đơn giản

Hãy bắt đầu với một ví dụ đơn giản: một đầu vào cho phép bạn chọn xem bạn thích chuối hay anh đào. Ví dụ này liên quan đến một văn bản đơn giản

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i-like" />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Để bắt đầu, hãy tạo một bản sao của

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

Thuộc tính cần thiết

Tính năng xác thực HTML đơn giản nhất là thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Thêm thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Lưu ý các CSS được bao gồm trong tệp ví dụ:

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

CSS này làm cho đầu vào có đường viền đứt nét màu đỏ khi nó không hợp lệ và một đường viền màu đen rắn tinh tế hơn khi hợp lệ. Chúng tôi cũng đã thêm một gradient nền khi đầu vào được yêu cầu và không hợp lệ. Hãy thử hành vi mới trong ví dụ dưới đây:

Hãy thử gửi biểu mẫu mà không có giá trị. Lưu ý cách đầu vào không hợp lệ được lấy nét, thông báo lỗi mặc định ("Vui lòng điền vào trường này") xuất hiện và biểu mẫu được ngăn chặn được gửi.

Sự hiện diện của thuộc tính

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Lưu ý: Đối với trải nghiệm người dùng tốt, hãy cho biết người dùng khi cần trường biểu mẫu. Nó không chỉ trải nghiệm người dùng tốt, nó được yêu cầu bởi các hướng dẫn tiếp cận WCAG. Ngoài ra, chỉ yêu cầu người dùng nhập dữ liệu bạn thực sự cần: ví dụ, tại sao bạn thực sự cần biết giới tính hoặc tiêu đề của ai đó? For good user experience, indicate to the user when form fields are required. It isn't only good user experience, it is required by WCAG accessibility guidelines. Also, only require users to input data you actually need: For example, why do you really need to know someone's gender or title?

Xác nhận dựa trên biểu thức chính quy

Một tính năng xác nhận hữu ích khác là thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

RegEXPS khá phức tạp và chúng tôi không có ý định dạy bạn một cách triệt để trong bài viết này. Dưới đây là một số ví dụ để cung cấp cho bạn một ý tưởng cơ bản về cách chúng hoạt động.

• <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  2 - khớp với một ký tự là

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  2 (không phải

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  4, không phải

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  5, v.v.).

• <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  6 - khớp

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  2, tiếp theo là

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  4, tiếp theo là

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  9.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  0 - khớp với

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  2, tùy chọn theo sau là một

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  4, tiếp theo là

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  9. (

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4 hoặc

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  6)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6 - khớp với

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  2, tùy chọn theo sau là bất kỳ số lượng

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  4 nào, tiếp theo là

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  9. (

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4,

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  6,

  <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    div>
    <div>
      <label for="number">How many would you like?label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  2, v.v.).

• <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    div>
    <div>
      <label for="number">How many would you like?label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  3 - khớp với một ký tự là

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  2 hoặc

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  4.

• <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    div>
    <div>
      <label for="number">How many would you like?label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  6 - khớp chính xác

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  6 hoặc chính xác

  <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    div>
    <div>
      <label for="number">How many would you like?label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  8 (nhưng không phải

  <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    div>
    <div>
      <label for="number">How many would you like?label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  9 hoặc

  <form>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submitbutton>
  form>
  

  2 hoặc

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  
  div {
    margin-bottom: 10px;
  }
  

  1, v.v.).

Có nhiều khả năng khác mà chúng tôi không bao gồm ở đây. Đối với một danh sách đầy đủ và nhiều ví dụ, hãy tham khảo tài liệu biểu thức thường xuyên của chúng tôi.

Hãy thực hiện một ví dụ. Cập nhật HTML của bạn để thêm thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or a cherry?label>
  <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Điều này cung cấp cho chúng tôi bản cập nhật sau - hãy thử nó:

Trong ví dụ này, phần tử

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Tại thời điểm này, hãy thử thay đổi giá trị bên trong thuộc tính

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Nếu giá trị không trống của

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Lưu ý: Một số loại phần tử

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <p>
    <fieldset>
      <legend>Do you have a driver's license?<span aria-label="required">*span>legend>
      
      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yeslabel>
      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">Nolabel>
    fieldset>
  p>
  <p>
    <label for="n1">How old are you?label>
    
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+">
  p>
  <p>
    <label for="t1">What's your favorite fruit?<span aria-label="required">*span>label>
    <input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Bananaoption>
      <option>Cherryoption>
      <option>Appleoption>
      <option>Strawberryoption>
      <option>Lemonoption>
      <option>Orangeoption>
    datalist>
  p>
  <p>
    <label for="t2">What's your e-mail address?label>
    <input type="email" id="t2" name="email">
  p>
  <p>
    <label for="t3">Leave a short messagelabel>
    <textarea id="t3" name="msg" maxlength="140" rows="5">textarea>
  p>
  <p>
    <button>Submitbutton>
  p>
form>

<form>
  <p>
    <fieldset>
      <legend>Do you have a driver's license?<span aria-label="required">*span>legend>
      
      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yeslabel>
      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">Nolabel>
    fieldset>
  p>
  <p>
    <label for="n1">How old are you?label>
    
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+">
  p>
  <p>
    <label for="t1">What's your favorite fruit?<span aria-label="required">*span>label>
    <input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Bananaoption>
      <option>Cherryoption>
      <option>Appleoption>
      <option>Strawberryoption>
      <option>Lemonoption>
      <option>Orangeoption>
    datalist>
  p>
  <p>
    <label for="t2">What's your e-mail address?label>
    <input type="email" id="t2" name="email">
  p>
  <p>
    <label for="t3">Leave a short messagelabel>
    <textarea id="t3" name="msg" maxlength="140" rows="5">textarea>
  p>
  <p>
    <button>Submitbutton>
  p>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <p>
    <fieldset>
      <legend>Do you have a driver's license?<span aria-label="required">*span>legend>
      
      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yeslabel>
      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">Nolabel>
    fieldset>
  p>
  <p>
    <label for="n1">How old are you?label>
    
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+">
  p>
  <p>
    <label for="t1">What's your favorite fruit?<span aria-label="required">*span>label>
    <input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Bananaoption>
      <option>Cherryoption>
      <option>Appleoption>
      <option>Strawberryoption>
      <option>Lemonoption>
      <option>Orangeoption>
    datalist>
  p>
  <p>
    <label for="t2">What's your e-mail address?label>
    <input type="email" id="t2" name="email">
  p>
  <p>
    <label for="t3">Leave a short messagelabel>
    <textarea id="t3" name="msg" maxlength="140" rows="5">textarea>
  p>
  <p>
    <button>Submitbutton>
  p>
form>

<form>
  <p>
    <fieldset>
      <legend>Do you have a driver's license?<span aria-label="required">*span>legend>
      
      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yeslabel>
      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">Nolabel>
    fieldset>
  p>
  <p>
    <label for="n1">How old are you?label>
    
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+">
  p>
  <p>
    <label for="t1">What's your favorite fruit?<span aria-label="required">*span>label>
    <input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Bananaoption>
      <option>Cherryoption>
      <option>Appleoption>
      <option>Strawberryoption>
      <option>Lemonoption>
      <option>Orangeoption>
    datalist>
  p>
  <p>
    <label for="t2">What's your e-mail address?label>
    <input type="email" id="t2" name="email">
  p>
  <p>
    <label for="t3">Leave a short messagelabel>
    <textarea id="t3" name="msg" maxlength="140" rows="5">textarea>
  p>
  <p>
    <button>Submitbutton>
  p>
form>

Hạn chế độ dài của các mục nhập của bạn

Bạn có thể hạn chế độ dài ký tự của tất cả các trường văn bản được tạo bởi

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <p>
    <fieldset>
      <legend>Do you have a driver's license?<span aria-label="required">*span>legend>
      
      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yeslabel>
      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">Nolabel>
    fieldset>
  p>
  <p>
    <label for="n1">How old are you?label>
    
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+">
  p>
  <p>
    <label for="t1">What's your favorite fruit?<span aria-label="required">*span>label>
    <input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Bananaoption>
      <option>Cherryoption>
      <option>Appleoption>
      <option>Strawberryoption>
      <option>Lemonoption>
      <option>Orangeoption>
    datalist>
  p>
  <p>
    <label for="t2">What's your e-mail address?label>
    <input type="email" id="t2" name="email">
  p>
  <p>
    <label for="t3">Leave a short messagelabel>
    <textarea id="t3" name="msg" maxlength="140" rows="5">textarea>
  p>
  <p>
    <button>Submitbutton>
  p>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Các trình duyệt thường không để người dùng nhập giá trị dài hơn dự kiến ​​vào các trường văn bản. Trải nghiệm người dùng tốt hơn là chỉ sử dụng

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Hạn chế các giá trị của các mục nhập của bạn

Đối với các trường số (nghĩa là

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)label>
  <input id="choose" name="i-like" required />
  <button>Submitbutton>
form>

Hãy xem xét một ví dụ khác. Tạo một bản sao mới của tệp fruit-start.html.

Bây giờ xóa nội dung của phần tử

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

<form>
  <div>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input
      type="text"
      id="choose"
      name="i-like"
      required
      minlength="6"
      maxlength="6" />
  div>
  <div>
    <label for="number">How many would you like?label>
    <input type="number" id="number" name="amount" value="1" min="1" max="10" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

• Ở đây bạn sẽ thấy rằng chúng tôi đã cho trường

  form {
    font: 1em sans-serif;
    max-width: 320px;
  }
  
  p > label {
    display: block;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea,
  fieldset {
    width: 100%;
    border: 1px solid #333;
    box-sizing: border-box;
  }
  
  input:invalid {
    box-shadow: 0 0 5px 1px red;
  }
  
  input:focus:invalid {
    box-shadow: none;
  }
  

  4 một

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9 và

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  0 của sáu, có cùng chiều dài với chuối và anh đào.
• Chúng tôi cũng đã cho trường

  form {
    font: 1em sans-serif;
    max-width: 320px;
  }
  
  p > label {
    display: block;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea,
  fieldset {
    width: 100%;
    border: 1px solid #333;
    box-sizing: border-box;
  }
  
  input:invalid {
    box-shadow: 0 0 5px 1px red;
  }
  
  input:focus:invalid {
    box-shadow: none;
  }
  

  7

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  1 của một và

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  2 của mười. Đã nhập các số bên ngoài phạm vi này sẽ hiển thị là không hợp lệ; Người dùng sẽ không thể sử dụng mũi tên tăng/giảm để di chuyển giá trị bên ngoài phạm vi này. Nếu người dùng theo cách thủ công một số bên ngoài phạm vi này, dữ liệu không hợp lệ. Số không cần thiết, vì vậy việc loại bỏ giá trị vẫn sẽ dẫn đến giá trị hợp lệ.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}

Đây là ví dụ chạy trực tiếp:

Lưu ý:

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Ví dụ đầy đủ

Dưới đây là một ví dụ đầy đủ để hiển thị việc sử dụng các tính năng xác nhận tích hợp của HTML. Đầu tiên, một số HTML:

<form>
  <p>
    <fieldset>
      <legend>Do you have a driver's license?<span aria-label="required">*span>legend>
      
      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yeslabel>
      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">Nolabel>
    fieldset>
  p>
  <p>
    <label for="n1">How old are you?label>
    
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+">
  p>
  <p>
    <label for="t1">What's your favorite fruit?<span aria-label="required">*span>label>
    <input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Bananaoption>
      <option>Cherryoption>
      <option>Appleoption>
      <option>Strawberryoption>
      <option>Lemonoption>
      <option>Orangeoption>
    datalist>
  p>
  <p>
    <label for="t2">What's your e-mail address?label>
    <input type="email" id="t2" name="email">
  p>
  <p>
    <label for="t3">Leave a short messagelabel>
    <textarea id="t3" name="msg" maxlength="140" rows="5">textarea>
  p>
  <p>
    <button>Submitbutton>
  p>
form>

Và bây giờ một số CSS để tạo kiểu HTML:

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

Điều này hiển thị như sau:

Xem các thuộc tính liên quan đến xác thực để biết danh sách đầy đủ các thuộc tính có thể được sử dụng để hạn chế các giá trị đầu vào và các loại đầu vào hỗ trợ chúng.

Xác thực các biểu mẫu bằng cách sử dụng JavaScript

Bạn phải sử dụng JavaScript nếu bạn muốn kiểm soát giao diện của các thông báo lỗi bản địa. Trong phần này, chúng tôi sẽ xem xét các cách khác nhau để làm điều này.

API xác nhận ràng buộc

Hầu hết các trình duyệt đều hỗ trợ API xác thực ràng buộc, bao gồm một tập hợp các phương thức và thuộc tính có sẵn trên các giao diện DOM phần tử biểu mẫu sau:

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  06 (đại diện cho phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:invalid:required {
    background-image: linear-gradient(to right, pink, lightgreen);
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  0)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  08 (đại diện cho phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  09)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  10 (đại diện cho một phần tử

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)label>
    <input id="choose" name="i-like" required />
    <button>Submitbutton>
  form>
  

  8)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  12 (đại diện cho một phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  13)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  14 (đại diện cho phần tử

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  15)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  16 (đại diện cho phần tử

  <form>
    <p>
      <fieldset>
        <legend>Do you have a driver's license?<span aria-label="required">*span>legend>
        
        <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yeslabel>
        <input type="radio" required name="driver" id="r2" value="no"><label for="r2">Nolabel>
      fieldset>
    p>
    <p>
      <label for="n1">How old are you?label>
      
      <input type="number" min="12" max="120" step="1" id="n1" name="age"
             pattern="\d+">
    p>
    <p>
      <label for="t1">What's your favorite fruit?<span aria-label="required">*span>label>
      <input type="text" id="t1" name="fruit" list="l1" required
             pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
      <datalist id="l1">
        <option>Bananaoption>
        <option>Cherryoption>
        <option>Appleoption>
        <option>Strawberryoption>
        <option>Lemonoption>
        <option>Orangeoption>
      datalist>
    p>
    <p>
      <label for="t2">What's your e-mail address?label>
      <input type="email" id="t2" name="email">
    p>
    <p>
      <label for="t3">Leave a short messagelabel>
      <textarea id="t3" name="msg" maxlength="140" rows="5">textarea>
    p>
    <p>
      <button>Submitbutton>
    p>
  form>
  

  3)

API xác thực ràng buộc làm cho các thuộc tính sau có sẵn trên các yếu tố trên.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  18: Trả về một thông báo được bản địa hóa mô tả các ràng buộc xác thực mà điều khiển không thỏa mãn (nếu có). Nếu điều khiển không phải là ứng cử viên để xác thực ràng buộc (

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  19 là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  20) hoặc giá trị của phần tử thỏa mãn các ràng buộc của nó (là hợp lệ), điều này sẽ trả về một chuỗi trống.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  21: Trả về một đối tượng

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  22 chứa một số thuộc tính mô tả trạng thái hợp lệ của phần tử. Bạn có thể tìm thấy chi tiết đầy đủ của tất cả các thuộc tính có sẵn trong trang tham chiếu

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  22; Dưới đây được liệt kê một vài trong số những cái phổ biến hơn:

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    24: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25 nếu giá trị không khớp với

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    4 được chỉ định và

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20 nếu nó phù hợp. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 CSS Pseudo-Class.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    29: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25 nếu giá trị dài hơn độ dài tối đa được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    0 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20 nếu nó ngắn hơn hoặc bằng tối đa. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 CSS Pseudo-Class.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    34: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25 nếu giá trị ngắn hơn độ dài tối thiểu được chỉ định bởi thuộc tính

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    9 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20 nếu nó lớn hơn hoặc bằng tối thiểu. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 CSS Pseudo-Class.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    39: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25 nếu giá trị lớn hơn mức tối đa được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    2 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20 nếu nó nhỏ hơn hoặc bằng tối đa. Nếu đúng, phần tử phù hợp với các lớp giả

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 và ____27 CSS.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    45: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25 nếu giá trị nhỏ hơn mức tối thiểu được chỉ định bởi thuộc tính

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    1 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20 nếu nó lớn hơn hoặc bằng tối thiểu. Nếu đúng, phần tử phù hợp với các lớp giả

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 và ____27 CSS.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    51: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25 nếu giá trị không nằm trong cú pháp bắt buộc (khi

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    3 là

    <form>
      <p>
        <fieldset>
          <legend>Do you have a driver's license?<span aria-label="required">*span>legend>
          
          <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yeslabel>
          <input type="radio" required name="driver" id="r2" value="no"><label for="r2">Nolabel>
        fieldset>
      p>
      <p>
        <label for="n1">How old are you?label>
        
        <input type="number" min="12" max="120" step="1" id="n1" name="age"
               pattern="\d+">
      p>
      <p>
        <label for="t1">What's your favorite fruit?<span aria-label="required">*span>label>
        <input type="text" id="t1" name="fruit" list="l1" required
               pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
        <datalist id="l1">
          <option>Bananaoption>
          <option>Cherryoption>
          <option>Appleoption>
          <option>Strawberryoption>
          <option>Lemonoption>
          <option>Orangeoption>
        datalist>
      p>
      <p>
        <label for="t2">What's your e-mail address?label>
        <input type="email" id="t2" name="email">
      p>
      <p>
        <label for="t3">Leave a short messagelabel>
        <textarea id="t3" name="msg" maxlength="140" rows="5">textarea>
      p>
      <p>
        <button>Submitbutton>
      p>
    form>
    

    0 hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    55) hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20 nếu cú ​​pháp là chính xác. Nếu

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 CSS Pseudo-Class.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    59: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25 nếu phần tử đáp ứng tất cả các ràng buộc xác thực của nó và do đó được coi là hợp lệ hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20 nếu nó không có bất kỳ ràng buộc nào. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    5 CSS Pseudo-Class;

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 CSS Pseudo-Class khác.

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    64: Trả về

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    25 Nếu phần tử có thuộc tính

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    8, nhưng không có giá trị, hoặc

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    20 khác. Nếu đúng, phần tử phù hợp với

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)label>
      <input id="choose" name="i-like" required />
      <button>Submitbutton>
    form>
    

    6 CSS Pseudo-Class.

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  19: Trả về

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  25 nếu phần tử sẽ được xác thực khi biểu mẫu được gửi;

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  20 Nếu không.