Sử dụng HTML5 để tạo trường yêu cầu bắt buộc nhập

Ngày đăng: 25/10/2018 - Cập nhật: 20/07/2019

Mục Lục

Bạn có thể yêu cầu các trường biểu mẫu cụ thể để người dùng của bạn không thể gửi biểu mẫu của bạn cho đến khi người đó điền họ.

Ví dụ: Nếu bạn muốn tạo trường nhập văn bản bắt buộc, bạn chỉ có thể thêm thuộc tính required trong phần tử input của bạn, như sau:
<input type="text" required="">

Dĩ nhiên là sau này chúng ta sẽ xử lý form bằng Javascript. Nhưng hiện tại chúng ta sử dụng HTML5 thuần túy.

Bài tập

Hãy nhập tạo một trường nhập văn bản bắt buộc để người dùng của bạn không thể gửi biểu mẫu mà không hoàn thành trường này.

Sau đó, hãy thử gửi biểu mẫu mà không cần nhập bất kỳ văn bản nào. Xem cách biểu mẫu HTML5 của bạn thông báo cho bạn rằng đây là trường là bắt buộc nhập?

            <h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
    <button type="submit">Submit</button>
  </form>
</main>

Về trang trước

Gửi email in trang