Ví dụ về trang web chỉ html
|
Tùy chọn sử dụng HTML thuần túy, đôi khi có thêm một chút CSS, để bổ sung cho xác thực biểu mẫu JavaScript cho đến gần đây là điều không tưởng. Chắc chắn rằng đã có tất cả các loại trình cắm kỳ quặc trong nhiều năm nhằm đạt được điều này, nhưng chưa bao giờ có một tiêu chuẩn duy nhất nào mà chúng tôi có thể hướng tới Show Để có phần giới thiệu chi tiết hơn về xác thực biểu mẫu HTML5, bạn có thể tìm thấy một số bài viết hay được liên kết trong phần Tài liệu tham khảo bên dưới. Trong bài viết này, chúng tôi dự định chỉ trình bày một số ví dụ đơn giản để giúp bạn bắt đầu, bao gồm các phần tử biểu mẫu cơ bản Trước khi bạn hỏi và ai đó luôn hỏi, những ví dụ này hiện sẽ hoạt động trong các trình duyệt sau. Safari 5, Chrome 6, Opera 9, Firefox 4 Beta và iPhone/iPad. Ngoài ra, mỗi trình duyệt có hành vi mặc định hơi khác nhau Thuộc tính 'bắt buộc'Thay đổi đơn giản nhất bạn có thể thực hiện đối với biểu mẫu của mình là đánh dấu trường nhập văn bản là 'bắt buộc' Your Name: Điều này thông báo cho trình duyệt web (nhận biết HTML5) rằng trường này được coi là bắt buộc. Các trình duyệt khác nhau có thể đánh dấu hộp nhập theo cách nào đó (Firefox 4 Beta thêm bóng hộp màu đỏ theo mặc định), hiển thị cảnh báo (Opera) hoặc thậm chí ngăn không cho gửi biểu mẫu nếu trường này không có giá trị. Hy vọng rằng những hành vi này sẽ hội tụ trong các bản phát hành trong tương lai Đối với những ví dụ này, chúng tôi đã tạo định dạng CSS hợp lệ/không hợp lệ của riêng mình để ghi đè mặc định của trình duyệt. Thông tin thêm về điều đó bên dưới. Đó là lý do tại sao bạn có thể thấy một cái gì đó như sau  Trước khi bạn gõ bất cứ điều gì vào hộp, một điểm đánh dấu màu đỏ được hiển thị. Ngay sau khi một ký tự đơn được nhập, ký tự này sẽ thay đổi thành điểm đánh dấu màu xanh lá cây để cho biết rằng đầu vào là 'hợp lệ' Sử dụng CSS, bạn có thể đặt các điểm đánh dấu bên trong hoặc bên cạnh hộp nhập liệu hoặc chỉ cần sử dụng màu nền và đường viền như một số trình duyệt làm theo mặc định Thuộc tính bắt buộc cũng có thể áp dụng cho các hộp kiểm mà chúng tôi đã đề cập riêng Các loại INPUT văn bản mớiĐây là nơi HTML5 thực sự trở nên thú vị và hữu ích hơn. Cùng với kiểu nhập văn bản, giờ đây còn có một loạt các tùy chọn khác, bao gồm email, url, số, điện thoại, ngày tháng và nhiều tùy chọn khác Trên iPhone/iPad, các loại đầu vào khác nhau được liên kết với các bàn phím khác nhau, giúp mọi người hoàn thành biểu mẫu trực tuyến của bạn dễ dàng hơn. Trong các trình duyệt web khác, chúng có thể được sử dụng kết hợp với thuộc tính bắt buộc để giới hạn hoặc đưa ra lời khuyên về các giá trị đầu vào được phép Loại INPUT="email"Bằng cách thay đổi loại đầu vào thành email đồng thời sử dụng thuộc tính bắt buộc, trình duyệt có thể được sử dụng để xác thực địa chỉ email (theo cách hạn chế) Email Address: Lưu ý rằng đối với ví dụ này, chúng tôi đã sử dụng một trình giữ chỗ thuộc tính HTML5 khác cho phép chúng tôi hiển thị lời nhắc hoặc hướng dẫn bên trong trường - điều mà trước đây phải được triển khai bằng cách sử dụng các sự kiện JavaScript onfocus và onblur lộn xộn Đoạn mã trên hiển thị một hộp đầu vào như sau Một lần nữa, các trình duyệt khác nhau thực hiện điều này khác nhau. Trong Opera, chỉ cần nhập *@* là đủ để đầu vào được chấp nhận. Trong Safari, Chrome và Firefox, bạn cần nhập ít nhất *@-. -. Rõ ràng là không có ví dụ nào quá hạn chế, nhưng nó sẽ ngăn mọi người nhập các giá trị hoàn toàn sai, chẳng hạn như số điện thoại, chuỗi có nhiều '@' hoặc dấu cách Đây là cách nó xuất hiện trong Safari (với định dạng CSS của chúng tôi để hiển thị trạng thái (ở) hợp lệ) Loại INPUT="url"Theo cách tương tự với kiểu nhập email ở trên, kiểu này được thiết kế để chỉ chấp nhận các URL được định dạng đúng. Tất nhiên hiện tại nó không làm gì cả, nhưng sau này bạn sẽ thấy cách cải thiện hành vi của nó bằng cách sử dụng thuộc tính mẫu Website: Một lần nữa, hộp đầu vào xuất hiện như bình thường Lần này, yêu cầu tối thiểu đối với hầu hết các trình duyệt là một hoặc nhiều chữ cái theo sau là dấu hai chấm. Một lần nữa, không hữu ích lắm, nhưng nó sẽ ngăn mọi người cố gắng nhập địa chỉ email của họ hoặc những thứ vô nghĩa khác Như đã đề cập ở trên, chúng ta có thể cải thiện điều này bằng cách sử dụng thuộc tính pattern chấp nhận biểu thức chính quy JavaScript. Vì vậy, đoạn mã trên trở thành Website: Bây giờ hộp nhập của chúng tôi sẽ chỉ chấp nhận văn bản bắt đầu bằng http. // hoặc https. // và ít nhất một ký tự bổ sung Trang mạng. bắt đầu với httpNếu bạn chưa quen với các biểu thức chính quy, bạn thực sự nên ưu tiên học. Đối với những người đã quen thuộc, lưu ý rằng ^ và $ đã ẩn nên đầu vào phải khớp với toàn bộ biểu thức. Công cụ sửa đổi mẫu không được hỗ trợ Nếu bất kỳ ai muốn đóng góp một biểu thức kỹ lưỡng hơn để kiểm tra định dạng email hoặc url hợp lệ, vui lòng đăng nó bằng tùy chọn Phản hồi ở trên INPUT type="number" và type="range"Các loại đầu vào số lượng và phạm vi cũng chấp nhận các tham số cho tối thiểu, tối đa và bước. Trong hầu hết các trường hợp, bạn có thể bỏ qua bước vì nó mặc định là 1 Ở đây bạn thấy một ví dụ bao gồm cả đầu vào số, thường được hiển thị dưới dạng 'con lăn' và đầu vào phạm vi được hiển thị dưới dạng 'thanh trượt' Age: Cũng như các loại đầu vào HTML5 khác, các trình duyệt không nhận ra các tùy chọn mới sẽ mặc định là các kiểu nhập văn bản đơn giản. Vì lý do đó, bạn nên bao gồm kích thước cho hộp nhập liệu Tùy chọn thanh trượt hơi kỳ lạ ở chỗ không có giá trị nào được hiển thị, nhưng có thể hữu ích cho nhiều đầu vào 'tương tự' hơn. Có một số lỗi với đầu vào số ở chỗ nếu bạn không đặt giá trị tối đa, nhấp vào 'xuống' với ô nhập liệu sẽ dẫn đến một số rất lớn Đây là cách hai đầu vào được hiển thị trong Safari và trong Ô-pê-ra Chúng hiện không được hỗ trợ trong Firefox 4 Beta Nếu bạn muốn giới hạn đầu vào của trường văn bản thành số mà không có mũi tên lên/xuống được liên kết với hộp nhập, bạn luôn có thể đặt loại đầu vào thành văn bản và sử dụng mẫu "\d+" (một hoặc nhiều số Loại INPUT="mật khẩu"Chúng tôi có một bài viết riêng với các chi tiết về cách xác thực mật khẩu bằng HTML5, bao gồm mã JavaScript để tùy chỉnh thông báo cảnh báo do trình duyệt tạo Các loại INPUT HTML5 khácCác loại đầu vào HTML5 khác bao gồm
Đầu vào tìm kiếm, trong một số trình duyệt, sẽ thay đổi kiểu để phù hợp với định dạng trường tìm kiếm mặc định của trình duyệt hoặc hệ điều hành. Bạn có thể thấy điều này được thể hiện trong đầu vào Tìm kiếm ở trên Kiểu đầu vào tel tiện dụng cho iPhone vì nó chọn một bàn phím nhập khác. Theo mặc định, không có bộ đối sánh mẫu nào, do đó bạn sẽ phải tự triển khai điều đó bằng cách sử dụng thuộc tính mẫu để chỉ chấp nhận một số ký tự nhất định Đầu vào màu có nghĩa là cho phép bạn chọn mã hex từ bánh xe màu - hoặc tương tự - nhưng dường như chưa được triển khai trong tự nhiên Các tùy chọn liên quan đến ngày và giờ khác ít nhất có tác dụng trong Opera, với lịch bật lên và các thiết bị khác xuất hiện để hỗ trợ nhập liệu. Mặc dù thật tuyệt khi thấy một cái gì đó như thế này trong mọi trình duyệt, nhưng bây giờ có lẽ bạn cần phải gắn bó với các plugin JavaScript phổ biến Tạo kiểu đầu vào hợp lệ/không hợp lệ bằng CSSMặc dù mã chúng tôi đang sử dụng phức tạp hơn một chút, nhưng điều này sẽ giúp bạn bắt đầu Tập hợp kiểu đầu tiên có thể được sử dụng để đánh dấu hộp nhập liệu là 'không hợp lệ', bằng cách thêm biểu tượng, tô màu văn bản hoặc đường viền hoặc tương tự. Nó sẽ áp dụng cho các đầu vào được yêu cầu nhưng trống hoặc cho các đầu vào có định dạng/mẫu bắt buộc chưa được đáp ứng Kiểu -moz-box-shadow chỉ để ngăn Firefox 4 Beta thêm đường viền màu đỏ mặc định của nó Đối với các đầu vào vừa bắt buộc vừa 'hợp lệ', bạn có thể sử dụng thông tin sau Một số bài viết dưới đây, đặc biệt là hai bài viết đầu tiên, cung cấp các tùy chọn và giải pháp về phong cách/kịch bản khác để hỗ trợ các trình duyệt cũ hơn Tạo kiểu mẫu bằng cách sử dụng hình ảnh và họa tiếtNhư đã trình bày ở trên, khi bạn đã thêm các thuộc tính HTML5 vào các thành phần biểu mẫu của mình, chúng có thể dễ dàng được tạo kiểu bằng CSS để mỗi trường nhập được đánh dấu rõ ràng là hợp lệ hoặc không hợp lệ Tại đây, bạn có thể thấy các kiểu trên được áp dụng cho trường nhập bắt buộc Giải pháp này vẫn phức tạp hơn mức cần thiết vì nó yêu cầu tải thêm hai hình ảnh. May mắn thay, chúng ta có thể giả định rằng tất cả các trình duyệt hỗ trợ kỹ thuật xác thực biểu mẫu HTML5 cũng sẽ hỗ trợ hình ảnh được thay thế trong CSS bằng 'Bộ dữ liệu được mã hóa Base64' Sử dụng một dịch vụ như Spritebaker hoặc các kỹ thuật khác, cài đặt kiểu ở trên trở thành Đoạn mã trên hiện có thể được sao chép trực tiếp vào biểu định kiểu CSS của bạn. Không cần sao chép bất kỳ hình ảnh nào và đặc biệt nếu biểu định kiểu của bạn được nén bằng gzip, sẽ gần như không ảnh hưởng đến thời gian tải. Trong vài phút, bạn có thể cập nhật toàn bộ trang web của mình Đối với trình duyệt yếu, đây là cách trường nhập bắt buộc sẽ xuất hiện trong Safari với hình ảnh hoặc nền URI dữ liệu Kiểu dáng tương tự có thể được mở rộng cho các phần tử vùng văn bản, nhưng sẽ không hoạt động đối với các hộp kiểm, phần tử chọn, v.v. Đối với những người bạn có thể muốn đặt các điểm đánh dấu hợp lệ/không hợp lệ bên cạnh phần tử hoặc tự định dạng các phần tử đầu vào bằng cách sử dụng đường viền, màu nền, v.v. Dự phòng cho thuộc tính giữ chỗJavaScript sau đây, được đặt hoặc bao gồm ở cuối trang, sẽ cho phép hỗ trợ thuộc tính giữ chỗ trong các trường INPUT ít nhất cho Internet Explorer 8+, Firefox và Opera |
