HTML5 example

Info | Wrap Text | Fullscreen | Raw Text | HTML preview | | | Fork

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Example Page</title>
  6.     <style>
  7.         body {
  8.             font-family: Arial, sans-serif;
  9.             background-color: #f4f4f4;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.     h1 {
  14.         margin: 0;
  15.     }
  16.         .navbar {
  17.             background-color: #333;
  18.             overflow: hidden;
  19.         }
  20.         .navbar a {
  21.             float: left;
  22.             display: block;
  23.             color: white;
  24.             text-align: center;
  25.             padding: 14px 20px;
  26.             text-decoration: none;
  27.         }
  28.         .navbar a:hover {
  29.             background-color: #ddd;
  30.             color: black;
  31.         }
  32.         .container {
  33.             padding: 20px;
  34.         }
  35.         .form-group {
  36.             margin-bottom: 15px;
  37.         }
  38.         .form-group label {
  39.             display: block;
  40.             margin-bottom: 5px;
  41.         }
  42.         .form-group input, .form-group select {
  43.             width: 100%;
  44.             padding: 8px;
  45.             box-sizing: border-box;
  46.         }
  47.         table {
  48.             width: 100%;
  49.             border-collapse: collapse;
  50.             margin-top: 20px;
  51.         }
  52.         table, th, td {
  53.             border: 1px solid #ddd;
  54.         }
  55.         th, td {
  56.             padding: 12px;
  57.             text-align: left;
  58.         }
  59.         th {
  60.             background-color: #f2f2f2;
  61.         }
  62.         .message {
  63.             display: none;
  64.             color: green;
  65.             margin-top: 20px;
  66.         }
  67.         img {
  68.             max-width: 400px;
  69.             height: auto;
  70.             display: block;
  71.             margin: 20px auto;
  72.         }
  73.     </style>
  74. </head>
  75.     <div class="navbar">
  76.         <a href="#home">Home</a>
  77.         <a href="#about">About</a>
  78.         <a href="#contact">Contact</a>
  79.     </div>
  80.  
  81.     <div class="container">
  82.         <h1>HTML5 Example Page</h1>
  83.         <img src="images/image.png" alt="Image">
  84.        
  85.         <form id="exampleForm">
  86.             <div class="form-group">
  87.                 <label for="name">Name:</label>
  88.                 <input type="text" id="name" name="name" required>
  89.             </div>
  90.             <div class="form-group">
  91.                 <label for="email">Email:</label>
  92.                 <input type="email" id="email" name="email" required>
  93.             </div>
  94.             <div class="form-group">
  95.                 <label for="country">Country:</label>
  96.                 <select id="country" name="country">
  97.                     <option value="USA">USA</option>
  98.                     <option value="Canada">Canada</option>
  99.                     <option value="UK">UK</option>
  100.                 </select>
  101.             </div>
  102.             <button type="button" onclick="submitForm()">Submit</button>
  103.         </form>
  104.         <p class="message" id="formMessage">Form submitted successfully!</p>
  105.  
  106.         <h2>Sample Data Table</h2>
  107.         <table id="dataTable">
  108.             <thead>
  109.                 <tr>
  110.                     <th>Name</th>
  111.                     <th>Email</th>
  112.                     <th>Country</th>
  113.                 </tr>
  114.             </thead>
  115.             <tbody>
  116.                 <tr>
  117.                     <td>John Doe</td>
  118.                     <td>john@example.com</td>
  119.                     <td>USA</td>
  120.                 </tr>
  121.                 <tr>
  122.                     <td>Jane Smith</td>
  123.                     <td>jane@example.com</td>
  124.                     <td>Canada</td>
  125.                 </tr>
  126.                 <tr>
  127.                     <td>Mike Johnson</td>
  128.                     <td>mike@example.com</td>
  129.                     <td>UK</td>
  130.                 </tr>
  131.             </tbody>
  132.         </table>
  133.     </div>
  134.  
  135.     <script>
  136.         function submitForm() {
  137.             var name = document.getElementById('name').value;
  138.             var email = document.getElementById('email').value;
  139.             var country = document.getElementById('country').value;
  140.  
  141.             var table = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
  142.             var newRow = table.insertRow(table.rows.length);
  143.  
  144.             var cell1 = newRow.insertCell(0);
  145.             var cell2 = newRow.insertCell(1);
  146.             var cell3 = newRow.insertCell(2);
  147.  
  148.             cell1.innerHTML = name;
  149.             cell2.innerHTML = email;
  150.             cell3.innerHTML = country;
  151.  
  152.             document.getElementById('formMessage').style.display = 'block';
  153.         }
  154.     </script>
  155. </body>
  156. </html>