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

});
相关推荐
别拿曾经看以后~16 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死19 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试22 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人31 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人32 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR37 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香39 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969342 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter