[练习]用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);

});
相关推荐
热忱112820 分钟前
elementUI Table组件实现表头吸顶效果
前端·vue.js·elementui
林涧泣28 分钟前
【Uniapp-Vue3】setTabBar设置TabBar和下拉刷新API
前端
Rhys..34 分钟前
Jenkins pipline怎么设置定时跑脚本
运维·前端·jenkins
易林示43 分钟前
chrome小插件:长图片等分切割
前端·chrome
w(゚Д゚)w吓洗宝宝了1 小时前
单例模式 - 单例模式的实现与应用
开发语言·javascript·单例模式
zhaocarbon1 小时前
VUE elTree 无子级 隐藏展开图标
前端·javascript·vue.js
浏览器爱好者2 小时前
如何在AWS上部署一个Web应用?
前端·云计算·aws
xiao-xiang2 小时前
jenkins-通过api获取所有job及最新build信息
前端·servlet·jenkins
C语言魔术师2 小时前
【小游戏篇】三子棋游戏
前端·算法·游戏
小周不摆烂2 小时前
探索JavaScript前端开发:开启交互之门的神奇钥匙(二)
javascript