[练习]用Js获取html页面中表单提交的数据并且返回到控制台

代码地址​​​​​​​​​​​​​​​​​​​​​:
​​​​​​​将前端页面提交的数据返回到前端控制台 · Dduo/前端学习仓库 - 码云 - 开源中国 (gitee.com)

效果图

项目结构

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息填写页面</title>
    <link rel="stylesheet" type="text/css" href="css\styles.css">
    <style></style>
</head>
<body>
    <div class="centered-box">
        <h1>填写信息</h1>
        <form id="infoForm">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required><br><br>
            
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required><br><br>
            
            <label for="age">年龄:</label>
            <input type="number" id="age" name="age" required><br><br>
            
            <button type="submit">提交</button>
        </form>
    </div>

    <script src="js\demo.js"></script>

</body>
</html>

css

css 复制代码
/* 填写信息四个字 */
h1 {
  text-align: center; 
  color: rgb(233, 255, 63); 
}


/* 背景图片 */
.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('109478070_p0_master1200.jpg'); 
  background-size: cover; /* 以覆盖整个盒子 */
  background-position: center; /* 居中背景图片 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 盒子 */
.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #15d5be;
  padding: 320px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 表单 */
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

label {
  margin-bottom: 5px;
}

input {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #69de1a;
}

JavaScript

javascript 复制代码
// 添加计数器 
var count=0;
document.getElementById("infoForm").addEventListener("submit", function(event) {
  alert("信息提交完毕");
  count++;
  event.preventDefault(); 
  
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var age = document.getElementById("age").value;

  console.log("这是第", count,"条数据");
  console.log(" 姓名 :", name);
  console.log(" 邮箱 :", email);
  console.log(" 年龄 :", age);

});
相关推荐
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈