简易的提交页面

已于 2023-07-23 22:37:59 修改
阅读量103 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2023-07-23 22:24:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexiaowei2005/article/details/131885266
版权
这是一个实现联系页面的HTML代码示例，包含表单提交到save_form.php以及主题切换的功能。用户可以填写姓名、邮箱和留言，点击提交后，信息会被保存到服务器的文本文件中。此外，页面还提供了切换亮色和暗色主题的选项。
摘要由CSDN通过智能技术生成

简易的提交页面
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 &copy;
      <script>document.write(new Date().getFullYear());</script> 红石块工作室 All rights reserved. &nbsp;&nbsp;|&nbsp;&nbsp;
    </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;
}
矿场清洁工114514号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP制作简易登录、注册页面
Rice_zjh的博客
09-28 3032
登录页面代码 package org.zjh.modek; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.servlet.ServletException; import ja
python 实现简单查询页面_python web 实现简易天气查询
weixin_39960503的博客
12-16 1043
本文记录使用 Flask 快速完成一个 简易天气查询 MVP 程序的探索，学习过程。程序采用Flask+Jinja2实现，其中Flask扩展包括：1、flask-bootstrap，2、Flask-WTF。前端使用 jQuery Ajax 提交 Post，jQuery DOM 操作实现局部刷新显示 JSON 数据。实时天气数据使用心知天气 API 获取。需求完成一个网页版天气查询程序实现以下功能：...
重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
PBitW的博客
08-02 4406
概要 第一部分（左侧下拉） 代码解析 vertical-align document.querySelector js改变css样式的5种方式 菜鸟思路 第一次修改 菜鸟思路 第二次修改 第三次修改 总代码
使用elementUI制作简易登录页面
NanChen的博客
11-17 1万+
<template> <div id="app"> <div id="admin"> <div class="pos" v-loading="loading"> <h1 class="adminh1">用户登录</h1> <el-form :model="ruleForm" status-icon :rules=".
[JavaScript实训] -- 制作简易的购物车页面
热门推荐
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
简易登录页面实现
繁依Fanyi的博客
07-09 3244
导言 本文将介绍一个简单的登录页面的实现，使用HTML、CSS和JavaScript完成。该登录页面具有选项卡切换和表单提交功能。 HTML基础知识 首先，我们来了解一下HTML文档的基本结构： <!DOCTYPE html> <html> <head> <title>Login Page</title> <!-- 引入外部CSS文件 --> <link rel="stylesheet" href="htt
jsp实现简单页面登录
weixin_43376497的博客
10-07 1万+
壹、页面布局和实现功能 （1）、页面布局为一个用户名输入框和一个密码输入框，以及一个提交按钮和清空按钮。 （2）、当用户输入用户名和密码后（比如：用户名为：admin，密码为：123456），点击登录按钮时，页面会跳转到另一个页面，显示“正在进入页面”，如果密码或用户名两者有一不符合或都不符合，则会跳转到错误页面，提示输入正确的信息，点击清空按钮时，用户名和密码都会被清空。 贰、如何实现功能？ 一...
JAVAEE简易作业提交系统（Version1）
qq_40209622的博客
03-11 807
简易作业提交系统（Version1） 1.系统功能分析 本次作业主要是基于Mysql，Servlet，JSP做一个简易的作业管理系统，主要是为了了解三者之间的相互交互与参数的传递，经过分析，version1在不涉及权限与登录状态下的功能分析如下: 学生端：输入学号登录，查看自己已提交的作业，查看作业列表，提交作业。 老师端：查看所有学生的作业，根据条件筛选查看作业，添加学生，添加需要提交的...
jsp session简易购物车
ximifa的博客
05-09 1927
用几个jsp制作一个简易的购物车，其中有计算机类图书购买窗口，历史类图书购买窗口，购书车列表窗口。
jsp实现简易购物车
girls的博客
06-15 6487
实现要求: （a）输入要购买的商品 （b）点击提交按钮后 （c）结账页面将所选择的商品全部列出 代码实现: b9_shopping.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title
简易登陆页面
05-31
本项目名为"简易登录页面"，它是一个简洁的设计，旨在为用户提供清晰、易用的登录体验。在这个项目中，主要涉及到的技术是HTML，这是一种标记语言，用于构建网页的结构和内容。 HTML（HyperText Markup Language）...
手机移动端简易投票活动页面html模板
07-14
【标签】"手机移动端简易投票活动页面html"进一步强调了这个模板是面向移动设备的，并且主要依赖HTML技术来构建。HTML（超文本标记语言）是网页设计的基础，它定义了网页的结构和内容。对于移动设备，设计师需要考虑...
bootstrap搭建简易添加页面
04-28
Bootstrap 搭建简易添加页面是一个适合初学者的实践项目，它主要利用了 Bootstrap 和 HTML5 的特性来创建一个简洁且响应式的表单界面。Bootstrap 是一个流行的前端开发框架，它提供了一系列预先设计的组件、样式和 ...
bootstrap简易登录注册页面
03-30
总之，这个"bootstrap简易登录注册页面"资源包为快速搭建用户认证界面提供了一套便捷的解决方案，通过利用Bootstrap的灵活性和强大功能，开发者可以高效地创建出跨设备兼容且易于维护的登录注册页面。
html仿写简易淘宝购物页面
07-14
在本项目中，“html仿写简易淘宝购物页面”是一个基于HTML、CSS和Bootstrap技术的实践教程，旨在帮助初学者或开发者了解如何构建一个类似于淘宝网的简单购物平台的前端界面。我们将深入探讨这三个核心技术，以及它们...
nodejs安装
a1241436267的博客
08-19 442
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 336
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 350
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 1000
用于在Vue应用程序或API路由中进行HTTP请求，详见。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值