search

Bắt buộc nhập trong html

Ngày đăng: 29/10/2022
Trả lời: 0
Lượt xem: 3

  • Trang chủ
  • Tutorials
  • HTML
  • HTML cơ bản

Show

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:

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?

Bắt buộc nhập trong html

Đăng ký tư vấn

Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký

Được cập nhật các ưu đãi sớm nhất

Hotline: 0383180086

Bắt buộc nhập trong html

Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội

Bắt buộc nhập trong html

Bài viết được sự cho phép của tác giả Lưu Bình An

Vì form quá phức tạp, chúng ta cần thêm một bài viết nữa về validation với html.

Với HTML5 chúng ta có một số kiểu input để validate những giá trị mà user đưa vào, ko cần tự viết javascript để check, chỉ đơn giản là khai báo mấy cái attribute, trường hợp phức tạp hơn, chúng ta có thể can thiệp trong cái Validation API để có kết quả mong muốn

Luôn nhớ validate ở phía client không có nghĩa là ko cần đến validate ở server.

Một vài ràng buộc phổ biến

Dùng kiểu input : bắt buộc là giá trị email : bắt buộc là giá trị url

Dùng attribute khác

Bắt buộc nhập trong html

AttributeKiểu input hỗ trợGiải thích
pattern text, search, url, tel, email, password phải khớp với giá trị regular expression
min range, number, date, month, week, datetime, datetime-local, time giá trị phải lớn hơn hoặc bằng giá trị min
max range, number, date, month, week, datetime, datetime-local, time giá trị phải nhỏ hơn hoặc bằng giá trị max
required text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file, select, textarea bắt buộc phải có giá trị
minlength text, search, url, tel, email, password, textarea số ký tự nhập vào phải thỏa lớn hơn hoặc bằng minlength
maxlength text, search, url, tel, email, password, textarea số ký tự nhập vào phải thỏa nhỏ hơn hoặc bằng maxlength

Ví dụ

<form>
  <label for="name">Enter username (upper and lowercase letters): label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
  <button>Submitbutton>
form>

Quá trình validate dữ liệu

Quá trình này sẽ thông qua bộ Validation API, nó có thể là trên cả form hoặc trên từng element trong form. Được thực hiện bằng một trong các cách sau bằng cách gọi checkValidity() của các element input, select, button, textarea. Nó sẽ chỉ validate dữ liệu trên element đó thôi. Nó thường được thực hiện bởi trình duyệt, sau đó chúng ta dùng selector của CSS là :valid và :invalid để format gọi checkValidity() hoặc reportValidity() trên thằng form Khi form được submit bằng click ‘hoặc ‘