首页写一个表单页面，我们需要获取单表单没输入的内容，进行绑定值，设置默认值获取表单信息打印

写一个表单页面，我们需要获取单表单没输入的内容，进行绑定值，设置默认值获取表单信息打印

时间: 2024-09-25 22:05:21 浏览: 37

创建一个表单页面并获取用户输入通常涉及到HTML、CSS以及JavaScript或者前端框架如React或Vue。下面是一个基本的HTML表单结构示例，同时包含JavaScript事件监听来获取表单数据： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>表单示例</title> <style> .form-container { display: flex; flex-direction: column; align-items: center; } </style> </head> <body> <div class="form-container"> <h1>请输入信息:</h1> <label for="name">姓名：</label> <input type="text" id="name" name="name" placeholder="请输入姓名" value="张三" required><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="请输入邮箱" value="" required><br> <button onclick="getFormValues()">提交</button> </div> <script> function getFormValues() { const formData = { name: document.getElementById('name').value, email: document.getElementById('email').value }; // 打印表单信息 console.log('表单信息:', formData); // 可以在这里进一步处理数据，比如发送到服务器或做其他操作 } </script> </body> </html> ``` 在这个例子中： 1. 使用`<input>`元素创建了两个表单字段：姓名和邮箱。 2. `value`属性设置了默认值，用户可以编辑。 3. `required`属性确保必填字段不能为空。 4. 当点击“提交”按钮时，`getFormValues`函数会被触发，它会获取表单元素的值，并将它们存储在一个对象`formData`中。 5. 最后，通过`console.log`打印出获取到的表单数据。

阅读全文