简易的提交页面
contact.html
<!DOCTYPE html>
<html>
<head>
<title>联系我们</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="JS/main.js"></script>
<script src="JS/scripts-all.js"></script>
<link rel="stylesheet" href="styles.css">
<div class="page-transition">
<style>
function setLanguage(lang) {
var langElements = document.querySelectorAll('[id^="lang-"]');
for (var i = 0; i < langElements.length; i++) {
var langElement = langElements[i];
if (langElement.id === 'lang-' + lang) {
langElement.setAttribute('src', 'languages/' + lang + '.json');
} else {
langElement.removeAttribute('src');
}
}
}
/* 全局样式 */
body.light-theme {
background-color: #f5f5f5;
color: #333;
}
body.dark-theme {
background-color: #333;
color: #f5f5f5;
}
h1, h2, h3 {
color: inherit;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
}
nav ul li a:hover {
background-color: #ddd;
}
/* 主页样式 */
.home-page {
text-align: center;
padding: 50px;
}
/* 联系页面样式 */
.contact-page {
text-align: center;
padding: 50px;
}
.form-container {
margin-top: 50px;
text-align: center;
}
.form-container label,
.form-container input,
.form-container textarea {
display: block;
margin: 10px auto;
width: 300px;
}
.form-container input[type="submit"] {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border-radius: 5px;
border: none;
}
/* 切换主题样式 */
.theme-toggle {
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #333;
color: #f5f5f5;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body class="light-theme">
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="contact.html">联系</a></li>
<li><a href="lsym.html">历史页面</a></li>
<li><a href="T.html">测试页面</a></li>
</ul>
</nav>
<!-- 切换主题按钮 -->
<div class="theme-toggle" onclick="toggleTheme()">切换主题</div>
<!-- 联系页面 -->
<div class="contact-page">
<h1>联系我们</h1>
<p>请填写以下信息与我们取得联系:</p>
<div class="form-container">
<form id="contact-form" method="POST" action="save_form.php">
<div>
<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="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
<input type="submit" value="提交">
</form>
</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br>
<div class="row pt-5 text-left">
<div class="col-md-12 text-left">
<span class="copyright">
Copyright ©
<script>document.write(new Date().getFullYear());</script> 红石块工作室 All rights reserved. |
</span>
<span class="icp">
<a href="https://icp.gov.moe/?keyword=20230254" target="_blank">萌ICP备20230254号</a>
</div>
</div>
</div>
</footer>
</div>
<script>
function toggleTheme() {
var body = document.querySelector('body');
body.classList.toggle('light-theme');
body.classList.toggle('dark-theme');
}
function translatePage() {
var lang = localStorage.getItem('lang') || 'en';
var langElements = document.querySelectorAll('[data-lang-key]');
langElements.forEach(function(element) {
var key = element.getAttribute('data-lang-key');
var translatedText = translations[lang][key];
element.textContent = translatedText;
});
}
//动画
var switchButton = document.getElementById('switch-button');
var pageContainer = document.getElementById('page-container');
switchButton.addEventListener('click', function() {
pageContainer.classList.add('page-transition'); // 添加过渡类
// 模拟延迟以展示动画效果
setTimeout(function() {
// 执行页面切换操作
pageContainer.classList.remove('page-transition'); // 移除过渡类
}, 500); // 等待0.5秒
});
</script>
</body>
</html>
save_form.php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
// 生成唯一的文件名
$filename = date("YmdHis") . ".txt";
// 拼接文件路径
$filepath = "tmss/" . $filename;
// 以追加模式打开文件
$file = fopen($filepath, "a");
// 将表单数据写入文件
fwrite($file, "Name: " . $name . "\n");
fwrite($file, "Email: " . $email . "\n");
fwrite($file, "Message: " . $message . "\n");
fwrite($file, "-------------------------\n");
// 关闭文件
fclose($file);
// 使用 JavaScript 弹窗提示保存成功,并阻止表单提交
echo '<script>
alert("信息已成功保存!");
// 跳转回 contact.html 页面
window.location.href = "contact.html";
</script>';
}
?>
/*文字输入框的美化*/
.form-container input[type="text"],
.form-container input[type="email"],
.form-container textarea {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
/*文字输入框的美化结束*/
body {
background-color: #d1f7c4;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
font-size: 18px;
}
nav ul li a:hover {
color: #ff0000;
}
nav {
background-color: #ffffcc;
}
input[type="text"], input[type="password"], textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
outline: none;
border-color: #007bff;
}
input[type="email"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
input[type="email"]:focus {
outline: none;
border-color: #007bff;
}
input[type="text"], input[type="password"], textarea, input[type="email"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
text-align: center; /* 添加此行 */
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, input[type="email"]:focus {
outline: none;
border-color: #007bff;
}
input[type="text"], input[type="password"], textarea, input[type="email"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
text-align: center;
display: block;
margin: 0 auto; /* 添加此行 */
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, input[type="email"]:focus {
outline: none;
border-color: #007bff;
}
/* 定义按钮切换主题的样式 */
.theme-toggle-button {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* 定义暗色主题样式 */
[data-theme="dark"] {
background-color: #212121;
color: #fff;
}
/* 定义亮色主题样式 */
[data-theme="light"] {
background-color: #f5f5f5;
color: #333;
}
/* 输入框样式 */
#name, #email, #message {
display: block;
margin: 10px auto;
width: 300px;
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
}
/* 提交按钮样式 */
input[type="submit"] {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border-radius: 5px;
border: none;
cursor: pointer;
}
/*给备案用的*/
.row.pt-5.text-left .col-md-12.text-left .icp {
margin-left: 10px; /* 调整你希望的间距大小 */
}
/* 手机屏幕样式 */
@media (max-width: 768px) {
/* 导航样式 */
nav ul {
display: none;
}
nav ul li {
display: block;
}
/* 主页样式 */
.home-page,
.contact-page {
padding: 20px;
}
/* 表单样式 */
.form-container input,
.form-container textarea {
width: 100%;
max-width: 300px;
}
/* 手机屏幕样式 */
@media (max-width: 768px) {
/* 表单样式 */
.form-container {
text-align: center;
}
.form-container label,
.form-container input,
.form-container textarea {
display: block;
margin: 10px auto;
max-width: 300px;
width: 100%;
}
<style>
<style>
/* 手机屏幕样式 */
@media (max-width: 768px) {
/* 表单样式 */
.form-container {
text-align: center;
}
.form-container label,
.form-container input,
.form-container textarea {
display: block;
margin: 10px auto;
max-width: 300px;
width: 100%;
}
}
/* 手机屏幕样式 */
@media (max-width: 768px) {
/* 表单样式 */
.form-container {
display: flex;
flex-direction: column;
align-items: center;
}
/* 输入框和文本区域样式 */
.form-container label,
.form-container input,
.form-container textarea {
width: 100%;
max-width: 300px;
margin-bottom: 10px;
text-align: center;
}
}
.page-transition {
transition: opacity 0.5s ease-in-out;
}
/*有用的css*/
.templateux-footer {
padding: 20px 0;
background-color: #f9f9f9;
}
.templateux-footer .container {
border-top: 1px solid #ccc;
padding-top: 20px;
}
.templateux-footer .row {
justify-content: center;
}
.templateux-footer .col-md-12 {
margin-bottom: 20px;
}
.templateux-footer .record {
margin-top: 10px;
}
.templateux-footer .record::before {
content: "|";
margin-right: 5px;
color: #888;
}
/*6*/
.templateux-footer {
padding: 20px 0;
background-color: #f9f9f9;
}
.templateux-footer .container {
border-top: 1px solid #ccc;
padding-top: 20px;
}
.templateux-footer .information {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.templateux-footer .information::before,
.templateux-footer .information::after {
content: "";
flex-grow: 1;
height: 1px;
background-color: #ccc;
}
.templateux-footer .information::before {
margin-right: 10px;
}
.templateux-footer .information::after {
margin-left: 10px;
}