1.使用HBuilderx编写代码,创建demo6. html;2.在2022级新生入学当天,要将新生的基本信息录入到系统中,具体字段有: 姓名、家庭所在地市、年龄、就读学院、专业、商考分数,存储之后需要把以上需求说明: 信息显示出来
时间: 2024-09-06 17:01:34 浏览: 38
<<请使用中文回答我或者给我介绍一下: 使用HBuilderx编写代码,创建demo6.html。
首先,你需要下载并安装HBuilderx编辑器,这是一个专为前端开发者设计的集成开发环境(IDE),支持多种编程语言和框架。接着,按照以下步骤创建demo6.html文件:
1. 打开HBuilderx编辑器。
2. 点击菜单栏的"文件" -> "新建" -> "HTML文件",创建一个新的HTML文件。
3. 将新建的文件保存为demo6.html。
下面是创建一个简单的HTML页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>新生信息系统</title>
</head>
<body>
<h1>新生信息录入系统</h1>
<form id="newStudentForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="city">家庭所在地市:</label>
<input type="text" id="city" name="city"><br><br>
<label for="age">年龄:</label>
<input type="number" id="age" name="age"><br><br>
<label for="college">就读学院:</label>
<input type="text" id="college" name="college"><br><br>
<label for="major">专业:</label>
<input type="text" id="major" name="major"><br><br>
<label for="score">商考分数:</label>
<input type="number" id="score" name="score"><br><br>
<input type="button" value="提交" onclick="submitForm()">
</form>
<script>
function submitForm() {
var studentInfo = {
name: document.getElementById('name').value,
city: document.getElementById('city').value,
age: document.getElementById('age').value,
college: document.getElementById('college').value,
major: document.getElementById('major').value,
score: document.getElementById('score').value
};
// 这里可以添加代码将信息存储到数据库或服务器
console.log(studentInfo);
// 展示信息
var displayInfo = '新生信息:' +
'姓名:' + studentInfo.name + '<br>' +
'家庭所在地市:' + studentInfo.city + '<br>' +
'年龄:' + studentInfo.age + '<br>' +
'就读学院:' + studentInfo.college + '<br>' +
'专业:' + studentInfo.major + '<br>' +
'商考分数:' + studentInfo.score;
alert(displayInfo);
}
</script>
</body>
</html>
```
这段代码创建了一个简单的表单,包含姓名、家庭所在地市、年龄、就读学院、专业、商考分数六个字段,当用户填写完毕并点击提交按钮时,JavaScript函数submitForm会被调用。这个函数会从表单中获取数据,然后在控制台打印出来,并通过一个弹窗显示所有录入的信息。
阅读全文