Đầu vào HTML không hoạt động

Bài viết này nhằm mục đích xác định những lý do cốt lõi có thể gây ra vấn đề này. Vì vậy, hãy hít thở, lấy một tách cà phê và đọc cái này

nội dung

• Điểm nổi bật chính
• Vai trò của thuộc tính bắt buộc đối với xác thực biểu mẫu HTML5
• Lý do tại sao HTML bắt buộc không hoạt động
  • – Xuất hiện các ký tự không mong muốn hoặc thẻ HTML không được bắt đầu hoặc đóng
  • – Sự hiện diện của thuộc tính không xác thực
  • – Missing Out on the Encapsulation or Action/Method Attributes
  • – Không có thuộc tính tên
  • – Thiếu Meta Charset
• Ứng dụng của HTML Chọn thuộc tính bắt buộc
• Ứng dụng của trường đầu vào vô tuyến
• Lời khuyên cuối cùng

Điểm nổi bật chính

• Hiểu vai trò của Thuộc tính bắt buộc đối với Xác thực biểu mẫu HTML5
• Các trường hợp khi Thuộc tính bắt buộc không hoạt động và cách khắc phục sự cố
• Ứng dụng yêu cầu trên các trường
• Ứng dụng của trường Đầu vào Radio

Vai trò của thuộc tính bắt buộc đối với xác thực biểu mẫu HTML5

Điều gì xảy ra khi người dùng cố gắng đăng ký tại một trang web hoặc cổng web và bất kỳ trường bắt buộc nào bị bỏ trống trong biểu mẫu nhập dữ liệu? . Họ nhận được một lời nhắc, phải không?

'Bắt buộc' là một thuộc tính boolean hoạt động như một hệ thống xác thực tích hợp trong HTML5. Nó hỗ trợ các đầu vào. bộ chọn ngày, số, hộp kiểm, radio, tệp, văn bản, tìm kiếm, URL, điện thoại, email và mật khẩu

Ưu điểm cốt lõi của nó là nó đơn giản hóa quy trình xác thực đầu vào mà không cần mã JavaScript phức tạp. Có vẻ đơn giản như vậy, các lập trình viên vẫn phải đối mặt với các trục trặc đánh dấu trong đó lệnh từ chối hoạt động. Vậy lam gi?

Lý do tại sao HTML bắt buộc không hoạt động

Theo quy tắc chung, mọi điều khiển biểu mẫu HTML có thuộc tính bắt buộc phải có giá trị để gửi thành công. Vì vậy, nếu có bất kỳ trường nào có giá trị null, nó sẽ ngăn không cho biểu mẫu được gửi trong các trình duyệt hỗ trợ xác thực ràng buộc. Điều đó nói rằng, đây là những nguyên nhân phổ biến của vấn đề này

– Xuất hiện các ký tự không mong muốn hoặc thẻ HTML không được bắt đầu hoặc đóng

Một chi tiết nhỏ, các lập trình viên đang làm việc nhanh chóng để viết mã không thể bỏ lỡ việc đóng thẻ một cách nhất quán. Nếu thẻ đầu vào của bạn không đầy đủ và chính xác, nó sẽ khiến thuộc tính không hoạt động. Vì vậy, đảm bảo rằng nó giống như sau

Ngoài các thẻ bắt đầu và thẻ đóng, một nhiệm vụ khác của người viết mã là ngăn các ký tự không mong muốn, chẳng hạn như khoảng trắng hoặc trường trống trong elements. To prevent this, the Input Events such as keypress, keydown, and beforeinput are the handiest. Of course, the next best thing is the Pattern Attribute which is approached during form submission and using validation on the entire value of the input.

– Sự hiện diện của thuộc tính không xác thực

Tương tự như các ký tự không mong muốn, một nguyên nhân khác gây vô hiệu hóa tính năng xác thực thuộc tính bắt buộc của HTML là sự hiện diện của thuộc tính novalidate trong đánh dấu. Bây giờ, novalidate được sử dụng để thực hiện xác thực phía máy khách, nhưng nó không được sử dụng tốt cho xác thực phía máy chủ. Vì vậy, sử dụng nó một cách khôn ngoan. Và nếu bạn vẫn tìm thấy nó ở phía máy chủ, thì hãy xóa nó bằng đoạn mã sau trong hàm. tập tin php của chủ đề hiện tại

Với novalidate vô hiệu hóa xác thực biểu mẫu, người dùng có thể lưu tiến trình. Nó cho phép họ tiếp tục với hoạt động trực tuyến của mình và hoàn tất quy trình gửi sau này

– Missing Out on the Encapsulation or Action/Method Attributes

Thuộc tính bắt buộc HTML5 cần các thành phần đầu vào bên trong thẻ dưới dạng đóng gói. Các yếu tố này có thể được sử dụng để bổ sung cho giao diện người dùng đồ họa của tài liệu khi chúng không xuất hiện. Tất cả các yếu tố đầu vào phản ứng với các sự kiện nội bộ nhất định.

Nếu bạn vẫn cần bất kỳ trường đầu vào HTML5 nào bên ngoài biểu mẫu hoặc chỉ định một id riêng cho đầu vào, bạn có thể sử dụng JavaScript và viết mã các giá trị theo cách thủ công trước khi gửi

Ngoài ra, việc bỏ sót thuộc tính phương thức hoặc hành động trong thẻ biểu mẫu có thể làm gián đoạn quá trình xác thực. Thuộc tính hành động chỉ định nơi gửi dữ liệu biểu mẫu sau khi gửi. Mặt khác, thuộc tính phương thức xác định cách dữ liệu sẽ được gửi dưới dạng biến URL hoặc giao dịch bài đăng HTTP

– Không có thuộc tính tên

Tên không phải là thành phần bắt buộc mà là định danh thuộc tính bắt buộc. Các trường không có tên không được coi là một phần của nội dung gửi và do đó, bị bỏ qua trong quá trình xác thực

Trường không hợp lệ đầu tiên sẽ được đưa vào tiêu điểm bất cứ khi nào biểu mẫu được gửi. Nếu một trường bắt buộc không có giá trị, các trình duyệt sẽ đưa ra một "gợi ý" rằng nó nên được điền vào. Bạn có thể sử dụng thuộc tính giữ chỗ HTML để thiết lập gợi ý. Gợi ý là giá trị dự kiến ​​xuất hiện trước người dùng, chẳng hạn như tên, DOB hoặc thông tin khác

– Thiếu Meta Charset

Vấn đề này là một thực tế ít được biết đến rằng việc thiếu Siêu dữ liệu có thể là nguyên nhân chính khiến HTML5 yêu cầu của bạn không hoạt động. Bạn nên luôn chỉ định mã hóa được sử dụng cho trang HTML. Nếu không, nó có thể hiểu sai ngôn ngữ của trang và cũng làm gián đoạn các trường bắt buộc

Kiểm tra phần đầu của trang để tìm thẻ . Nếu nó không có ở đó, hãy khai báo như vậy. Có tồn tại các tùy chọn mã hóa khác, nhưng UTF-8 là lựa chọn tiêu chuẩn vì bộ ký tự phổ quát của nó bao gồm gần như mọi ký tự từ bất kỳ ngôn ngữ nào của con người. Phần tử này chỉ định mã hóa ký tự của tài liệu hoặc bộ ký tự được phép sử dụng. Nó có nghĩa là trang web của bạn sẽ có khả năng hiển thị bất kỳ ngôn ngữ nào. Vì vậy, bất cứ ngày nào cũng nên đưa cài đặt này vào mọi trang web bạn phát triển.

5 điểm này gần như là một vòng xoay của tất cả các yếu tố có thể vô hiệu hóa hoặc làm gián đoạn quá trình xác thực thuộc tính bắt buộc của bạn và ở đây, hy vọng rằng bạn đã tìm thấy câu trả lời phù hợp và tốt. Nhưng vẫn còn một số điểm liên quan khác để khám phá

Ứng dụng của HTML Chọn thuộc tính bắt buộc

Danh sách thả xuống được sử dụng nhanh chóng trong các biểu mẫu HTML. Thẻ chỉ định người dùng được yêu cầu chọn một giá trị trước khi gửi biểu mẫu. Ví dụ: tùy chọn ngân hàng hoặc tháng/ngày. Bây giờ, nếu bạn có một trường bắt buộc để gửi biểu mẫu mà người dùng phải chọn từ danh sách thả xuống thì sao? . tag to specify it.

Thẻ hoạt động giống như tất cả các Thuộc tính toàn cầu khác bao gồm, tự động hoàn thành, bị vô hiệu hóa, nhiều, v.v. Mọi trình duyệt chính đều hỗ trợ thuộc tính này, Chrome, Firefox, Opera, Edge, Safari và nhiều trình duyệt khác. Tuy nhiên, nó phù hợp hơn với cuộc thảo luận này ở đây vì đầu vào bắt buộc chọn HTML không hoạt động là một câu chuyện khác

Thuộc tính bắt buộc có trong phần tử chọn HTML. Nếu nó không hiệu quả với bạn, hãy thử kiểm tra lại trường “giá trị đầu tiên”. Bạn cần một giá trị trống ở đó

Theo quy tắc xác thực ràng buộc, các phần tử được chỉ định trong thuộc tính bắt buộc có thể bị thiếu do các nguyên nhân sau

• Nhãn giữ chỗ là tùy chọn duy nhất trong danh sách tùy chọn của phần tử được chọn với tính chọn lọc của nó được đặt thành true
• Không có thành phần tùy chọn nào trong danh sách tùy chọn của thành phần được chọn có tính chọn lọc được đặt thành true
• Các phần tử được chỉ định và có thể thay đổi với các thuộc tính bắt buộc được chỉ định có giá trị chuỗi trống

Lưu ý rằng tùy chọn nhãn giữ chỗ là cần thiết cho các phần tử chỉ có một kích thước hiển thị và không có nhiều thuộc tính.

Ứng dụng của trường đầu vào vô tuyến

Thuộc tính HTML Dom Input Radio được sử dụng để sử dụng tốt nút radio với thuộc tính bắt buộc. Với điều này, các lập trình viên có thể đặt hoặc trả về việc có nên kiểm tra Trường vô tuyến đầu vào hay không. Thuộc tính được sử dụng để phản ánh trường bắt buộc HTML

Không cần thiết phải thiết lập các thuộc tính bắt buộc cho các nút radio cho đến khi và trừ khi chúng được tạo động. Tuy nhiên, nếu bạn đang làm việc với các nút radio nhóm, hãy đảm bảo rằng tất cả chúng đều có cùng giá trị tên. Bằng cách đó, bạn có thể áp dụng thuộc tính bắt buộc cho toàn bộ nhóm và cho phép tất cả các nút được chọn đồng thời. Kết hợp các thẻ với các nút radio thậm chí còn hiệu quả hơn.

Lời khuyên cuối cùng

Bây giờ, chúng ta đã hoàn thành hành trình khám phá tất cả các chủ đề liên quan đến yêu cầu đầu vào không hoạt động. Chúng tôi đã ghi lại một cách toàn diện tất cả các lý do đằng sau vấn đề này và rất có thể, lý do này hay lý do khác sẽ giải quyết được vấn đề của bạn. Bây giờ, hãy để chúng tôi có một cái nhìn tổng quan về tất cả những phát hiện trong một danh sách ngắn gọn dễ nhớ cho bạn

• Bạn có thể kiểm soát quy trình xác thực đầu vào mà không cần JavaScript
• Để điều tra nguyên nhân khiến HTML của bạn không thành công, hãy bắt đầu bằng cách xem liệu có bất kỳ giá trị null nào không
• Mã hóa HTML có thể dễ dàng kiểm soát với sự trợ giúp của các yếu tố đầu vào
• Việc đặt sai vị trí của các ký tự có thể tạo hoặc phá vỡ mã của bạn, vì vậy hãy luôn ngăn chặn các ký tự không mong muốn
• Xóa thuộc tính novalidate khỏi xác thực phía máy chủ
• Giữ các yếu tố của bạn dưới sự đóng gói

Người dùng cần một giao diện người dùng liền mạch và sắc nét, và giai đoạn gửi biểu mẫu quan trọng hơn đối với các trang thanh toán, từ ngân hàng trực tuyến, khảo sát, biểu mẫu đăng ký, biểu mẫu yêu cầu. Người dùng web cần sự thuận tiện liền mạch, đa nền tảng

Các đầu vào không chỉ cần hoạt động cho chúng mà còn thay mặt chúng thông qua tính năng tự động hoàn thành và các thuộc tính khác. Sự chú ý của bạn đến từng chi tiết sẽ giúp ích rất nhiều trong việc tạo ra những trải nghiệm web đáng kinh ngạc. Vì vậy, mã với sự tự tin

Đánh giá bài viết này

• Tác giả
• Bài viết gần đây