Skip to content
Related Articles

Related Articles

Improve Article
How to create dynamic HTML pages ?
  • Last Updated : 18 May, 2021

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>
  
<body style="text-align:center;">
    <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()
        {
            var x= document.getElementById("name").value;
  
            document.getElementById("demo").innerHTML = 
                "Welcome to Geeks For Geeks "+ x ;
        }
    </script>
</body>
    
</html>

Output:

Example 2: Dynamically changing the background color of a webpage on each click 

HTML




<!DOCTYPE HTML>
<html>
  
<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
            var color = "#"+(Math.random()*16777215|0).toString(16);
              
            $("body").css("background-color",color);
        }
    </script>
</body>
    
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :