HTML+CSS+JS 用户反馈投诉页面制作教程

以下是一个简单的用户反馈投诉页面的 HTML+CSS+JS 代码示例，可用于收集用户反馈和投诉信息。

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>用户反馈投诉页面</title>
	<link rel='stylesheet' href='style.css'>
</head>
<body>
	<header>
		<h1>用户反馈投诉页面</h1>
	</header>
	<main>
		<form id='feedback-form'>
			<label for='name'>姓名：</label>
			<input type='text' id='name' name='name' required>
			<label for='email'>邮箱：</label>
			<input type='email' id='email' name='email' required>
			<label for='feedback'>反馈或投诉：</label>
			<textarea id='feedback' name='feedback' rows='5' required></textarea>
			<button type='submit'>提交</button>
		</form>
	</main>
	<footer>
		<p>版权所有 &copy; 2021</p>
	</footer>
	<script src='script.js'></script>
</body>
</html>

CSS 代码

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}

header {
	background-color: #333;
	color: #fff;
	padding: 20px;
}

h1 {
	margin: 0;
	font-size: 36px;
}

main {
	padding: 20px;
}

form label {
	display: block;
	margin-bottom: 10px;
}

form input[type='text'],
form input[type='email'],
form textarea {
	display: block;
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 20px;
	font-size: 16px;
}

form textarea {
	resize: vertical;
	min-height: 100px;
}

form button[type='submit'] {
	background-color: #333;
	color: #fff;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
}

footer {
	background-color: #ccc;
	color: #333;
	padding: 20px;
	text-align: center;
}

JavaScript 代码

const form = document.getElementById('feedback-form');

form.addEventListener('submit', (event) => {
	event.preventDefault();

	const name = form.elements['name'].value;
	const email = form.elements['email'].value;
	const feedback = form.elements['feedback'].value;

	// 这里可以把反馈或投诉提交到服务器或保存到本地存储等
	console.log('姓名：' + name + '\n邮箱：' + email + '\n反馈或投诉：' + feedback);

	alert('提交成功！感谢您的反馈或投诉。');
	form.reset();
});

该代码实现了一个简单的用户反馈投诉页面，用户可以输入姓名、邮箱和反馈或投诉内容，并点击提交按钮提交表单。提交时会阻止默认的表单提交行为，并使用 JavaScript 获取表单数据并在控制台打印出来。同时，页面也会提示用户提交成功，并清空表单内容。开发者可以根据实际需求对代码进行修改和扩展。

注意：

该示例代码中仅将表单数据打印到控制台，实际应用中需要将数据发送到服务器进行处理。
可以根据实际需求添加更多表单字段，例如电话号码、地址等。
可以使用其他 JavaScript 库或框架来实现更复杂的功能，例如表单验证、数据存储等。

希望以上示例代码和说明能帮助您创建自己的用户反馈投诉页面！