Below is an HTML code snippet for a user-fillable form titled "Photography Entry Form." This form includes fields for Name, Address, Town, and Postcode, as well as a section for 20 entries with specified input fields. The total price of the entries will be displayed at the end. Additionally, there's a JavaScript function to handle the dynamic entry and printing requirements as specified.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photography Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h1>Photography Entry Form</h1>
<form id="photographyForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required><br><br>
<label for="town">Town:</label>
<input type="text" id="town" name="town" required><br><br>
<label for="postcode">Postcode:</label>
<input type="text" id="postcode" name="postcode" required><br><br>
<table>
<thead>
<tr>
<th>Title of Entry</th>
<th>Category</th>
<th>Your Sale Price</th>
<th>Entry Price ($15)</th>
</tr>
</thead>
<tbody id="entryRows">
<!-- Entry rows will be generated here -->
</tbody>
</table>
<button type="button" onclick="addEntryRow()">Add Entry</button><br><br>
<strong>Total Entry Price: $<span id="totalPrice">0</span></strong><br><br>
<button type="button" onclick="printForm()">Print</button>
</form>
<script>
const entryPrice = 15;
function addEntryRow() {
const entryRows = document.getElementById("entryRows");
const rowCount = entryRows.children.length;
// Limit to 20 entries
if (rowCount >= 20) {
alert("You can only add up to 20 entries.");
return;
}
const newRow = document.createElement("tr");
newRow.innerHTML = `
<td><input type="text" name="title${rowCount + 1}" required></td>
<td>
<select name="category${rowCount + 1}" required>
<option value="">--Select--</option>
<option value="Portrait">Portrait</option>
<option value="Landscape">Landscape</option>
<option value="General">General</option>
</select>
</td>
<td><input type="number" name="salePrice${rowCount + 1}" value="0" onchange="updateTotalPrice()" required></td>
<td>$${entryPrice}</td>
`;
entryRows.appendChild(newRow);
updateTotalPrice();
}
function updateTotalPrice() {
const totalElement = document.getElementById("totalPrice");
const entries = document.getElementById("entryRows").children;
let total = 0;
for (const row of entries) {
const priceInput = row.querySelector('input[name^="salePrice"]');
const salePrice = priceInput ? parseFloat(priceInput.value) || 0 : 0;
total += entryPrice; // Add fixed entry price of $15 for each entry
}
totalElement.textContent = total.toFixed(2);
}
function printForm() {
const form = document.getElementById("photographyForm");
const name = document.getElementById("name").value;
const address = document.getElementById("address").value;
const town = document.getElementById("town").value;
const postcode = document.getElementById("postcode").value;
let printContent = `${name}\n${address}\n${town}\n${postcode}\n\n`;
const entries = document.getElementById("entryRows").children;
for (const row of entries) {
const title = row.querySelector('input[name^="title"]').value;
const category = row.querySelector('select').value;
const salePrice = row.querySelector('input[name^="salePrice"]').value;
printContent += `${title}: ${category}: $${salePrice}: $${entryPrice}:\n`;
}
const printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<pre>' + printContent + '</pre>');
printWindow.document.close();
printWindow.print();
}
</script>
</body>
</html>
```
### Explanation of the Code:
- **HTML Structure**: The form contains fields for personal information and a table for photography entries.
- **Dynamic Rows**: The JavaScript function `addEntryRow` adds a new entry row, ensuring no more than 20 entries can be added.
- **Total Price Calculation**: The function `updateTotalPrice` calculates the total entry price based on the number of entries (fixed at $15 for each).
- **Print Functionality**: The `printForm` function compiles the form and entry information into a printable format, opening this in a new window for printing.
### Usage:
- You can copy and paste this code into an HTML file, open it in a web browser, and use the form as required. The `Print` button will provide formatted output suitable for printing related to each submitted photograph.