首页文本框输入信息获取功能，写出简单代码。（1）创建form表单并绑定表单提交事件，内部创建五个文本框，分别用来输入姓名、学号、年龄、班级、专业，其中学号、年龄只允许输入数字。（2）设置button

文本框输入信息获取功能，写出简单代码。（1）创建form表单并绑定表单提交事件，内部创建五个文本框，分别用来输入姓名、学号、年龄、班级、专业，其中学号、年龄只允许输入数字。（2）设置button

时间: 2024-10-23 09:05:09 浏览: 25

好的，这是一个简单的HTML和JavaScript代码示例，用于创建表单并包含文本框以及一些验证： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文本框输入信息</title> </head> <body> <form id="infoForm"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required><br> <label for="studentNo">学号（仅限数字）：</label> <input type="number" id="studentNo" name="studentNo" pattern="[0-9]*" required><br> <label for="age">年龄（仅限数字）：</label> <input type="number" id="age" name="age" min="0" max="150" required><br> <label for="class">班级：</label> <input type="text" id="class" name="class"><br> <label for="major">专业：</label> <input type="text" id="major" name="major"><br> <button type="submit">提交</button> </form> <script> document.getElementById('infoForm').addEventListener('submit', function (e) { e.preventDefault(); // 阻止表单默认提交 const formData = new FormData(this); // 这里可以进一步处理收集的数据，例如验证和存储 console.log('姓名:', formData.get('name')); console.log('学号:', formData.get('studentNo')); console.log('年龄:', formData.get('age')); console.log('班级:', formData.get('class')); console.log('专业:', formData.get('major')); // 可视化验证结果或发送到服务器 }); </script> </body> </html> ```

阅读全文