html实现录入信息,存储在数组中
时间: 2024-06-12 14:04:15 浏览: 12
要实现这个功能,需要使用HTML表单和JavaScript脚本。
首先,我们需要编写HTML表单,让用户可以输入信息。例如:
```html
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age"><br><br>
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br><br>
<button type="button" onclick="addData()">提交</button>
</form>
```
这个表单包含了三个输入框和一个提交按钮。当用户点击提交按钮时,会调用JavaScript函数`addData()`。
接下来,我们需要编写JavaScript函数`addData()`,它会将用户输入的信息存储在一个数组中。例如:
```javascript
var data = []; // 存储用户输入的信息
function addData() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
var person = {
name: name,
age: age,
gender: gender
};
data.push(person); // 将person对象添加到data数组中
// 输出data数组中的内容,用于测试
console.log(data);
}
```
这个函数首先从表单中获取用户输入的姓名、年龄和性别,然后将它们存储在一个名为`person`的对象中。最后,将`person`对象添加到`data`数组中。
你可以在控制台中查看`data`数组中的内容,以确保数据已经正确存储。
最后,我们需要将这些代码保存为一个HTML文件,然后在浏览器中打开它,就可以测试这个功能了。每次用户输入并提交信息时,都会将它们存储在数组中。