In this article, we will know How to create a dynamic HTML page using HTML, CSS, and JavaScript. Let us first know what actually is a dynamic HTML page.
Dynamic HTML page, as the name suggests refers to an HTML page that is dynamic in such a way that it is customizable and changeable according to user input. For example:-
- Using CSS we can change the background color of the web page each time the user clicks a button on the webpage.
- Using JavaScript we can ask the user to enter his/her name and then display it dynamically on the webpage.
If you want to get to know more about Dynamic HTML pages, you can have a look at this article DHTML JavaScript .
Let us take some examples to know how to create a dynamic HTML page using HTML and CSS.
Example 1: Taking username as input and dynamically changing the text content of web page
HTML
<!DOCTYPE html><html lang="en"><head> <title> How to create dynamic HTML pages ? </title></head><body> <h1>Enter Your Name</h1> <input id="name" type="text"> <button type="button" onclick="EnterName()">Submit</button> <p style="color:green" id="demo"></p> <script> function EnterName() { let x = document.getElementById("name").value; document.getElementById("demo").innerHTML = "Welcome to Geeks For Geeks " + x; } </script></body></html> |
Output:
Create dynamic HTML Pages
Example 2: Dynamically changing the background color of a webpage on each click
HTML
<!DOCTYPE html><html lang="en"><head> <script src= </script></head><body style="text-align:center;" id="body"> <h1>Enter Your Color Choice</h1> <button type="button" onclick="changecolor()"> Color </button> <script> function changecolor() { // Generating random color each time let color = "#" + (Math.random() * 16777215 | 0).toString(16); $("body").css("background-color", color); } </script></body></html> |
Output:
