Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to sort an HTML list using JavaScript?
To sort an HTML list using JavaScript, the code is as follows −Example Live Demo Sorting list example Click to sort Giraffe Camel Dog Lion Cheetah Cat document .getElementsByTagName("button")[0] .addEventListener("click", sortList); function sortList() { var list, i, sortFlag, LiEle, sorted; list = document.querySelector(".animalList"); sortFlag = true; while (sortFlag) { sortFlag = false; LiEle = list.getElementsByTagName("LI"); for (i = 0; i < LiEle.length - 1; i++) { ...
Read MoreHow to create a filter list with JavaScript?
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 MoreHow to add form validation for empty input fields with JavaScript?
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 −
Read MoreHow to turn off spell checking (grammar correction) for HTML form elements?
To turn off spell check for form elements, the code is as follows −Example Live Demo Disabling Spellcheck Example Your Name: About Yourself Type wrong spelling in the above input field to see spellcheck in action OutputThe above code will produce the following output −On typing something in the input fields −
Read MoreHow to disable autocomplete of an HTML input field?
To disable autocomplete of an input field, the code is as follows −Example Live Demo input{ font-size: 18px; padding: 10px; margin: 10px; border:1px solid grey; } Autocomplete on/off Example First name: Last name: Type in the above fields and refresh page to see autocomplete at work OutputThe above code will produce the following output −On typing something in the above fields after submitting the form one time −
Read MoreHow to create an Autocomplete with JavaScript?
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 MoreHow to create a form with multiple steps in JavaScript?
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 MoreHow to toggle between password visibility with JavaScript?
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 −
Read MoreHow to trigger a button click on keyboard "enter" with JavaScript?
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 −
Read MoreHow to create a responsive navigation menu with a login form inside of it with HTML and CSS?
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