[html4strict] Code

Viewer

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Interactive Page with User Input</title>
  7. <style>
  8.   body {
  9.     font-family: Arial, sans-serif;
  10.   }
  11.   .input-field {
  12.     padding: 10px;
  13.     font-size: 16px;
  14.     margin-bottom: 10px;
  15.   }
  16.   .submit-button {
  17.     padding: 10px 20px;
  18.     font-size: 16px;
  19.     background-color: #28a745;
  20.     color: white;
  21.     border: none;
  22.     border-radius: 5px;
  23.     cursor: pointer;
  24.   }
  25.   .display-box {
  26.     margin-top: 20px;
  27.     padding: 20px;
  28.     background-color: #f8f9fa;
  29.     border: 1px solid #ddd;
  30.     border-radius: 5px;
  31.   }
  32. </style>
  33. </head>
  34. <body>
  35.  
  36. <input type="text" id="userInput" class="input-field" placeholder="Type something...">
  37. <button class="submit-button" id="displayButton">Display</button>
  38. <div id="displayText" class="display-box"></div>
  39.  
  40. <script>
  41.   document.getElementById('displayButton').addEventListener('click', function() {
  42.     var inputText = document.getElementById('userInput').value;
  43.     document.getElementById('displayText').textContent = inputText;
  44.   });
  45. </script>
  46.  
  47. </body>
  48. </html>
  49.  

Editor

You can edit this paste and save as new:


File Description
  • Code
  • Paste Code
  • 15 Apr-2024
  • 1.15 Kb
You can Share it: