1)设计网页表单,有文本框输入班级、姓名、学号、提交按钮 2)单击提交按钮, 获得填写信息 3)分行显示x同学,你的班级是xx,你的学号是xx 4)显示学号加22的结果是
时间: 2024-09-26 11:09:36 浏览: 22
设计一个简单的HTML表单用于收集班级、姓名和学号信息:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>学生信息录入</title>
</head>
<body>
<form id="studentForm" action="" method="post">
<label for="class">班级:</label>
<input type="text" id="class" name="class"><br><br>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="id">学号:</label>
<input type="number" id="id" name="id"><br><br>
<button type="submit">提交</button>
</form>
<div id="displayResult"></div>
<script>
document.getElementById('studentForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
const classInput = document.getElementById('class');
const nameInput = document.getElementById('name');
const idInput = document.getElementById('id');
const className = classInput.value;
const studentName = nameInput.value;
const studentId = idInput.value;
displayStudentInfo(className, studentName, studentId);
});
function displayStudentInfo(className, studentName, studentId) {
const displayArea = document.getElementById('displayResult');
displayArea.innerHTML += `<p>${studentName}, 你的班级是${className}, 学号是${studentId}</p>`;
// 显示学号加22的结果
const result = `学号 ${studentId} 加 22 的结果是: ${studentId + 22}`;
displayArea.innerHTML += `<p>${result}</p>`;
}
</script>
</body>
</html>
```
在这个示例中,用户填写完表单后点击提交,会触发`displayStudentInfo`函数,将输入的信息展示出来,并计算学号加上22后的结果。