To create a filter list with JavaScript, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    .searchInput {       width: 100%;       font-size: 16px;       padding: 12px 20px 12px 40px;       border: 2px solid grey;       margin-bottom: 12px;    }    .animalUL {       list-style-type: none;       padding: 0;       margin: 0;    }    .animalUL li a {       border-top: 1px solid rgb(0, 0, 0);       ... Read More

To add form validation for empty input fields with JavaScript, the code is as follows −Example Live Demo JavaScript empty input field validation example Name: Submit the form empty to see the validation performed    function emptyValidation() {       var formField = document.forms["Form1"]["firstName"].value;       if (formField == "" || x == null) {          alert("Name must be filled out");          return false;       }    } OutputThe above code will produce the following output −On submitting the form empty −

To create autocompletion in a form, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    body {       margin: 10px;       padding: 0px;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .autocomplete {       position: relative;       display: inline-block;    }    input {       border: none;       background-color: #f1f1f1;       padding: 10px;       font-size: 16px;       border-radius: 4px;    }    input[type="text"] { ... Read More

To create a form with multiple steps, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    body {       background-color: #f1f1f1;    }    #regForm {       margin: 100px auto;       font-family: Raleway;       padding: 40px;       width: 70%;       min-width: 300px;    }    h1 {       text-align: center;    }    input {       padding: 10px;       width: 100%;       font-size: 17px;       font-family:'Segoe ... Read More

To toggle between password visibility with JavaScript, the code is as follows −Example Live Demo Password visibility example Password: Show Password Click on the above checkbox to see your password as text    document.querySelector(".check").addEventListener("click", showPass);    function showPass() {       var inputPassEle = document.getElementById("inputPass");       if (inputPassEle.type === "password") {          inputPassEle.type = "text";       } else {          inputPassEle.type = "password";       }    } OutputThe above code will produce the following output −On checking the show password checkbox −

On a registration page, you must have seen an input filed to set the password. On entering the password, the validation system suggests you how to construct a password. For example, a password should have at least a number, character, it should be minimum 8 characters. In this tutorial, we will see how to set the same password validation form on a web page. On typing to set the password the validation system will suggest the correct suggestions. Let us see how. Create a form The element is used to create a form on a web page. Two ... Read More

To trigger a button click on keyboard "enter" with JavaScript, the code is as follows −Example Live Demo Trigger Button Click on Enter Example Button Press the "Enter" key inside the above input field to trigger the button.    var inputText = document.getElementById("inputField");    inputText.addEventListener("keyup", function(event) {       if (event.keyCode === 13) {          event.preventDefault();          document.getElementById("alertBtn").click();       }    }); OutputThe above code will produce the following output −On typing something in the field and then pressing enter −

To find out if capslock is on inside an input field with JavaScript, the code is as follows −Example Live Demo    #textBox {       display: none;       color: red;    } Detecting Caps Lock Example Press caps lock in the above input field to check warning WARNING! Caps lock is ON.    var input = document.querySelector(".inputfield");    var textBox = document.querySelector(".textBox");    input.addEventListener("keyup", event => {       if (event.getModifierState("CapsLock")) {          textBox.style.display = "block";       } else {          textBox.style.display = "none";       }    }); OutputThe above code will produce the following output −On typing something in the input field with capslock on −

To check whether a checkbox is checked with JavaScript, the code is as follows −Example Live Demo Displaying textBox when a checkbox is checked Checkbox: Checkbox is checked!!!    document.querySelector(".check").addEventListener("click", checkFunction);    function checkFunction() {       var checkBox = document.querySelector(".check");       var textBox = document.querySelector(".textBox");       if (checkBox.checked == true) {          textBox.style.display = "block";       } else {          textBox.style.display = "none";       }    } OutputThis will produce the following output −On clicking the checkbox −

A select box allows you to create a dropdown for users to select a specific value from a list. These generally appear when let’s say you want to a user to select a degree from a list of degrees, favourite sports from a list of popular sports, etc. Let us see how to create custom select boxes with CSS and JavaScript. The color of the select box, the appearance, etc. can be easily changed. Let us see how − Create a container for the select box First, create a container div for the select boxes. Option value 0 is where ... Read More