HTML5 example

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

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

Network Utility