[练习]用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 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app