Phản ứng thiếu máu html. Hình dạng điên rồ. Ví dụ về bảo vệ yếu
Bản dịch: Vlad Merzhevich
Mọi người đều biết về các biểu mẫu web phải không? Chúng tôi chèn một thẻ, một vài thẻ, có thể, hoàn thành tất cả bằng một nút và bạn đã hoàn tất.
Bạn không biết một nửa của nó. HTML5 xác định hơn chục loại trường mới mà bạn có thể sử dụng trong biểu mẫu của mình. Và khi tôi nói "sử dụng", ý tôi là chúng có thể được sử dụng ngay lập tức - không cần bất kỳ mánh lới quảng cáo, thủ thuật hay cách giải quyết nào. Đừng lo lắng quá, tôi không nói rằng tất cả các tính năng mới thú vị này thực sự được hỗ trợ trong mọi trình duyệt. Hoàn toàn không, tôi không có ý với tất cả mọi người. Trong các trình duyệt hiện đại, vâng, biểu mẫu của bạn sẽ hiển thị mọi thứ chúng có thể. Nhưng trong các trình duyệt cũ hơn, biểu mẫu của bạn vẫn hoạt động, mặc dù chưa phát huy hết tiềm năng của chúng. Nghĩa là, những tính năng này sẽ giảm dần trong mọi trình duyệt. Ngay cả trong IE6.
Văn bản nhắc nhở| I E. | Firefox | Cuộc đi săn | Trình duyệt Chrome | Opera | điện thoại Iphone | Android |
| - | 4.0+ | 4.0+ | 4.0+ | 11.0+ | 4.0+ | - |
Cải tiến HTML5 đầu tiên liên quan đến biểu mẫu là khả năng đặt văn bản nhắc nhở trong trường nhập. Văn bản này được hiển thị trong trường nhập nếu trường trống và không có tiêu điểm. Ngay khi bạn nhấp vào trường nhập liệu (hoặc điều hướng đến trường đó qua Tab), văn bản gợi ý sẽ biến mất.
Có thể bạn đã từng thấy văn bản nhắc nhở trước đây. Ví dụ: Mozilla Firefox bao gồm văn bản gợi ý trong thanh địa chỉ có nội dung "Tìm kiếm Dấu trang và Lịch sử".
Khi bạn bấm vào thanh địa chỉ, văn bản gợi ý sẽ biến mất.
Đây là cách bạn có thể đưa văn bản gợi ý vào biểu mẫu của mình.
Các trình duyệt không hỗ trợ thuộc tính giữ chỗ chỉ cần bỏ qua nó. Không có hại hoặc vi phạm.
Hỏi giáo sư Markup☞ Hỏi. Tôi có thể sử dụng đánh dấu HTML cho thuộc tính giữ chỗ không? Tôi muốn chèn một hình ảnh hoặc có thể thay đổi màu sắc.
A. Thuộc tính giữ chỗ chỉ có thể chứa văn bản, không có mã HTML. Tuy nhiên, có những phần mở rộng CSS đặc biệt cho phép bạn đặt kiểu văn bản trong một số trình duyệt.
Các trường lấy nét tự động| I E. | Firefox | Cuộc đi săn | Trình duyệt Chrome | Opera | điện thoại Iphone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Các trang web có thể sử dụng JavaScript để tự động tập trung vào trường biểu mẫu đầu tiên. Ví dụ, trên trang chính Google.com Trường nhập từ khóa tìm kiếm có tính năng tự động lấy nét. Mặc dù điều này thuận tiện cho hầu hết mọi người nhưng nó có thể gây khó chịu cho người dùng nâng cao và những người có nhu cầu đặc biệt. Nếu bạn nhấn phím cách trong khi chờ trang cuộn, sẽ không có thao tác cuộn nào vì tiêu điểm nằm trên trường nhập của biểu mẫu (nó sẽ nhập dấu cách vào trường thay vì cuộn). Nếu bạn di chuyển tiêu điểm sang trường nhập khác trong khi trang đang tải, tập lệnh tự động lấy nét của trang web có thể "hữu ích" chuyển tiêu điểm trở lại trường nhập ban đầu, làm gián đoạn quá trình nhập của bạn và khiến bạn nhập sai chỗ.
Vì tính năng tự động lấy nét hoạt động thông qua JavaScript nên có thể gặp khó khăn khi xử lý các trường hợp cực đoan này và có ít tùy chọn đối với những người không muốn trang web "đánh cắp" tiêu điểm của họ.
Để giải quyết những vấn đề này, HTML5 giới thiệu thuộc tính tự động lấy nét cho tất cả các thành phần của biểu mẫu. Thuộc tính tự động lấy nét thực hiện chính xác những gì nó nghe: ngay khi tải trang, nó sẽ di chuyển tiêu điểm đến trường được chỉ định. Nhưng vì đây chỉ là đánh dấu chứ không phải tập lệnh nên hoạt động sẽ nhất quán trên tất cả các trang web. Ngoài ra, nhà sản xuất trình duyệt (hoặc tác giả tiện ích mở rộng) có thể cung cấp cho người dùng cách tắt tính năng tự động lấy nét.
Đây là cách bạn có thể đặt trường biểu mẫu thành tự động lấy nét.
Các trình duyệt không hỗ trợ thuộc tính tự động lấy nét sẽ bỏ qua nó.
Chuyện gì đã xảy ra vậy? Giả sử bạn muốn tính năng tự động lấy nét hoạt động ở mọi nơi, không chỉ trong các trình duyệt HTML5 ưa thích? Bạn có thể để tập lệnh hiện tại ở chế độ tự động lấy nét, chỉ cần thực hiện hai thay đổi nhỏ:
- thêm thuộc tính tự động lấy nét vào mã HTML;
- Kiểm tra xem trình duyệt có hỗ trợ thuộc tính tự động lấy nét hay không, nếu không, hãy chạy tập lệnh của riêng bạn.
Tự động lấy nét bằng giải pháp thay thế
if (!("autofocus" in document.createElement("input")) ) (
document.getElementById("q").focus();
}
Nhiều trang web chờ window.onload kích hoạt và đặt tiêu điểm. Nhưng sự kiện window.onload sẽ không kích hoạt cho đến khi tất cả hình ảnh được tải xong. Nếu trang của bạn có nhiều hình ảnh, những đoạn mã đơn giản như vậy sẽ có khả năng thay đổi tiêu điểm sau khi người dùng bắt đầu tương tác với một phần khác trên trang của bạn. Đây là lý do tại sao người dùng thành thạo ghét các tập lệnh lấy nét tự động.
Ví dụ: trong phần trước, tập lệnh lấy nét tự động được đặt ngay sau trường biểu mẫu mà nó tham chiếu. Đây là giải pháp tối ưu, nhưng nó có thể xúc phạm đến sự nhạy cảm của bạn bằng cách đặt một khối mã JavaScript ở giữa trang (hoặc thông thường hơn là hệ thống của bạn có thể không linh hoạt bằng). Nếu bạn không thể chèn tập lệnh vào giữa trang, bạn nên đặt tiêu điểm thông qua một sự kiện tùy chỉnh như $(document).ready() trong jQuery thay vì window.onload .
Tự động lấy nét qua jQuery
$(document).ready(function() (
$("#q").tiêu điểm();
}
});
Sự kiện tùy chỉnh jQuery kích hoạt ngay khi DOM có thể truy cập được - nghĩa là nó đợi văn bản trang tải nhưng không đợi tất cả hình ảnh tải. Đây không phải là cách tiếp cận tối ưu - nếu trang có dung lượng lớn bất thường hoặc kết nối mạng chậm, người dùng có thể vẫn tương tác với trang trước khi tập lệnh tiêu điểm được thực thi. Nhưng vẫn tốt hơn nhiều so với việc chờ đợi sự kiện window.onload xảy ra.
Nếu bạn đồng ý và sẵn sàng chèn một tập lệnh một câu lệnh vào mã trang của mình thì đây là một sự thỏa hiệp ít khó chịu hơn tùy chọn đầu tiên và tốt hơn tùy chọn thứ hai. Bạn có thể sử dụng các sự kiện tùy chỉnh của jQuery để đặt các sự kiện của riêng mình, chẳng hạn như AF_ready. Sau đó, bạn có thể kích hoạt sự kiện này theo cách thủ công ngay khi có trường tự động lấy nét. Cảm ơn E.M. Shtenberg đã dạy tôi kỹ thuật này.
Tự động lấy nét với sự kiện tùy chỉnh thay thế
$(document).bind("autofocus_ready", function() (
if (!("tự động lấy nét" trong document.createElement("input"))) (
$("#q").tiêu điểm();
}
});
$(document).trigger("autofocus_ready");
Giải pháp này là tối ưu, giống như cách tiếp cận đầu tiên. Tiêu điểm sẽ được đặt thành trường biểu mẫu ngay khi có thể về mặt kỹ thuật trong khi văn bản trang vẫn đang tải. Một phần logic ứng dụng (tập trung vào trường biểu mẫu) đã được chuyển từ nội dung trang sang phần. Ví dụ này dựa trên jQuery, nhưng khái niệm về sự kiện tùy chỉnh không chỉ có ở jQuery. Các thư viện JavaScript khác như YUI và Dojo cũng cung cấp các khả năng tương tự.
Hãy tóm tắt.
- Đặt tiêu điểm chính xác là quan trọng.
- Nếu có thể, hãy yêu cầu trình duyệt sử dụng thuộc tính lấy nét tự động trên trường mà bạn muốn lấy nét.
- Nếu bạn đang sử dụng mã thay thế cho các trình duyệt cũ hơn, hãy xác định hỗ trợ cho thuộc tính tự động lấy nét để tập lệnh chỉ chạy trong các trình duyệt cũ hơn.
- Đặt tiêu điểm càng sớm càng tốt. Chèn tập lệnh tiêu điểm vào mã ngay sau trường biểu mẫu. Nếu điều này không làm phiền bạn, hãy nhúng thư viện JavaScript hỗ trợ các sự kiện tùy chỉnh và đưa sự kiện đó vào mã ngay sau trường biểu mẫu. Nếu điều này là không thể, hãy sử dụng một sự kiện như $(document).ready() từ jQuery.
- Trong mọi trường hợp, bạn không nên đợi window.onload lấy tiêu điểm.
Trong hơn một thập kỷ, các biểu mẫu chỉ chứa một vài loại trường. Phổ biến nhất là như sau.
Tất cả các loại trường này vẫn hoạt động trong HTML5. Nếu bạn "nâng cấp lên HTML5" (có thể bằng cách thay đổi !DOCTYPE ), bạn sẽ không phải thực hiện một thay đổi nào đối với biểu mẫu của mình. Yay cho khả năng tương thích ngược!
Tuy nhiên, HTML5 định nghĩa 13 loại trường mới và không có lý do gì để không bắt đầu sử dụng chúng.
Loại địa chỉ email mới đầu tiên. Nó trông giống như thế này.
Tôi định viết một câu bắt đầu "trên các trình duyệt không hỗ trợ type="email" ..." nhưng đã dừng lại. Tại sao? Bởi vì tôi không chắc liệu trình duyệt có hỗ trợ type="email" hay không. Tất cả các trình duyệt "hỗ trợ" type="email" . Chúng có thể không làm gì đặc biệt, nhưng các trình duyệt không nhận dạng được type="email" sẽ coi nó là type="text" và hiển thị nó như một trường văn bản thông thường.
Tôi sẽ nhấn mạnh tầm quan trọng của điều này. Có hàng triệu biểu mẫu trên Internet yêu cầu bạn nhập địa chỉ email của mình và tất cả chúng đều sử dụng . Bạn nhìn thấy một hộp văn bản, nhập địa chỉ email của bạn vào đó và thế là xong. Và sau đó là HTML5, định nghĩa type="email" . Các trình duyệt có đang phát điên không? KHÔNG. Mọi trình duyệt trên Trái đất đều coi thuộc tính loại không xác định là type="text" - ngay cả IE6. Vì vậy, bạn có thể "làm mới" biểu mẫu của mình bằng cách sử dụng type="email" ngay bây giờ.
Điều gì xảy ra nếu chúng tôi nói trình duyệt hỗ trợ type="email" ? Vâng, nó có thể có nghĩa là bất cứ điều gì. Đặc tả HTML5 không yêu cầu bất kỳ giao diện người dùng cụ thể nào cho các loại trường mới. Opera thêm một biểu tượng nhỏ vào trường biểu mẫu. Các trình duyệt HTML5 khác như Safari và Chrome hiển thị dưới dạng trường văn bản - giống như type="text" - vì vậy người dùng của bạn sẽ không nhận thấy sự khác biệt (cho đến khi họ xem mã nguồn).
Và sau đó là iPhone.
iPhone không có bàn phím vật lý. Tất cả việc “gõ” được thực hiện bằng cách nhấp vào bàn phím trên màn hình bật lên vào thời điểm thích hợp, chẳng hạn như khi bạn truy cập trường biểu mẫu trên trang web. Apple đã làm điều gì đó thông minh với trình duyệt của iPhone. Nó nhận dạng một số trường HTML5 mới và tự động thay đổi bàn phím trên màn hình để tối ưu hóa dữ liệu nhập.
Ví dụ: địa chỉ email là văn bản, phải không? Tất nhiên, nhưng đây là một loại văn bản đặc biệt. Do đó, hầu hết tất cả các địa chỉ email đều chứa ký hiệu @ và ít nhất một dấu chấm (.), nhưng chúng khó có thể chứa dấu cách. Vì vậy, khi bạn đang sử dụng iPhone và truy cập , bạn sẽ thấy bàn phím ảo bao gồm phím cách nhỏ hơn cũng như các phím chuyên dụng cho các ký hiệu. Và @.
Hãy để tôi tóm tắt nó. Không có nhược điểm nào khi chuyển đổi ngay tất cả các trường email của bạn thành type="email" . Hầu như không ai nhận thấy điều này ngoại trừ người dùng iPhone, những người có lẽ cũng sẽ không nhận thấy điều đó. Nhưng những người để ý sẽ mỉm cười lặng lẽ và cảm ơn bạn vì đã giúp công việc của họ dễ dàng hơn một chút.
Địa chỉ webĐịa chỉ web—mà những người đam mê công nghệ gọi là URL, ngoại trừ một số nhà thông thái gọi là URI—là một loại văn bản chuyên biệt khác. Cú pháp của một địa chỉ web được giới hạn theo tiêu chuẩn Internet có liên quan. Nếu ai đó yêu cầu bạn nhập địa chỉ web vào biểu mẫu, họ sẽ mong đợi nội dung như “http://www.google.com/” chứ không phải “125 Farwood Road”. Dấu gạch chéo là phổ biến—ngay cả trang chủ của Google cũng có ba dấu gạch chéo như vậy. Dấu chấm cũng phổ biến nhưng khoảng trắng bị cấm. Và mọi địa chỉ web đều có hậu tố tên miền như ".com" hoặc ".org".
Và vì vậy... (xin vui lòng cuộn trống)... . Trên iPhone nó trông như thế này.
iPhone đã thiết kế lại bàn phím ảo giống như đã làm với email nhưng giờ đây đã tối ưu hóa nó để gõ địa chỉ web. Phím cách đã được thay thế hoàn toàn bằng ba phím ảo: dấu gạch chéo, dấu chấm và ".com" (bạn có thể giữ phím ".com" để chọn hậu tố khác như ".org" hoặc ".net").
Các trình duyệt không hỗ trợ HTML5 sẽ coi type="url" là type="text" , do đó, không có nhược điểm nào khi sử dụng loại này cho tất cả các trường mà bạn cần nhập địa chỉ web.
Số như bộ đếmBước tiếp theo: số. Yêu cầu một số phức tạp hơn yêu cầu email hoặc địa chỉ web. Trước hết, những con số phức tạp hơn bạn nghĩ. Chọn nhanh một số. -1? Không, ý tôi là một số từ 1 đến 10,7 ½? Không, không, đừng là một phần nhỏ, đồ ngốc. π? Bây giờ bạn vừa chọn một số vô tỷ.
Tôi muốn lưu ý rằng bạn không thường xuyên được hỏi “chỉ một con số”. Nhiều khả năng họ sẽ yêu cầu một con số trong một phạm vi nhất định. Bạn có thể chỉ muốn một số loại số nhất định trong phạm vi đó - có thể là số nguyên, nhưng không phải phân số hoặc số thập phân hoặc thứ gì đó kỳ lạ hơn như bội số của 10. HTML5 bao gồm tất cả những điều này.
Chọn một số, hầu như bất kỳ
Chúng ta hãy xem xét một thuộc tính tại một thời điểm.
- type="number" có nghĩa đây là trường số.
- min="0" chỉ định giá trị tối thiểu được phép cho trường này.
- max="10" là giá trị tối đa được phép.
- step="2" kết hợp với giá trị tối thiểu xác định các số hợp lệ trong phạm vi: 0, 2, 4, v.v., cho đến giá trị tối đa.
- value="6" là giá trị mặc định. Nhìn có vẻ quen thuộc, đây là thuộc tính tương tự luôn được sử dụng để xác định các giá trị trường của biểu mẫu. Tôi đề cập đến điều này ở đây như một điểm khởi đầu, HTML5 được xây dựng trên các phiên bản HTML trước đó. Bạn không cần phải học lại để làm những gì bạn đã làm.
Đây là mã cho một trường số. Hãy nhớ rằng tất cả các thuộc tính này là tùy chọn. Nếu bạn có mức tối thiểu nhưng không phải mức tối đa, bạn có thể chỉ định thuộc tính tối thiểu chứ không phải thuộc tính tối đa. Giá trị bước mặc định là 1 và bạn có thể bỏ qua thuộc tính bước cho đến khi cần một giá trị bước khác. Nếu không có giá trị mặc định thì thuộc tính value có thể là chuỗi trống hoặc thậm chí bị bỏ qua hoàn toàn.
Nhưng HTML5 không dừng lại ở đó. Với cùng mức giá tự do thấp, bạn sẽ có được các kỹ thuật JavaScript tiện dụng này.
- input.stepUp(n) tăng giá trị trường lên n.
- input.stepDown(n) giảm giá trị trường xuống n.
- input.valueAsNumber trả về giá trị hiện tại dưới dạng số dấu phẩy động (thuộc tính input.value luôn là một chuỗi).
Hiển thị vấn đề? Chà, giao diện chính xác để quản lý số được triển khai khác nhau trong các trình duyệt. Trên iPhone, nơi khó gõ, trình duyệt lại tối ưu hóa bàn phím ảo để nhập số.
Trong phiên bản Opera dành cho máy tính để bàn, trường type="number" xuất hiện dưới dạng bộ đếm với các mũi tên lên và xuống nhỏ mà bạn có thể nhấp vào để thay đổi giá trị.
Opera tôn trọng các thuộc tính min, max và step, do đó bạn sẽ luôn đạt được giá trị số có thể chấp nhận được. Nếu bạn tăng giá trị lên mức tối đa, mũi tên lên trong bộ đếm sẽ chuyển sang màu xám.
Giống như tất cả các trường nhập khác mà tôi đã thảo luận trong chương này, các trình duyệt không hỗ trợ type="number" sẽ coi nó là type="text" . Giá trị mặc định sẽ được hiển thị trong trường (vì nó được lưu trong thuộc tính value), nhưng các thuộc tính khác như min và max sẽ bị bỏ qua. Bạn có thể tự do triển khai chúng hoặc sử dụng khung JavaScript đã triển khai quản lý bộ đếm. Kiểm tra ở đây đầu tiên.
if (! .inputtypes.number) (
// không có hỗ trợ riêng cho trường type=number
// có thể thử Dojo hoặc một khung JavaScript khác
}
Bộ đếm không phải là cách duy nhất để biểu diễn số đầu vào. Có lẽ bạn cũng đã từng thấy một thanh trượt trông như thế này.
Bây giờ bạn cũng có thể có một thanh trượt trên biểu mẫu. Mã này trông giống một trường đếm một cách kỳ lạ.
Tất cả các thuộc tính có sẵn đều giống như đối với type="number" - min , max , step , value - và có nghĩa giống nhau. Sự khác biệt duy nhất là giao diện người dùng. Thay vì trường nhập liệu, trình duyệt sẽ hiển thị type="range" dưới dạng thanh trượt. Tại thời điểm viết bài, các phiên bản mới nhất của Safari, Chrome và Opera đều hoạt động với tính năng này. Thật không may, iPhone hiển thị dưới dạng một trường văn bản đơn giản; nó thậm chí không tối ưu hóa bàn phím ảo để nhập số. Tất cả các trình duyệt khác chỉ coi trường này là type="text" , vì vậy không có lý do gì để bắt đầu sử dụng loại này ngay lập tức.
HTML 4 không bao gồm việc chọn ngày qua lịch. Các khung JavaScript cho phép bạn giải quyết vấn đề này (Dojo, jQuery UI, YUI, Closure Library), nhưng tất nhiên, mỗi giải pháp này đều yêu cầu “triển khai” khung cho bất kỳ lịch tích hợp nào.
HTML5 cuối cùng đã xác định một cách để kích hoạt bộ chọn ngày gốc mà không cần bất kỳ tập lệnh nào. Thực tế có sáu trong số chúng: ngày, tháng, tuần, thời gian, ngày + giờ và ngày + giờ với múi giờ.
Cho đến nay, sự hỗ trợ là... rất ít.
| gõ="ngày" | 9.0+ | - |
| gõ="tháng" | 9.0+ | - |
| gõ="tuần" | 9.0+ | - |
| gõ="thời gian" | 9.0+ | - |
| gõ="ngày giờ" | 9.0+ | - |
| gõ="datetime-local" | 9.0+ | - |
Đây là cách Opera hiển thị:
Nếu bạn cần thời gian cùng với ngày tháng, Opera cũng hỗ trợ:
Nếu bạn cần một tháng cộng với một năm (ví dụ: ngày hết hạn của thẻ tín dụng), Opera có thể hiển thị:
Ít phổ biến hơn, nhưng có sẵn, là chọn tuần trong năm thông qua:
Cuối cùng nhưng không kém phần quan trọng là thời gian với:
Bộ chọn ngày có thể thay thế
...
var i = document.createElement("input");
i.setAttribution ("loại", "ngày");
if (i.type == "văn bản") (
// Không hỗ trợ bộ chọn ngày gốc :(
// Sử dụng Dojo/jQueryUI/YUI/Closure để tạo nó,
// sau đó thay thế phần tử một cách linh hoạt
}
Có khả năng các trình duyệt khác cuối cùng sẽ hỗ trợ những loại này. Giống như type="email" và các loại khác, các trường biểu mẫu này sẽ xuất hiện dưới dạng văn bản thuần túy trong các trình duyệt không nhận dạng được type="date" và các biến thể của nó. Nếu muốn, bạn chỉ cần sử dụng , làm cho người dùng Opera hài lòng và đợi các trình duyệt khác bắt kịp. Sẽ thực tế hơn khi sử dụng điều này, nhưng hãy kiểm tra xem trình duyệt có hỗ trợ bộ chọn ngày gốc hay không và đưa vào giải pháp thay thế dưới dạng tập lệnh bạn chọn (Dojo, jQuery UI, YUI, Closure Library hoặc các tùy chọn khác).
Cửa sổ tìm kiếmVì vậy, hãy tìm kiếm. Không chỉ tìm kiếm từ Google hay Yahoo (tốt, cả những tìm kiếm đó nữa). Hãy suy nghĩ về bất kỳ hộp tìm kiếm nào, trên bất kỳ trang nào, trên bất kỳ trang web nào. Amazon có hộp tìm kiếm, Yandex có hộp tìm kiếm, hầu hết các blog cũng vậy. Chúng được tạo ra như thế nào? , giống như bất kỳ trường văn bản nào khác trên web. Hãy khắc phục điều này.
Tìm kiếm thế hệ mới
Trong một số trình duyệt, bạn sẽ không nhận thấy bất kỳ sự khác biệt nào so với trường văn bản thông thường. Nhưng nếu bạn đang sử dụng Safari trên Mac OS X thì nó sẽ trông như thế này.
Bạn có tìm thấy sự khác biệt? Trường nhập có các góc tròn! Tôi biết, tôi biết, bạn khó có thể kìm chế được cảm xúc của mình. Nhưng xin chờ chút nữa! Khi bạn bắt đầu nhập type="search" vào trường này, Safari sẽ chèn một nút "x" nhỏ ở bên phải cửa sổ. Nhấp vào "x" sẽ xóa nội dung của trường. Google Chrome, có công nghệ tương tự, hoạt động theo cách tương tự. Cả hai thủ thuật nhỏ này đều trông và hoạt động tương tự như tìm kiếm gốc trong iTunes và các ứng dụng khách Mac OS X khác.
Apple.com sử dụng tìm kiếm trang web để giúp trang web truyền tải cảm giác "yêu vẹt". Nhưng không có gì cụ thể cho máy Mac ở đây. Nó chỉ là code nên mọi trình duyệt trên mọi nền tảng đều có thể chọn cách hiển thị theo quy ước của nền tảng. Giống như tất cả các loại mới khác, các trình duyệt không nhận dạng được type="search" sẽ coi nó là type="text" , vì vậy hoàn toàn không có lý do gì để không bắt đầu sử dụng type="search" cho tất cả các hộp tìm kiếm của bạn ngay hôm nay .
Giáo sư Markup nóiTheo mặc định, Safari không áp dụng hầu hết các kiểu. Nếu bạn muốn buộc Safari coi trường tìm kiếm là trường văn bản thông thường (để bạn có thể áp dụng kiểu của riêng mình), hãy thêm quy tắc này vào biểu định kiểu của bạn.
đầu vào(
-webkit-ngoại hình: trường văn bản;
}
Cảm ơn John Lane đã dạy tôi thủ thuật này.
Lựa chọn màu sắcHTML5 cũng xác định một trường cho phép bạn chọn màu và trả về màu đó ở dạng thập lục phân. Không có trình duyệt nào hỗ trợ bộ chọn màu, điều này thật đáng tiếc vì tôi luôn yêu thích bảng màu của Mac OS. Có lẽ một ngày nào đó.
Ghi chú người phiên dịch Opera 11 hỗ trợ tính năng này.
Xác thực mẫuTrong chương này, tôi đã nói về các thành phần biểu mẫu mới và các tính năng mới như tự động lấy nét, nhưng có lẽ tôi chưa đề cập đến phần thú vị nhất của biểu mẫu HTML5: xác thực đầu vào tự động. Hãy xem xét các vấn đề thường gặp khi nhập địa chỉ email vào biểu mẫu. Bạn có thể xác thực phía máy khách thông qua JavaScript, sau đó là xác thực phía máy chủ thông qua PHP, Python hoặc một ngôn ngữ phía máy chủ khác. HTML5 sẽ không bao giờ thay thế xác thực phía máy chủ, nhưng một ngày nào đó nó có thể thay thế xác thực phía máy khách.
Có hai vấn đề lớn khi xác thực địa chỉ email trong JavaScript:
Nghiêm túc mà nói, bạn sẽ nhận được sai địa chỉ. Việc xác định rằng một tập hợp các ký tự ngẫu nhiên là một địa chỉ email hợp lệ là vô cùng khó khăn. Càng nhìn càng thấy khó. Tôi đã đề cập rằng điều này là rất, rất khó khăn? Việc giải quyết vấn đề đau đầu này trên trình duyệt của bạn không phải dễ dàng hơn sao?
Loại kiểm tra Opera="email"
Đây là ảnh chụp màn hình từ Opera 11, mặc dù chức năng này đã có từ Opera 9. Mã liên quan đến việc đặt giá trị email cho thuộc tính loại. Khi người dùng Opera cố gắng gửi biểu mẫu bằng , trình duyệt sẽ tự động kiểm tra địa chỉ email, ngay cả khi tập lệnh bị tắt.
HTML5 cũng cung cấp xác thực trường địa chỉ và số web bằng . Xác thực số có tính đến các giá trị của thuộc tính min và max, do đó trình duyệt sẽ không cho phép bạn gửi biểu mẫu nếu bạn nhập số quá lớn.
Không có mã nào cho phép xác thực biểu mẫu trong HTML5, nó được thực hiện theo mặc định. Để tắt xác thực, hãy sử dụng thuộc tính novalidate.
Đừng kiểm tra tôi
Các trình duyệt đã chậm đưa vào hỗ trợ xác thực biểu mẫu trong HTML5. Firefox 4 sẽ được hỗ trợ đầy đủ. Thật không may, Safari và Chrome chỉ được triển khai một phần: chúng xác thực các thành phần của biểu mẫu nhưng không hiển thị bất kỳ thông báo hiển thị nào khi trường biểu mẫu không xác thực được. Nói cách khác, nếu bạn nhập ngày không chính xác (hoặc sai chính tả) vào type="date" , Safari và Chrome sẽ không gửi biểu mẫu nhưng sẽ không cho bạn biết lý do tại sao. Họ sẽ đặt tiêu điểm vào trường chứa giá trị không hợp lệ nhưng sẽ không hiển thị thông báo lỗi như Opera hoặc Firefox 4.
Phần bắt buộc| I E. | Firefox | Cuộc đi săn | Trình duyệt Chrome | Opera | điện thoại Iphone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Xác thực biểu mẫu trong HTML5 không giới hạn ở loại của từng trường. Bạn cũng có thể chỉ định rằng một số trường là bắt buộc, những trường đó phải có giá trị trước khi bạn có thể gửi biểu mẫu.
Mã cho các trường bắt buộc càng đơn giản càng tốt.
Trình duyệt có thể thay đổi giao diện ban đầu của trường bắt buộc. Đây là một ví dụ về giao diện của nó trong Mozilla Firefox 4.0.
Ngoài ra, nếu bạn cố gắng gửi biểu mẫu mà không điền giá trị bắt buộc, Firefox sẽ hiển thị một thanh thông tin cho biết trường này là bắt buộc và không được để trống.
Tấn công tiêm script chéo trangTrong một cuộc tấn công kịch bản chéo trang (XSS), kẻ tấn công tiêm mã độc vào một trang Web hợp pháp, sau đó chạy một tập lệnh độc hại ở phía máy khách. Khi người dùng truy cập một trang bị nhiễm, tập lệnh sẽ được tải xuống trình duyệt của người dùng và thực thi ở đó. Đề án này có nhiều loại. Tập lệnh độc hại có thể truy cập cookie trình duyệt, mã thông báo phiên hoặc thông tin nhạy cảm khác được lưu trữ trong trình duyệt. Tuy nhiên, tất cả các cuộc tấn công đều hoạt động theo sơ đồ trong Hình 1.
Hình 1. Hình 1. Tấn công XSS điển hình
Lỗ hổng XSS Trong một cuộc tấn công XSS điển hình, kẻ tấn công tìm cách đưa một chuỗi vào trang Web của máy chủ. Giả sử kẻ tấn công đã chèn dòng sau vào một trang Web: cảnh báo("bạn đang bị tấn công") . Mỗi khi người dùng truy cập trang này, trình duyệt của họ sẽ tải xuống tập lệnh này và chạy nó cùng với phần còn lại của nội dung trang. Trong trường hợp này, do chạy tập lệnh, người dùng sẽ thấy một cửa sổ bật lên có nội dung “bạn đang bị tấn công”.
Hậu quả của XSSNếu kẻ tấn công có thể khai thác lỗ hổng XSS trong ứng dụng Web, chúng có thể đưa tập lệnh vào trang cung cấp quyền truy cập vào thông tin tài khoản người dùng. Trong trường hợp này, kẻ tấn công có thể thực hiện nhiều hành động độc hại, ví dụ:
- ăn cắp tài khoản;
- lây lan virus;
- truy cập lịch sử duyệt web và nội dung clipboard của bạn;
- có được khả năng điều khiển trình duyệt từ xa;
- quét và sử dụng các tài nguyên, ứng dụng phần cứng, phần mềm trên mạng nội bộ.
Để ngăn chặn các cuộc tấn công XSS, ứng dụng phải mã hóa đầu ra trang trước khi gửi đến người dùng cuối. Khi đầu ra được mã hóa, đánh dấu HTML được thay thế bằng các biểu diễn thay thế - các đối tượng. Trình duyệt hiển thị các đối tượng này nhưng không khởi chạy chúng. Ví dụ: được chuyển đổi thành .
Bảng 1 hiển thị tên đối tượng cho một số ký tự HTML phổ biến.
Bảng 1. Tên đối tượng cho các ký tự HTML| Không gian không bị phá vỡ | |||
| < | Ít hơn | < | |
| > | Nhiều hơn | > | > |
| & | Dấu và | & | & |
| ¢ | xu | ¢ | ¢ |
| £ | Lb | £ | £ |
| ¥ | Jena | ¥ | ¥ |
| Euro | € | € | |
| § | Đoạn văn | § | § |
| © | Bản quyền | © | |
| ® | ® | ® | |
| ™ | Nhãn hiệu | ™ | ™ |
Khi trình duyệt gặp các đối tượng, chúng sẽ được chuyển đổi trở lại HTML và được in, nhưng chúng không được kích hoạt. Ví dụ: nếu kẻ tấn công chèn chuỗi cảnh báo("bạn đang bị tấn công") vào một trường biến trên trang Web của máy chủ thì khi sử dụng chiến lược được mô tả, máy chủ sẽ trả về chuỗi cảnh báo("bạn đang bị tấn công") .
Khi trình duyệt tải xuống tập lệnh được mã hóa, nó sẽ chuyển tập lệnh đó thành cảnh báo ("bạn đang bị tấn công") và hiển thị tập lệnh như một phần của trang Web nhưng sẽ không chạy tập lệnh đó.
Thêm mã HTML vào ứng dụng Java phía máy chủĐể ngăn mã tập lệnh độc hại được hiển thị cùng với trang, ứng dụng của bạn phải mã hóa tất cả các biến chuỗi trước khi chúng được hiển thị trên trang. Mã hóa chỉ đơn giản bao gồm việc chuyển đổi từng ký tự thành tên đối tượng HTML tương ứng, như được hiển thị trong mã Java được hiển thị trong Liệt kê 1.
Liệt kê 1. Chuyển đổi các ký tự thành tên đối tượng HTML public class EscapeUtils ( public static Final HashMap m = new HashMap(); static ( m.put(34, """); //< - меньше чем m.put(60, ""); // >- lớn hơn //Người dùng phải khớp tất cả các đối tượng html với các giá trị thập phân tương ứng. // Ánh xạ đối tượng tới các giá trị thập phân được hiển thị trong bảng bên dưới) public static String escapeHtml() ( String str = "alert(\"abc\")"; try ( StringWriter writer = new StringWriter((int) (str .length() * 1.5)); escape(writer, str); System.out.println("chuỗi được mã hóa là " + writer.toString()); bắt (IOEException ioe) (ioe.printStackTrace()); null; ) ) public static void escape(Writer writer, String str) ném IOException ( int len = str.length(); for (int i = 0; i< len; i++) { char c = str.charAt(i); int ascii = (int) c; String entityName = (String) m.get(ascii); if (entityName == null) { if (c >0x7F) ( writer.write(""); writer.write(Integer.toString(c, 10)); writer.write(";"); ) else ( writer.write(c); ) ) else ( writer. viết(tên thực thể);Mã Java trong Liệt kê 1 mã hóa chuỗi HTML Chuỗi chuỗi "alert(\"abc\)" . Sử dụng quy trình sau:
Kết quả là dòng sau sẽ xuất hiện trong đầu ra: notification("abc") .
Bảng 2 hiển thị ánh xạ của các đối tượng HTML tới các giá trị thập phân của chúng.
Bảng 2. Giá trị thập phân của đối tượng HTML| 160 | Không gian không bị phá vỡ | |
| 60 | < | Ít hơn |
| 62 | > | Nhiều hơn |
| 38 | & | Dấu và |
| 162 | ¢ | xu |
| 163 | £ | Lb |
| 165 | ¥ | Jena |
| 8364 | € | Euro |
| 167 | § | Đoạn văn |
| 169 | Bản quyền | |
| 174 | ® | Thương hiệu đã được đăng ký |
| 8482 | ™ | Nhãn hiệu |
Chèn tập lệnh chéo trang là một trong những phương pháp tấn công máy tính của người dùng phổ biến nhất. Tuy nhiên, bạn có thể giảm đáng kể khả năng kẻ tấn công lây nhiễm mã độc vào ứng dụng Web của bạn. Khi xây dựng ứng dụng của bạn, hãy cẩn thận mã hóa tất cả các giá trị đầu ra của trang trước khi gửi chúng đến trình duyệt của người dùng cuối.
Đối tượng được mô tả là một công cụ rất hữu ích và mạnh mẽ. Đối tượng này có một số phương thức, mô tả của chúng được đưa ra dưới đây:
Bộ sưu tập: Phương pháp: Của cải: Bộ sưu tập Response.CookiesBộ sưu tập Cookies đặt giá trị cho cookie. Nếu các cookie được chỉ định không tồn tại, nó sẽ tạo chúng. Nếu cookie tồn tại, nó sẽ nhận một giá trị mới và hủy giá trị cũ.
Response.Cookies(cookie) [(key) | . thuộc tính] = giá trị
Tùy chọn:
- cookie - Tên cookie
- key - Tham số tùy chọn. Nếu được chỉ định thì cookie là một thư mục (được lồng vào nhau) và khóa là một tập hợp các giá trị.
- thuộc tính - Thông tin được chỉ định về chính cookie. Tham số này có thể là một trong những tham số sau:
- value - Chỉ định giá trị được gán cho khóa hoặc thuộc tính này.
| Tên | Sự miêu tả |
| Lãnh địa | Chỉ ghi âm. Nếu được chỉ định, cookie chỉ được gửi theo yêu cầu từ miền này. |
| Hết hạn | Chỉ ghi âm. Ngày mà cookie hết hạn. Ngày này phải được đặt để cookie được ghi vào ổ cứng của máy khách sau khi phiên kết thúc. Nếu thuộc tính này không được đặt thì ngày hết hạn của cookie được coi là ngày hiện tại. Cookie sẽ hết hạn ngay sau khi kết thúc phiên. |
| HasKey | Chỉ đọc thôi. Cho biết cookie có chứa khóa đã cho hay không. |
| Con đường | Chỉ ghi âm. Nếu được chỉ định, cookie chỉ được gửi theo yêu cầu từ đường dẫn này. Nếu tham số không được đặt, đường dẫn đến ứng dụng sẽ được sử dụng. |
| Chắc chắn | Chỉ ghi âm. Cho biết liệu cookie có được bảo vệ hay không. |
Bình luận:
Nếu cookie chính được tạo như trong tập lệnh sau,
sau đó tiêu đề sau sẽ được gửi:
Set-Cookie:MYCOOKIE=TYPE1=đường&TYPE2=cookie
Nếu bạn gán giá trị cho mycookie mà không sử dụng khóa thì hành động này sẽ hủy khóa type1 và type2. Ví dụ:
Trong ví dụ trước, các khóa type1 và type2 sẽ bị hủy và giá trị của chúng sẽ bị mất. Mycookie bây giờ sẽ chứa kẹo dẻo sô cô la có giá trị.
Bạn cũng có thể kiểm tra sự tồn tại của một khóa cụ thể theo cách sau:
Nếu TRUE được hiển thị thì khóa đó tồn tại; nếu FALSE thì không tồn tại.
Phương thức phản hồi.WritePhản hồi.Viết biến_or_value
Tùy chọn:
- biến_or_value - Dữ liệu được hiển thị trên màn hình trình duyệt thông qua HTML. Tham số này có thể thuộc bất kỳ loại nào được VisualBasic Scripting Edition hỗ trợ. Nghĩa là, dữ liệu có thể thuộc các loại sau: ngày, chuỗi, ký tự, giá trị số. Giá trị của tham số này không thể chứa tổ hợp %>. Thay vào đó, bạn có thể sử dụng tổ hợp tương đương %\>. Máy chủ web sẽ chuyển đổi chuỗi này thành chuỗi được yêu cầu khi tập lệnh được thực thi.
Ví dụ sau đây cho thấy cách hoạt động của phương thức Response.write để xuất thông báo cho máy khách.
Tôi sẽ chỉ nói với bạn: Và tên của bạn
Ví dụ sau thêm thẻ HTML vào trang web. Vì phương thức này không thể chứa tổ hợp %> nên chúng tôi sử dụng chuỗi %\>. Vì vậy, một kịch bản ví dụ:
Đầu ra sẽ là dòng:
