Web Development Articles - Page 534 of 1049

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 −

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

To create a responsive navigation menu with a login form inside of it, the code is as follows −Example Live Demo Document    body {       margin: 0px;       margin-top: 10px;       padding: 0px;    }    nav {       width: 100%;       background-color: rgb(39, 39, 39);       overflow: auto;       height: auto;    }    .links {       display: inline-block;       text-align: center;       padding: 14px;       color: rgb(178, 137, 253);     ... Read More

A popover is a simple tooltip plugin. A popover is a box of content that pops up when the user clicks on a specific element. This plugin relies on popover.js.Creating Popovers in HTMLThe attribute data-toggle = "popover" is used to create a popover in HTML. Adding this attribute to an element converts it to a popover.Syntaxpopover displayExample Live Demo Bootstrap Example Popover In BootStap Learn BootStrap $(document).ready(function(){    $('[data-toggle="popover"]').popover(); }); OutputPositioning PopoversYou can position popovers using the data-placement attribute. By default, a popover appears on the right ... Read More

We can express the knowledge in various forms to the inference engine in the computer system to solve the problems. There are two important representations of knowledge namely, procedural knowledge and declarative knowledge. The basic difference between procedural and declarative knowledge is that procedural knowledge gives the control information along with the knowledge, whereas declarative knowledge just provides the knowledge but not the control information to implement the knowledge. Read through this article to find out more about procedural knowledge and declarative knowledge and how they are different from each other. What is Procedural Knowledge? Procedural or imperative knowledge clarifies ... Read More

On a web page, you may need to place an input field on a navigation menu. Such input field can be used as a search box for the users to search anything on the website. To place the search input field on the right, use the float CSS property and set it to the right value. Create a navigation menu The element is used to create a menu on a web page. The menu links are set using the element − Home Login Register Contact Us More Info ... Read More

Following is the code to create a full screen search box with CSS and JavaScript −Example Live Demo body {    font-family: Arial; } * {    box-sizing: border-box; } .showBtn {    background: #008b0c;    border: none;    color:white;    padding: 10px 15px;    font-size: 20px;    cursor: pointer;    opacity: 0.8; } .showBtn:hover {    opacity: 1; } .overlaySearch {    height: 100%;    width: 100%;    display: none;    position: fixed;    z-index: 1;    top: 0;    left: 0;    background-color: rgba(132, 150, 155, 0.747); } .searchBar {    position: relative;    top: ... Read More

A lot of websites these days have an animate search box on the home page itself. On placing the mouse cursor within the search box, the search box width increases to make it easier for users to search. Let us see how to create such animated search form with HTML and CSS. Create the search form Use the element and place the input type text in it. Do not forget to mention an apt placeholder for the users to understand the purpose of the textbox − Search: Style ... Read More