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

});
相关推荐
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js