首页写一个前端信息登记表页面，表内信息包含：姓名、学号、专业名称、专业班级

写一个前端信息登记表页面，表内信息包含：姓名、学号、专业名称、专业班级

时间: 2024-10-10 16:16:57 浏览: 51

创建一个前端信息登记表页面，通常会涉及HTML、CSS和JavaScript的使用。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>学生信息登记表</title> <style> .form-container { width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } input[type="text"], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; border-radius: 4px; } </style> </head> <body> <div class="form-container"> <h2>学生信息登记表</h2> <form id="studentForm"> <label for="name">姓名:</label><br> <input type="text" id="name" name="name"><br> <label for="studentId">学号:</label><br> <input type="text" id="studentId" name="studentId"><br> <label for="major">专业名称:</label><br> <select id="major" name="major"> <option value="">请选择</option> <option value="计算机科学">计算机科学</option> <option value="软件工程">软件工程</option>  </select><br> <label for="class">专业班级:</label><br> <input type="text" id="class" name="class"><br> <button type="submit">提交</button> </form> </div> <script> document.getElementById("studentForm").addEventListener("submit", function(e) { e.preventDefault(); // 阻止默认提交行为 console.log("表单数据:", this.serialize()); // 这里可以进一步处理表单数据，比如发送到服务器 }); </script> </body> </html> ```

阅读全文