Css có thể được sử dụng để xác thực không?
|
Dịch vụ xác thực CSS của W3C có thể được sử dụng để kiểm tra tính đúng đắn (tính hợp lệ) của W3. CSS Show
Cảnh báo xác thựcTrình xác thực CSS của W3C kiểm tra các thuộc tính CSS1, CSS2, CSS3 và CSS4 Một số trình duyệt sử dụng tiện ích mở rộng của nhà cung cấp để mô phỏng các thuộc tính CSS3 và CSS4 Tiện ích mở rộng của nhà cung cấp có thể tạo cảnh báo trong quy trình xác thực W3 CSS Tiện ích mở rộng nhà cung cấpW3. CSS sử dụng tiện ích mở rộng của nhà cung cấp để hỗ trợ các trình duyệt cũ hơn Các nhà cung cấp trình duyệt đang làm việc để ngừng sử dụng tiền tố trong các phiên bản trình duyệt trong tương lai Cho đến lúc đó, một số tiện ích mở rộng sẽ phải được sử dụng để làm cho CSS hiện đại hoạt động trên tất cả các trình duyệt Dưới đây là danh sách các phần mở rộng nhà cung cấp phổ biến nhất được sử dụng Tiện ích mở rộng Trình duyệt-webkit-Chrome, Safari, Opera-moz-Firefox-trên-Phiên bản Opera cũ-ms-Microsoft Edge và Internet ExplorerHãy tạo một biểu mẫu đơn giản và xem xét tất cả các kỹ thuật xác thực HTML và CSS mà chúng ta có thể sử dụng và sau đó thậm chí gửi biểu mẫuTuần trước, chúng tôi đã xây dựng một trường nhập liệu nâng cao mang tính tương tác và sinh động, thậm chí còn bao gồm một số tính năng tự xác thực và chúng tôi hoàn toàn không sử dụng JavaScript Trọng tâm chủ yếu là các tương tác và kiểu dáng của chuột và bàn phím tùy thuộc vào trạng thái xác thực. Nhưng chúng ta có thể làm nhiều hơn thế Lần này, chúng tôi sẽ thêm xác thực và gửi biểu mẫu chỉ bằng CSS và HTML Các trường nhập do trình duyệt cung cấpCác trường nhập thông thường với 2, như tên của chúng gợi ý chính xác, cho phép bạn nhập một số văn bản. Chúng tôi có thể làm rõ thêm loại văn bản mà chúng tôi đang mong đợi bằng cách yêu cầu nhập một số ký tự nhất định trước khi đầu vào có thể hợp lệ và biểu mẫu được gửi. Điều này có thể được xác định bằng các thuộc tính 3 và 4. Chúng ta cũng có thể sử dụng thuộc tính bắt buộc 5 để chỉ ra rằng đầu vào phải có một số giá trị trước khi nó có thể hợp lệ Chỉ giới hạn độ dài ký tự có thể không đủ để xác thực một loạt các loại trường biểu mẫu khác, nhưng điều tuyệt vời là những loại phổ biến nhất có loại dành riêng cho chúng. Việc xác thực email chắc chắn không chỉ đơn giản là kiểm tra độ dài ký tự, vì vậy thật tuyệt khi chúng tôi có thể dựa vào trình duyệt để thực hiện việc này cho mình Trường nhập này hiện sẽ chỉ chấp nhận địa chỉ email trước khi thay đổi trạng thái xác thực từ không hợp lệ thành hợp lệ Tương tự, chúng ta cũng có thể yêu cầu trình duyệt kiểm tra xem đầu vào có phải là một URL hợp lệ hay không Kiểu nhập mật khẩu sẽ không xác thực mật khẩu đã nhập, nhưng nó sẽ làm mờ văn bản bằng cách thay thế từng ký tự bằng một ký hiệu, thường là * hoặc • Sau đó, chúng tôi cũng có loại tìm kiếm nhưng chức năng của loại này giống hệt với một trường văn bản đơn giản trên hầu hết các trình duyệt, nhưng việc xác định loại này theo cách khác có thể giúp ích cho khả năng truy cập hoặc kiểu dáng ________số 8Đây là một danh sách tuyệt vời về các loại tích hợp, tuy nhiên, nó rõ ràng là không đầy đủ và chúng tôi không thể hy vọng có sẵn một danh sách đầy đủ tất cả các loại có thể có. Để giải quyết vấn đề này và giúp chúng tôi linh hoạt hơn rất nhiều, thuộc tính 6 đã được phát minhGiới thiệu biểu thức chính quy dài 10 phút Thuộc tính 6 lấy một biểu thức chính quy xác định tiêu chí mà sau đó được sử dụng để kiểm tra giá trị đầu vào để quyết định xem giá trị đó hợp lệ hay không hợp lệ Biểu thức chính quy rất phức tạp Có toàn bộ sách viết về chủ đề này và điều đó cũng có nghĩa là bạn có thể làm được rất nhiều điều với chúng. Hãy xem xét một vài ví dụ đơn giản để có được ý tưởng. Biểu thức chính quy đơn giản nhất mà tôi có thể nghĩ ra sẽ cho phép nhập một ký tự đơn, “a” trong trường hợp này 1 Nếu bạn muốn gán mẫu biểu thức chính quy này cho một trường đầu vào, bạn chỉ cần thêm nó vào thuộc tính mẫu Trường nhập liệu rất đơn giản của chúng tôi hiện chỉ chấp nhận “a” làm giá trị nhập vào, mọi thứ khác đều không hợp lệ Gõ “a” nhiều lần cũng không hợp lệ. Để cho phép xuất hiện nhiều ký tự, chúng ta có thể sử dụng dấu + 3 Bạn cũng có thể cho phép một số ký tự “a” cố định bằng cách xác định một số giữa các dấu ngoặc nhọn 4 Vậy nếu chúng ta muốn cho phép nhập tất cả các chữ cái từ “a” đến “z” thì sao? 5 Hãy nhớ rằng các biểu thức chính quy khá nghiêm ngặt và tất cả các quy tắc phải rõ ràng. Ví dụ: theo định nghĩa của chúng tôi, nó chỉ cho phép các chữ cái viết thường nên việc cho phép viết hoa phải được xác định rõ ràng 0 Theo logic này, việc thêm số vào bộ quy tắc của chúng tôi rất đơn giản 1 Bây giờ chúng ta hãy mở rộng điều này với một vài ký tự nữa. _. + — và nói rằng kết thúc phải là “@gmail. com”. Với điều này, chúng tôi đã tạo một trình xác thực email rất nguyên thủy chỉ cho phép nhập email gmail 2 Cho đến nay biểu thức chính quy của chúng tôi tìm kiếm toàn bộ giá trị đầu vào. Điều này có nghĩa là mẫu Gmail mới của chúng tôi sẽ báo cáo một email hợp lệ ngay cả khi nó đang ở giữa câu. Nhưng đây không phải là những gì chúng ta muốn. Chúng tôi muốn đảm bảo không có gì khác ngoài email. Để làm được điều đó, chúng ta cần thêm một quy tắc yêu cầu văn bản đầu vào bắt đầu và kết thúc bằng email đã xác định. Ký hiệu ^ đánh dấu sự bắt đầu, ký hiệu $ kết thúc biểu thức. Thêm những sửa chữa vấn đề của chúng tôi 3 Đây là một ví dụ tuyệt vời để chứng minh những gì có thể xảy ra với các biểu thức chính quy nhưng do tính đơn giản của nó, nó có thể không đủ tốt cho mã sản xuất vì nó không xem xét tất cả các trường hợp cạnh Hãy xem xét thêm một vài ví dụ, lần này với các con số. Hãy tưởng tượng chúng ta muốn tạo một trường nhập xác thực một ngày trong một tháng để cho phép nhập các số từ 1 đến 31. Cũng hãy tưởng tượng rằng trường nhập loại 8 không tồn tại và chúng ta không thể chỉ xác định phạm vi được phép với các thuộc tính 9 và 30. Thay vào đó, hãy tạo lại logic này bằng một biểu thức chính quy Chúng tôi đã xem xét cách xác định phạm vi ký tự. Vì vậy, giả sử chúng tôi cho phép các ký tự từ 1 đến 9 và không có ký tự nào khác mà chúng tôi đạt được với ký hiệu bắt đầu và kết thúc 4 Bây giờ, hãy thử và xác định phạm vi được phép nằm trong khoảng từ 10 đến 29. Nếu chúng ta bắt đầu nghĩ về chuỗi ký tự chứ không phải số thì chúng ta thấy rằng ký tự đầu tiên của phạm vi 10 đến 29 chỉ có thể là 1 và 2. Mặt khác, ký tự thứ hai có thể là 0 đến 9. Dịch cụm từ này sang biểu thức chính quy có nghĩa là chúng tôi thêm hai dấu ngoặc vuông, một dấu ngoặc vuông cho mỗi ký tự được phép 5 Hãy nhớ rằng 12 không phải là mười hai, điều đó có nghĩa là chúng tôi cho phép 1 và 2 cho ký tự đầu tiên. Xác định 30 và 31 có thể được thực hiện rất giống nhau 6 Vì vậy, chúng tôi đã quản lý để xác định các điều kiện này một cách riêng biệt, nhưng bây giờ chúng tôi cần tìm cách kết hợp chúng trong một biểu thức chính quy duy nhất. Ba quy tắc chúng ta cần kết hợp là
Dấu ngoặc tròn và ký hiệu ống ( 34) cho phép chúng tôi kết hợp các quy tắc này 7 Chúng ta có thể coi đường ống là một bộ kết hợp “hoặc” trong đó kết quả của biểu thức chính quy là đúng nếu bất kỳ quy tắc phụ nào là đúng. Và với điều này, giờ đây chúng tôi cho phép nhập các số từ 1 đến 31 Với một chút logic bổ sung được thêm vào, chúng ta có thể xác định định dạng ngày DD/MM/YYYY 8 Tôi thừa nhận rằng điều này phức tạp hơn một chút so với các ví dụ trước, nhưng nó phải dễ đọc và dễ hiểu. Và vào cuối ngày, không phải lúc nào chúng ta cũng phải tự viết những thứ này. Có rất nhiều tài nguyên trực tuyến để nhận trợ giúp từ Tôi khuyên bạn nên sử dụng trang web Regexr khi bạn viết và kiểm tra các biểu thức chính quy mới. Ngoài ra còn có một bảng gian lận tiện dụng và một trình chỉnh sửa trực tiếp với vô số trợ giúp trên trang web này Chúng tôi đã xem xét các loại đầu vào được sử dụng phổ biến nhất và một vài biểu thức chính quy, nhưng đừng quên tất cả các loại đầu vào khác mà chúng tôi có thể sử dụng Các loại đầu vào tích hợp nâng cao hơnVí dụ: bạn có thể viết và xác thực các số 9 Trường nhập số có thuộc tính 9 và 30 để xác định phạm vi số hợp lệ. Chúng tôi cũng có 37 là khoảng cách bước được sử dụng khi nhấp vào mũi tên lên và xuống để điều chỉnh giá trị. 37 cũng được sử dụng khi xác nhận. Trong ví dụ này, chúng tôi đặt giá trị 37 thành 40, điều đó có nghĩa là việc nhấp vào mũi tên lên hoặc xuống sẽ tăng và giảm số đi 10 trong suốt khoảng thời gian từ 0 đến 1000 Đối với số điện thoại, chúng ta có thể sử dụng kiểu đầu vào 41. Thao tác này sẽ hiển thị bàn phím số điện thoại chuyên dụng trên thiết bị di động 0 Sau đó, chúng tôi cũng có các hộp kiểm 1 Và các nút radio 2 Sự khác biệt giữa chúng là khi chúng ta có nhiều tùy chọn để chọn, các nút radio chỉ cho phép chọn một trong số tất cả chúng, trong khi các hộp kiểm cho phép chọn nhiều giá trị cùng một lúc Các hộp kiểm và nút radio rất linh hoạt nên sắp tới tôi sẽ có một số bài đăng chuyên biệt thảo luận về tất cả các thủ thuật mà chúng ta có thể thực hiện với chúng Và đây không phải là tất cả. Chúng ta có thể biến một trường đầu vào thành một nút 3 Thật không may, điều này sẽ không tự làm được gì nhiều nếu không có một số chức năng JavaScript được gán cho nó, vì vậy nó sẽ không được sử dụng nhiều cho chúng tôi Mặt khác, chúng tôi phải gửi và đặt lại các nút để gửi các trường đã xác thực của biểu mẫu của chúng tôi tới máy chủ web để xử lý hoặc xóa tất cả các trường và khởi động lại. Chúng hoạt động mà không cần bất kỳ JavaScript nào 4 Gửi biểu mẫu tới máy chủ web để xử lý bằng biểu mẫu HTML đơn giản và không có JavaScript nghe có vẻ thú vị nhưng trước khi chúng tôi xem xét vấn đề này, hãy xem nhanh một số loại đầu vào có sẵn nhưng hơi thử nghiệm mà chúng tôi có sẵn chọn màu 5 Chọn hình ảnh hoặc các tệp khác từ máy tính của chúng tôi để gửi cùng với biểu mẫu 6 Và tất cả các loại đầu vào để gửi ngày và giờ 7 8 9 Thật tuyệt khi chúng ta có thể sử dụng tất cả các trường đầu vào này mà không cần phải viết chức năng JavaScript và xác thực xung quanh chúng. Bạn thậm chí có thể sử dụng các thuộc tính 9 và 30 với các trường ngày và giờ để xác định phạm vi ngày và giờ được phép 0 Và đừng quên rằng chúng ta có thể chọn trạng thái xác thực của tất cả các trường đầu vào này bằng bộ chọn 44 và 45 Với điều này, bạn có thể hiển thị và ẩn các thông báo xác thực lỗi và thành công cho từng thông báo đó. Chúng tôi đã thảo luận những điều này trong bài viết trước của tôi Xây dựng biểu mẫu nâng cao của chúng tôiĐể xem tất cả những điều này đang hoạt động, hãy tạo một biểu mẫu rất đơn giản để gửi một số kết quả kiểm tra. Điểm của bạn cần phải trên 65% để có thể gửi biểu mẫu sẽ được xác thực bằng các tính năng đã thảo luận. Biểu mẫu sẽ trông giống như thế này Bạn có thể sao chép và sử dụng mẫu dự án cho ví dụ này. Bạn có thể tải xuống mẫu và mã nguồn của ví dụ đã hoàn thành từ GitHub Hãy sao chép mẫu dự án của chúng tôi và chuẩn bị khung của tài liệu. Biểu mẫu sẽ nằm bên trong 46 và 47 1 Phần tử 47 có thể được sử dụng để nhóm một số điều khiển cùng với tiêu đề. Bên trong 47, chúng tôi bắt đầu với một 50 sẽ dùng làm tiêu đề cho biểu mẫu. Sau đó, chúng tôi sẽ thêm các trường biểu mẫu (sắp tới), sau đó chúng tôi có nút gửi ở cuối, nút này sẽ tự động kích hoạt việc gửi biểu mẫu khi được nhấp vàoThực hiện các lĩnh vực cá nhân Trường đầu vào đầu tiên bên trong biểu mẫu là địa chỉ email 2 Đối với ví dụ này, chúng tôi yêu cầu nhập địa chỉ Gmail để có thể sử dụng biểu thức chính quy mà chúng tôi đã tạo trước đó. Ngoài ra, hãy chú ý đến việc bổ sung các thông báo lỗi và thành công. Chúng tôi sẽ chuyển đổi mức độ hiển thị của chúng tùy thuộc vào trạng thái xác thực của trường. Nhưng chúng tôi muốn những thứ này được ẩn theo mặc định 3 Bây giờ, hãy thêm trường đầu vào để nhập điểm số mà chúng tôi đã nói sẽ cần tối thiểu 65 để được chấp nhận 4 Cuối cùng, không có biểu mẫu nào hoàn chỉnh nếu không có hộp kiểm đồng ý đối với thư rác tiếp thị và khiến nó trở thành bắt buộc 5 Với điều này, đánh dấu HTML cho biểu mẫu được thực hiện và xác thực cũng hoạt động như mong đợi vì các thuộc tính chính xác đã được thêm vào
Hãy bắt đầu tạo kiểu cho biểu mẫu với một số điều cơ bản. chúng ta cần xóa đường viền xung quanh bộ trường, tăng kích thước phông chữ của chú giải và xếp chồng các trường nhập liệu lên nhau với một số khoảng cách xung quanh chúng 6 Với điều này, các trường biểu mẫu sẽ bắt đầu với đường viền màu xám. Nhưng chúng tôi cũng muốn thay đổi các màu đường viền này thành màu đen khi các trường nhập liệu đang được chỉnh sửa, thành màu xanh lá cây khi chúng hợp lệ và thành màu đỏ khi chúng không hợp lệ 7 Trong biểu mẫu của chúng tôi, tất cả các trường văn bản đầu vào là bắt buộc vì chúng có thuộc tính bắt buộc. Nếu bạn có một biểu mẫu với các trường tùy chọn thì bạn có thể tạo kiểu cho chúng bằng bộ chọn giả 57 8 Bạn cũng có thể muốn tạo kiểu cho tất cả các thành phần trường đầu vào bắt buộc và cũng có một lớp giả cho điều đó 9 Ngoài ra còn có một bộ chọn đặc biệt cho các trường đầu vào có thuộc tính 9 và 30. Với những thứ này, bạn có thể sử dụng lớp giả 00 để chọn các trường có số đã nhập nằm giữa các giá trị trong thuộc tính 9 và 30 và 03 khi nó nằm ngoài phạm vi này 0 Các lớp giả này rất hữu ích để cung cấp cho người dùng một dấu hiệu trực quan rằng giá trị hiện tại của trường nằm trong giới hạn cho phép. Điều này thật tuyệt nếu bạn muốn kiểm soát tốt hơn việc xác thực lỗi của mình nhưng điều đó không cần thiết trong trường hợp của chúng tôi vì các trường vẫn sẽ phản hồi các lớp giả 44 và 45 Điều duy nhất cần thêm một chút công việc là thông báo lỗi và thành công. Chúng tôi cần hiển thị và ẩn các thông báo này tùy thuộc vào trạng thái xác thực của trường. Sẽ rất tuyệt nếu làm cho thông báo lỗi có màu đỏ và thông báo thành công có màu xanh lục 1 Chúng tôi đã thêm 06 để ẩn các thùng chứa thư theo mặc định. Bộ chọn mà chúng tôi đã sử dụng để hiển thị thông báo lỗi của trường không hợp lệ là đây 2 Nếu bạn còn nhớ, + là bộ chọn anh chị em liền kề. Nếu chúng ta có A + B thì bộ chọn sẽ chọn các phần tử B xuất hiện ngay sau phần tử A trong tài liệu HTML. Bộ chọn mới của chúng tôi chọn các phần tử có lớp 07 xuất hiện ngay sau bất kỳ phần tử đầu vào không hợp lệ nào trong tài liệu Điều này hoạt động hoàn toàn tốt với thông báo lỗi, nhưng không thể sử dụng cùng một bộ chọn cho thông báo thành công 3 Điều này sẽ không hoạt động vì phần tử thông báo thành công không xuất hiện ngay sau trường nhập liệu. Thông báo lỗi được đặt ở giữa hai ngăn cản bộ chọn anh chị em liền kề hoạt động Và làm thế nào về bộ chọn anh chị em chung (~)? 4 Chà, điều này sẽ không chỉ chọn phần tử sắp tới mà còn tất cả các phần tử anh chị em thông báo thành công còn lại xuất hiện xa hơn trong biểu mẫu Điều này có thể được khắc phục bằng cách bọc tất cả các trường đầu vào bằng nhãn và vùng chứa thông báo của chúng trong một phần tử bổ sung để đảm bảo chỉ có một thông báo thành công ở cùng cấp độ nhưng thực sự không phải là một cách hay khi giới thiệu các phần tử bổ sung trong HTML chỉ để hỗ trợ một số kiểu dáng. Chúng tôi có thể làm tốt hơn thế bằng cách chọn thông báo thành công xuất hiện sau thông báo lỗi xuất hiện sau trường nhập hợp lệ 5 Bằng cách này, chúng tôi đang giới hạn phạm vi tiếp cận của bộ chọn chỉ với vùng chứa thông báo thành công có liên quan. Trong các tình huống khác, bạn có thể không biết chính xác lớp của phần tử mà bạn muốn bỏ qua, vì vậy bạn có thể chỉ muốn nói rằng bạn muốn phần tử thứ hai, thứ ba hoặc thứ tư sau nó. Đối với những trường hợp này, bạn có thể sử dụng bộ chọn chung bỏ qua loại phần tử bạn có ở giữa 6 Với bộ chọn mới được đề xuất này, các thông báo lỗi sẽ hiển thị ngay lập tức khi bạn mở trang và như dự kiến, chúng sẽ lần lượt chuyển sang màu xanh lục Thay vào đó, chúng ta có thể sử dụng ý tưởng từ dự án ví dụ trước và chỉ hiển thị các thông báo này sau khi người dùng đã tương tác với biểu mẫu và nhập một số giá trị (phần giữ chỗ không còn hiển thị) và người dùng đã hoàn tất chỉnh sửa (trường nhập liệu không còn nằm trong tiêu điểm 7 Ở cuối biểu mẫu, chúng tôi đã thêm nút gửi vào HTML 8 Bây giờ chúng ta cần một số kiểu dáng cơ bản để làm cho nó trông đẹp 9Xác thực toàn bộ biểu mẫu Cho đến nay, chúng ta đã biết cách xác thực các trường riêng lẻ và xác định quy tắc xác thực với một vài thuộc tính, sau đó tạo kiểu cho các trường đầu vào tùy thuộc vào tiêu điểm, trạng thái hợp lệ và không hợp lệ của chúng và với sự trợ giúp của một vài lớp giả. Các trường đầu vào đang xác thực và các thông báo lỗi và thành công có liên quan đang xuất hiện, vì vậy chúng tôi đã đạt được tiến bộ tốt Chúng tôi đã dành nhiều thời gian làm việc với các trường nhập liệu riêng lẻ. Bây giờ hãy xem những gì chúng ta có thể làm với chính biểu mẫu Khi bạn xây dựng toàn bộ biểu mẫu, bạn thường có nhiều trường nhập liệu, nút gửi ở cuối và bạn bọc mọi thứ trong một thành phần biểu mẫu duy nhất bằng bộ trường và chú giải 10 Biểu mẫu chúng ta vừa tạo có cùng cấu trúc và ở cuối, chúng ta có nút gửi để gửi các giá trị đầu vào của bạn đến máy chủ. Trong trường hợp này, chúng tôi 08 với thuộc tính 09 để cho trình duyệt biết rằng chúng tôi muốn sử dụng nút này để gửi nội dung của biểu mẫu. Nhưng chúng ta cũng có thể chỉ sử dụng một phần tử 10 với thuộc tính 09. Chúng tôi cũng có thể thêm cả nút và đầu vào bằng thuộc tính 12. 11 Nhấn các nút này sẽ xóa tất cả các trường và giá trị trong biểu mẫu Cách các phần tử 08 và 10 xử lý việc gửi và đặt lại biểu mẫu là giống nhau. Sự khác biệt duy nhất giữa chúng là nút gửi đầu vào chỉ lấy văn bản làm nội dung thông qua thuộc tính giá trị của nó, tuy nhiên, phần tử nút có thể có nội dung HTML bổ sung bên trong nó, chẳng hạn như hình ảnh hoặc đoạn văn bản, để linh hoạt hơn một chút Nếu bạn thử nhấp vào nút gửi mà không điền vào biểu mẫu, trình duyệt sẽ xác thực toàn bộ biểu mẫu của bạn và sẽ không cho phép bạn gửi bất kỳ thứ gì đến máy chủ và hủy bỏ việc gửi. Trình duyệt thậm chí sẽ cung cấp cho bạn một thông báo lỗi có ý nghĩa để cho bạn biết điều gì có thể đã xảy ra. Tất cả điều này diễn ra tự động với các thuộc tính xác thực mà chúng tôi đã thêm vào Tại thời điểm này, không chỉ các trường đầu vào của bạn không hợp lệ và có thể được nhắm mục tiêu với lớp giả 45 mà bản thân biểu mẫu cũng vậy. Điều này có nghĩa là bạn có thể tạo kiểu cho toàn bộ biểu mẫu tùy thuộc vào trạng thái xác thực của nó. Hãy thêm một đường viền màu đỏ xung quanh biểu mẫu để cho biết có điều gì đó không ổn 12 Bây giờ người dùng có thể nói ngay rằng họ chưa hoàn thành. Nhưng bản thân nút gửi vẫn hoạt động và vẫn có thể được nhấn. Làm thế nào về việc vô hiệu hóa và chuyển sang màu xám của nút nếu biểu mẫu chưa kết thúc? Thông thường, điều này có thể được thực hiện rất dễ dàng bằng cách thêm thuộc tính 16 vào nút 13 Điều này vô hiệu hóa nút và thêm kiểu dáng thích hợp, nhưng không thể chuyển đổi thuộc tính này từ CSS, chỉ từ JavaScript. Điều này có nghĩa là nút bị vô hiệu hóa và sẽ tiếp tục bị vô hiệu hóa ngay cả sau khi biểu mẫu hợp lệ và sẵn sàng để gửi Ngoài ra còn có một thuộc tính 17 cho các trường đầu vào, như tên gợi ý, sẽ không cho phép người dùng sửa đổi nội dung, nội dung chỉ có thể được đọc. Tương tự như trạng thái bị vô hiệu hóa, trạng thái chỉ đọc cũng có thể được chọn trong CSS với các lớp giả có liên quan 14 Như mong đợi, chúng tôi cũng có một lớp giả để chọn tất cả các trường đầu vào đã bật 15 Vì vậy, chúng tôi biết rằng chúng tôi không thể chuyển đổi thuộc tính bị vô hiệu hóa bằng CSS, tuy nhiên, chúng tôi có thể bắt chước trạng thái bị vô hiệu hóa bằng một số CSS bằng cách chọn nút gửi con trong biểu mẫu không hợp lệ vì chúng tôi biết rằng biểu mẫu cũng có trạng thái không hợp lệ 16 cái này khá hay. Khi biểu mẫu chưa hoàn thành, nút có màu xám và di chuyển con trỏ qua nút này sẽ đặt con trỏ chuột thành “không được phép” Sau khi tất cả biểu mẫu hợp lệ, quy tắc này sẽ không còn áp dụng nữa và nút sẽ trở lại màu xanh lam và con trỏ trỏ về mặc định Vì vậy, chúng tôi đã cố gắng thêm một số dấu hiệu trực quan rằng nút này đã bị tắt nhưng bất chấp mọi nỗ lực của chúng tôi, nút này vẫn có thể nhấp được. Có thực sự có thể tắt hoàn toàn nút bằng CSS không? Nếu bạn còn nhớ, chúng tôi đã thực hiện điều gì đó tương tự như thế này khi chúng tôi tạo trường nhập liệu hoạt hình và có tính tương tác cao và muốn tắt các lần nhấp vào nhãn biểu mẫu bao phủ trường Thủ thuật là vô hiệu hóa các sự kiện con trỏ đã đăng ký trên phần tử bằng thuộc tính CSS 18. Hãy thêm nó vào trạng thái vô hiệu hóa nút gửi của chúng tôi 17 Và với phần bổ sung này, không thể nhấp vào nút được nữa trừ khi biểu mẫu hợp lệ và sẵn sàng để gửi, trong trường hợp đó, nút sẽ chuyển sang màu xanh lam Điều này hoạt động rất tốt nhưng chúng tôi đã giới thiệu một hồi quy nhỏ. Vì các sự kiện con trỏ không còn được chọn bởi nút kể cả khi con trỏ chuột ở trên nó, chúng tôi không còn thấy con trỏ "không được phép" Để khắc phục điều này, chúng tôi có thể di chuyển 18 sang lớp giả 20 để các tương tác chuột sẽ chỉ bị ngăn chặn khi chúng tôi thực sự nhấp vào nút chứ không phải khi chúng tôi di chuột qua chúng. 18 Thật tuyệt khi chúng tôi có thể làm tất cả những điều này, nhưng hãy nhớ rằng trải nghiệm người dùng mong đợi có thể không như thế này. Bạn vẫn có thể muốn cho phép người dùng nhấp vào nút gửi để xem các lỗi xác thực do trình duyệt tạo hoặc vì nhiều lý do khác Gửi biểu mẫuVậy chính xác điều gì sẽ xảy ra khi chúng ta nhấn nút gửi? Khi tất cả đều ổn, biểu mẫu hợp lệ và nút gửi được nhấn thì trình duyệt sẽ khởi tạo yêu cầu GET HTTP và nối các giá trị đầu vào của bạn từ biểu mẫu của bạn dưới dạng chuỗi truy vấn vào cuối URL 19 Quy ước đặt tên không phải là ngẫu nhiên ở đây. email, điểm số và tiếp thị trong chuỗi truy vấn đến từ các thuộc tính tên của các trường đầu vào và các giá trị sau dấu bằng là các giá trị mà người dùng đã nhập Tất cả điều này sẽ xảy ra theo mặc định nếu bạn không thay đổi bất kỳ cài đặt nào. Nhưng biểu mẫu cho phép bạn thay đổi URL để gửi biểu mẫu tới và cả phương thức HTTP mà trình duyệt sẽ sử dụng khi gửi 0 Việc thêm 21 vào thuộc tính hành động giờ đây sẽ cập nhật URL mà biểu mẫu được gửi tới 1 Với điều này, mặt trước của ứng dụng web của bạn đã hoàn thành. Bây giờ, back-end và ứng dụng máy chủ của bạn xử lý dữ liệu chuỗi truy vấn đến được gửi đến điểm cuối 22 Thuộc tính hành động cũng có thể trỏ đến một tệp HTML khác. Sau đó, tài liệu này có thể yêu cầu ứng dụng JavaScript đọc và thực hiện điều gì đó với dữ liệu chuỗi truy vấn được gửi Phương thức HTTP được đặt thành “get” theo mặc định, vì vậy chúng tôi chưa thay đổi hành vi bằng cách khai báo rõ ràng. Tuy nhiên, bạn có thể thay đổi cài đặt này thành phương thức “đăng” sẽ thay đổi hành vi một chút Phương thức post gửi dữ liệu biểu mẫu do người dùng nhập vào trong phần thân của yêu cầu và dữ liệu biểu mẫu không được thêm vào URL. Điều này cũng có nghĩa là không thể truy xuất dữ liệu trực tiếp từ JavaScript nên quá trình xử lý dữ liệu sẽ phải diễn ra trên máy chủ khiến phương pháp này trở thành cách được khuyến nghị cho dữ liệu nhạy cảm Lý do tại sao chúng tôi thảo luận tất cả những điều này là để đánh giá cao thực tế rằng việc xác thực và gửi các giá trị biểu mẫu tới máy chủ để xử lý có thể được thực hiện mà không cần JavaScript. Chúng tôi có thể xử lý tất cả các tác vụ cơ bản này bằng HTML đơn giản Chúng tôi có thể xác thực bằng CSS không?Dịch vụ xác thực CSS của W3C có thể được sử dụng để kiểm tra tính chính xác (tính hợp lệ) của W3. CSS .
Làm cách nào để xác thực biểu mẫu bằng CSS?Đó gọi là xác thực. Hầu hết tất cả các xác thực đều được tích hợp sẵn JavaScript hoặc bất kỳ thư viện JS nào. Nhưng hôm nay tôi sẽ chỉ cho bạn điều đó, cách tạo xác thực trong HTML & CSS thuần túy. . Biểu mẫu liên hệ với hoạt hình lật Thanh điều hướng HTML CSS Thư viện hình ảnh CSS 3D Tiết lộ văn bản động HTML có thể được sử dụng để xác thực không?Xác thực biểu mẫu HTML là quá trình kiểm tra nội dung của trang biểu mẫu HTML để tránh gửi dữ liệu bị lỗi đến máy chủ . Quá trình này là một bước quan trọng trong việc phát triển các ứng dụng web dựa trên HTML, vì nó có thể dễ dàng cải thiện chất lượng của trang web hoặc ứng dụng web.
Tại sao phải xác thực CSS và HTML?Mục đích của việc xác thực và kiểm tra trên máy vi tính các tài liệu HTML, XHTML và CSS là để giúp đảm bảo rằng các tài liệu đó đúng về mặt cú pháp và không có vấn đề. |
