HTML代码：税务知识普及报名页面
<!DOCTYPE html>
<html>
<head>
<title>税务知识普及报名页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
<p>.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}</p>
<p>h1 {
text-align: center;
}</p>
<p>form {
margin-top: 20px;
}</p>
<p>label {
display: block;
margin-bottom: 10px;
}</p>
<p>input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}</p>
<p>input[type="submit"] {
width: 100%;
margin-top: 20px;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}</p>
<p>input[type="submit"]:hover {
background-color: #45a049;
}</p>
<p>p.success {
color: green;
}</p>
<p>p.error {
color: red;
}
</style></p>
</head>
<body>
<div class="container">
<h1>税务知识普及报名页面</h1>
<form id="registrationForm" method="post" action="#">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<pre><code> <label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="phone">电话号码:</label>
<input type="text" id="phone" name="phone" required>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4"></textarea>
<input type="submit" value="提交">
</form>
</code></pre>
</div>
<script>
document.getElementById("registrationForm").addEventListener("submit", function(event){
event.preventDefault();
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var message = document.getElementById("message").value;
// Perform form validation here
// If form is valid, submit the form
// Example code to submit the form using AJAX
var xhr = new XMLHttpRequest();
xhr.open("POST", "submit_registration.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
if (response === "success") {
document.getElementById("registrationForm").reset();
showMessage("success", "报名成功!");
} else {
showMessage("error", "报名失败，请重试!");
}
}
};
xhr.send("name=" + name + "&email=" + email + "&phone=" + phone + "&message=" + message);
});
function showMessage(type, message) {
var messageElement = document.createElement("p");
messageElement.classList.add(type);
messageElement.innerHTML = message;
document.getElementById("registrationForm").appendChild(messageElement);
}
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hQOe 著作权归作者所有。请勿转载和采集!