尝试捕获表单中的用户输入，并将其添加到数组中并显示输出

要捕获表单中的用户输入并将其添加到数组中，然后显示输出，可以使用HTML、JavaScript和CSS来实现。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Input Capture</title>
</head>
<body>
    <form id="userForm">
        <label for="userInput">Enter something:</label>
        <input type="text" id="userInput" name="userInput">
        <button type="button" onclick="addToArray()">Add to Array</button>
    </form>
    <ul id="output"></ul>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

let inputArray = [];

function addToArray() {
    const userInput = document.getElementById('userInput').value;
    if (userInput.trim() !== '') {
        inputArray.push(userInput);
        displayOutput();
        document.getElementById('userInput').value = ''; // Clear the input field
    } else {
        alert('Please enter some text.');
    }
}

function displayOutput() {
    const outputList = document.getElementById('output');
    outputList.innerHTML = ''; // Clear previous outputs
    inputArray.forEach((item, index) => {
        const listItem = document.createElement('li');
        listItem.textContent = `Item ${index + 1}: ${item}`;
        outputList.appendChild(listItem);
    });
}

解释

HTML部分:
- 创建了一个表单<form>，包含一个输入框<input>和一个按钮<button>。
- 输入框用于捕获用户输入，按钮用于触发添加到数组的操作。
- 使用<ul>元素来显示数组中的内容。

JavaScript部分:
- 定义了一个全局数组inputArray来存储用户输入。
- addToArray函数获取输入框的值，检查是否为空，如果不为空则将其添加到数组中，并调用displayOutput函数更新显示。
- displayOutput函数清空之前的输出，然后遍历数组，为每个元素创建一个新的列表项<li>并添加到<ul>中。