Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Trong bài thực hành này, chúng ta sẽ tạo một form fullscreen search bằng HTML, CSS và JavaScript.
Bước 1) Thêm HTML:
Ví dụ
<div class="containerx"> <h2>Fullscreen Search Form</h2> <p>Click vào button bên dưới để mở search bar</p> <button type="button" id="openform">Open Search bar</button> <div class="overlay"> <span id="closeform" title="Close form">×</span> <form action="/action_page.php" method="post"> <input id="input" type="text" name="search" placeholder="Search..." required="required" /> <button id="btn1" type="submit"><i class="fa fa-search"></i></button> </form> </div> </div>
Bước 2) Thêm CSS:
Ví dụ
.containerx { padding:0 20px; } /* Cố định lớp phủ */ .overlay { background-color:black; background-color:rgba(0,0,0,0.6); position:fixed; top:0; left:0; width:100%; height:100%; } /* Tạo kiểu cho phần tử span */ .overlay > span { font-size:50px; color:white; position:absolute; top:60px; right:60px; cursor:pointer; } .overlay > span:hover { color:red; } /* Tạo kiểu cho phần tử form */ .overlay > form { position:absolute; top:50%; left:50%; width:70%; transform:translate(-50%,-50%); } /* Tạo kiểu cho phần tử input */ form > input { border:none; outline:none; padding:10px; width:80%; float:left; border-radius:5px 0px 0px 5px; } /* Thêm hiệu ứng khi được lấy nét */ form > input:focus { box-shadow:0px -2px violet, 0px 2px violet, 2px 0px violet, -2px 0px violet; } /* Tạo kiểu cho phần tử button */ .containerx > button, form > button { border:none; outline:none; width:20%; font-size:16px; color:white; background-color:royalblue; float:left; padding:10px 0; text-align:center; border-radius:0px 5px 5px 0px; cursor:pointer; } .containerx > button { width:200px; border-radius:5px; } .containerx > button:hover, form > button:hover { background-color:orange; } /* Clear fixed */ form:after { content:""; display:table; clear:both; } /* Định nghĩa hiệu ứng */ @keyframes opacity { from { opacity:0;} to { opacity:1;} }
Bước 3) Thêm JavaScript:
Ví dụ
<script> // Khai báo các biến var openform, closeform, overlay, input, btn1; openform = document.getElementById('openform'); closeform = document.getElementById('closeform'); overlay = document.getElementsByClassName('overlay')[0]; input = document.getElementById('input'); btn1 = document.getElementById('btn1'); // Click vào nút "Open Search bar" để mở form openform.onclick = function() { overlay.style.display = "block"; overlay.style.animation = "opacity 0.8s"; } // Click vào phần tử span để đóng form closeform.onclick = function() { overlay.style.display = "none"; } // Click vào vị trí bất kỳ để đóng form window.onclick = function(e) { if(e.target == overlay) { overlay.style.display = "none"; } } // Thêm hiệu ứng boxshadow cho phần tử button khi lấy nét phần tử input input.onfocus = function() { btn1.style.boxShadow = "0px -2px violet, 0px 2px violet, 2px 0px violet"; } // Xóa hiệu ứng boxshadow cho phần tử button khi phần tử input thôi lấy nét input.onblur = function() { btn1.style.boxShadow = "none"; } </script>