Hiển thị thông báo lỗi CSS
|
JavaScript được biết đến nhiều nhất để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không có trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript và Ví dụ về JavaScript này
Trong tệp javascript, tôi sẽ nhắm mục tiêu biểu mẫu đăng ký và thêm trình xử lý sự kiện onsubmit. Vì vậy, mỗi khi chúng tôi nhấp vào nút gửi, một chức năng sẽ chạy. Tôi sẽ chuyển vào hàm dưới dạng đối số sự kiện, vì tôi cần phương thức preventDefault() để dừng biểu mẫu gửi dữ liệu đến máy chủ nếu xảy ra lỗi Show Thông báo cảnh báo có thể được sử dụng để thông báo cho người dùng về điều gì đó đặc biệt. nguy hiểm, thành công, thông tin hoặc cảnh báo × nguy hiểm. Biểu thị một hành động nguy hiểm hoặc có khả năng tiêu cực × Thành công. Biểu thị một hành động thành công hoặc tích cực × Thông tin. Biểu thị một thay đổi hoặc hành động mang tính thông tin trung lập × Cảnh báo. Cho biết một cảnh báo có thể cần chú ý Tự mình thử » Tạo một thông báo cảnh báoBước 1) Thêm HTMLThí dụ
Nếu bạn muốn khả năng đóng thông báo cảnh báo, hãy thêm phần tử có thuộc tính (lớp="cảnh báo") Mẹo. Sử dụng thực thể HTML " Bước 2) Thêm CSSTạo kiểu cho hộp cảnh báo và nút đóng Thí dụ/* Hộp thông báo cảnh báo */ /* Nút đóng */ /* Khi di chuyển chuột qua nút đóng */ Nhiều cảnh báoNếu bạn có nhiều thông báo cảnh báo trên một trang, bạn có thể thêm tập lệnh sau để đóng các cảnh báo khác nhau mà không cần sử dụng thuộc tính onclick trên mỗi phần tử . Và, nếu bạn muốn các cảnh báo mờ dần khi bạn nhấp vào chúng, hãy thêm Hộp thông báo là một trong những thành phần thông tin trên trang web. Nó hiển thị trên các sự kiện khác nhau như thành công hay thất bại của một quy trình. Những thông điệp này thực sự quan trọng đối với thiết kế web tương tác. Trong hướng dẫn này, chúng ta sẽ định kiểu một thông báo lỗi bằng mã CSS ví dụ Tại đây, bạn sẽ không chỉ tìm thấy thông báo lỗi mà còn có thông tin, cảnh báo và thiết kế hộp thông báo thành công. Do kiểu CSS khá giống nhau đối với các loại tin nhắn này ngoại trừ những thay đổi nhỏ về màu sắc và biểu tượng. Bạn có thể kiểm tra đầu ra cuối cùng trên trang demo Khái niệm mã hóa dành cho loại hộp thông báo này rõ ràng và dễ dàng. Bạn chỉ cần bọc văn bản tin nhắn của mình chỉ trong một thẻ div với một tên lớp cụ thể. Sau đó, chúng tôi sẽ tạo kiểu cho các hộp thông báo này bằng CSS Cấu trúc HTMLHTML đơn giản như một dòng mã. Bạn chỉ cần bọc “thông báo lỗi” của mình trong thẻ div với tên lớp là
Ngoài ra, bạn cũng có thể tạo các hộp thông báo về thông tin, thành công, cảnh báo và xác thực bằng cùng một phương pháp đã đề cập ở trên. Chỉ cần thêm một tên lớp có liên quan vào tin nhắn của bạn mà chúng tôi sẽ tạo kiểu trong CSS
Bạn không bị giới hạn chỉ thêm văn bản thuần túy bên trong phần tử hộp thông báo của mình. Bạn cũng có thể thêm bất kỳ thành phần HTML nào như hình ảnh, nút, liên kết hoặc video HTML5. Tuy nhiên, bạn sẽ cần tạo kiểu cho các phần tử này bằng CSS bổ sung Kiểu CSS cho thông báo lỗiTrước hết, xác định CSS chung cho tất cả các loại tin nhắn. Nếu bạn chỉ cần một kiểu thông báo lỗi, thì chỉ cần xóa bộ chọn lớp khác khỏi mã bên dưới .info,
.success,
.warning,
.error,
.validation {
border: 1px solid;
margin: 10px auto;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
max-width: 460px;
}
Sau đó, tạo kiểu cho thông báo lỗi bằng cách nhắm mục tiêu lớp .error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('https://i.imgur.com/GnyDvKN.png');
}
Bạn cũng có thể thêm biểu tượng Font Awesome nếu không muốn thêm biểu tượng hình ảnh. Để làm như vậy, hãy đưa thư viện Font Awesome CSS vào dự án của bạn và thêm biểu tượng cụ thể bằng cách nhắm mục tiêu “. lỗi. before” bộ chọn giả. Sau đây là một ví dụ về việc sử dụng biểu tượng Font Awesome .error:before{
font-family: FontAwesome;
content: '\f057';
font-size: 24px;
color: #D8000C;
}
Tương tự, tạo kiểu CSS cho thông báo xác thực như sau .validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('https://i.imgur.com/GnyDvKN.png');
}
Bạn cũng có thể cần tạo kiểu cho hộp “thông báo cảnh báo” để thu hút sự chú ý của người dùng .warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('https://i.imgur.com/Z8q7ww7.png');
}
Tương tự như vậy, tạo kiểu CSS cho thông tin và thông báo thành công được mô tả như sau .info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('https://i.imgur.com/ilgqWuX.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image: url('https://i.imgur.com/Q9BGTuy.png');
}
Đó là tất cả. Tôi hy vọng bạn thấy hướng dẫn này hữu ích để tạo thông báo lỗi và triển khai thành công ví dụ về kiểu CSS này. Nếu bạn cần thêm bất kỳ trợ giúp nào liên quan đến kiểu dáng CSS, hãy cho tôi biết bằng cách nhận xét bên dưới Làm cách nào để hiển thị thông báo lỗi trong CSS?họ phông chữ. Arial, Helvetica, sans-serif; cỡ chữ. 13px; thông tin,. sự thành công,. cảnh báo,. lỗi,. Thẩm định { biên giới. 1px rắn; lề. 10px 0px; đệm. 15px 10px 15px 50px; Làm cách nào để hiển thị thông báo lỗi trong HTML bằng PHP?Cách nhanh nhất để hiển thị tất cả lỗi và cảnh báo php là thêm những dòng này vào tệp mã PHP của bạn. ini_set('lỗi_hiển_thị', 1);
Là gì. lỗi trong HTML?Xuất hiện lỗi HTML. Khi HTTP 404 xuất hiện trên màn hình của bạn, điều đó có nghĩa là mặc dù máy chủ có thể truy cập được nhưng trang cụ thể mà bạn đang tìm kiếm không có . Trang web bị hỏng hoặc không còn tồn tại. Mã lỗi 404 có thể xuất hiện trên mọi trình duyệt, bất kể bạn đang sử dụng loại trình duyệt nào. |
