Info | No Wrap | Fullscreen | Raw Text | HTML preview | | | Fork
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.container {
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input, .form-group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.message {
display: none;
color: green;
margin-top: 20px;
}
img {
max-width: 400px;
height: auto;
display: block;
margin: 20px auto;
}
<a href="#about">About
</a> <a href="#contact">Contact
</a>
<h1>HTML5 Example Page
</h1> <img src="images/image.png" alt="Image">
<input type="text" id="name" name="name" required> <input type="email" id="email" name="email" required> <select id="country" name="country"> <button type="button" onclick="submitForm()">Submit
</button> <p class="message" id="formMessage">Form submitted successfully!
</p>
<h2>Sample Data Table
</h2> <td>john@example.com
</td> <td>jane@example.com
</td> <td>mike@example.com
</td>
function submitForm() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var country = document.getElementById('country').value;
var table = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.rows.length);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = name;
cell2.innerHTML = email;
cell3.innerHTML = country;
document.getElementById('formMessage').style.display = 'block';
}