如何从two的文本“input=”和文本区域中获取数据，然后在<li>中显示它们

表单验证: 用户输入数据后，立即显示验证结果。
实时聊天应用: 用户输入消息后，立即在聊天窗口中显示。
数据录入系统: 用户输入数据后，立即在列表中显示以便确认。

要从文本“input=”和文本区域中获取数据并在<li>中显示它们，你可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Display</title>
</head>
<body>
    <form id="dataForm">
        <label for="inputField">Input:</label>
        <input type="text" id="inputField" name="inputField">
        <br><br>
        <label for="textareaField">Text Area:</label>
        <textarea id="textareaField" name="textareaField"></textarea>
        <br><br>
        <button type="button" onclick="displayData()">Display Data</button>
    </form>
    <ul id="dataList">
        <!-- Data will be displayed here -->
    </ul>

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

JavaScript部分（script.js）

function displayData() {
    // Get the values from the input field and text area
    const inputField = document.getElementById('inputField').value;
    const textareaField = document.getElementById('textareaField').value;

    // Create a new list item
    const listItem = document.createElement('li');
    listItem.textContent = `${inputField}: ${textareaField}`;

    // Append the list item to the unordered list
    const dataList = document.getElementById('dataList');
    dataList.appendChild(listItem);
}