
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Đăng Sản Phẩm</title>
<style>
body { font-family: Arial; padding: 20px; }
input, select, textarea, button { display: block; margin: 10px 0; width: 300px; padding: 8px; }
.product-preview { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; width: 320px; }
</style>
</head>
<body>
<h2>Đăng sản phẩm mới</h2>
<form id=”productForm”>
<input type=”text” id=”name” placeholder=”Tên sản phẩm” required />
<textarea id=”description” placeholder=”Mô tả sản phẩm” required></textarea>
<input type=”number” id=”price” placeholder=”Giá (VND)” required />
<label for=”color”>Chọn màu:</label>
<select id=”color”>
<option value=”Đỏ”>Đỏ</option>
<option value=”Xanh”>Xanh</option>
<option value=”Vàng”>Vàng</option>
</select>
<label for=”size”>Chọn kích thước:</label>
<select id=”size”>
<option value=”Nhỏ”>Nhỏ</option>
<option value=”Vừa”>Vừa</option>
<option value=”Lớn”>Lớn</option>
</select>
<button type=”submit”>Đăng sản phẩm</button>
</form>
<div id=”preview” class=”product-preview” style=”display:none;”>
<h3>Xem trước sản phẩm:</h3>
<p><strong>Tên:</strong> <span id=”pName”></span></p>
<p><strong>Mô tả:</strong> <span id=”pDesc”></span></p>
<p><strong>Giá:</strong> <span id=”pPrice”></span> VND</p>
<p><strong>Màu:</strong> <span id=”pColor”></span></p>
<p><strong>Kích thước:</strong> <span id=”pSize”></span></p>
</div>
<script>
document.getElementById(‘productForm’).addEventListener(‘submit’, function(e) {
e.preventDefault();
// Lấy dữ liệu
const name = document.getElementById(‘name’).value;
const desc = document.getElementById(‘description’).value;
const price = document.getElementById(‘price’).value;
const color = document.getElementById(‘color’).value;
const size = document.getElementById(‘size’).value;
// Hiển thị
document.getElementById(‘pName’).textContent = name;
document.getElementById(‘pDesc’).textContent = desc;
document.getElementById(‘pPrice’).textContent = price;
document.getElementById(‘pColor’).textContent = color;
document.getElementById(‘pSize’).textContent = size;
document.getElementById(‘preview’).style.display = ‘block’;
});
</script>
</body>
</html>
Đánh giá
Chưa có đánh giá nào.