HTML如何设置表单输出？output标签的用法是什么？

<form action="/submit-form" method="post">
  <!-- 表单元素 -->
</form>

<input type="text">

<input type="email">

<textarea>

<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>

<label for="message">留言:</label>
<textarea id="message" name="message"></textarea><br><br>

<button type="submit">提交</button>

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" name="a" value="0"> +
  <input type="number" id="b" name="b" value="0"> =
  <output name="result" for="a b"></output>
</form>

<input>

<form id="myForm">
  <input type="number" id="num1" name="num1" value="0">
  <input type="number" id="num2" name="num2" value="0">
  <output name="sum" id="sumOutput"></output>
  <button type="button" onclick="calculateSum()">计算</button>
</form>

<script>
function calculateSum() {
  const num1 = parseInt(document.getElementById('num1').value);
  const num2 = parseInt(document.getElementById('num2').value);
  const sum = num1 + num2;
  document.getElementById('sumOutput').value = sum;
}
</script>

calculateSum

id

<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" value="1">

<label for="price">单价:</label>
<input type="number" id="price" name="price" value="10">

<output name="total" for="quantity price"></output>

<script>
  const quantityInput = document.getElementById('quantity');
  const priceInput = document.getElementById('price');
  const totalOutput = document.querySelector('output[name="total"]');

  quantityInput.addEventListener('input', updateTotal);
  priceInput.addEventListener('input', updateTotal);

  function updateTotal() {
    const quantity = parseFloat(quantityInput.value);
    const price = parseFloat(priceInput.value);
    const total = quantity * price;
    totalOutput.value = total.toFixed(2); // 保留两位小数
  }

  updateTotal(); // 初始计算
</script>

<?php
// 处理表单数据...

header("Location: success.html"); // 跳转到success.html
exit();
?>

onsubmit

window.location.href

<form action="/submit-form" method="post" onsubmit="handleSubmit(event)">
  <!-- 表单元素 -->
  <button type="submit">提交</button>
</form>

<script>
function handleSubmit(event) {
  event.preventDefault(); // 阻止默认的表单提交
  // 处理表单数据（例如，使用fetch或XMLHttpRequest）
  fetch('/submit-form', {
    method: 'POST',
    body: new FormData(event.target)
  })
  .then(response => {
    if (response.ok) {
      window.location.href = 'success.html'; // 跳转到success.html
    } else {
      // 处理错误
      console.error('提交失败');
    }
  });
}
</script>

<form id="myForm" action="/submit-form" method="post" onsubmit="disableSubmitButton()">
  <!-- 表单元素 -->
  <button type="submit" id="submitButton">提交</button>
</form>

<script>
function disableSubmitButton() {
  const submitButton = document.getElementById('submitButton');
  submitButton.disabled = true;
  submitButton.value = '提交中...'; // 可选：更改按钮文本
}
</script>

<form action="/submit-form" method="post">
  <input type="hidden" name="token" value="<?php echo $_SESSION['token']; ?>">
  <!-- 表单元素 -->
  <button type="submit">提交</button>
</form>

session_start();

if (!isset($_SESSION['token'])) {
  $_SESSION['token'] = bin2hex(random_bytes(32)); // 生成Token
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (!isset($_POST['token']) || $_POST['token'] !== $_SESSION['token']) {
    die('非法提交'); // Token验证失败
  }

  // 处理表单数据...

  unset($_SESSION['token']); // 销毁Token
  header("Location: success.html");
  exit();
}