如何从"form“中提取两个数字并将它们相加，以便输出结果

要从HTML表单（form）中提取两个数字并将它们相加，可以使用JavaScript来实现。以下是一个完整的示例，展示了如何完成这一任务：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Sum Calculation</title>
</head>
<body>
    <form id="sumForm">
        <label for="number1">Number 1:</label>
        <input type="number" id="number1" name="number1" required><br><br>
        
        <label for="number2">Number 2:</label>
        <input type="number" id="number2" name="number2" required><br><br>
        
        <button type="button" onclick="calculateSum()">Calculate Sum</button>
    </form>
    
    <p id="result"></p>

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

JavaScript部分（script.js）

function calculateSum() {
    // 获取表单中的两个数字
    const number1 = parseFloat(document.getElementById('number1').value);
    const number2 = parseFloat(document.getElementById('number2').value);

    // 检查输入是否为有效数字
    if (isNaN(number1) || isNaN(number2)) {
        document.getElementById('result').innerText = 'Please enter valid numbers.';
        return;
    }

    // 计算两个数字的和
    const sum = number1 + number2;

    // 显示结果
    document.getElementById('result').innerText = `The sum is: ${sum}`;
}