HTMLdialog标签使用教程

<dialog id="formDialog">
  <form method="dialog">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br><br>
    <button value="cancel">取消</button>
    <button type="submit" value="confirm">提交</button>
  </form>
</dialog>

<button id="openFormBtn">打开表单对话框</button>

<script>
  const formDialog = document.getElementById('formDialog');
  const openFormBtn = document.getElementById('openFormBtn');

  openFormBtn.addEventListener('click', () => {
    formDialog.showModal();
  });

  formDialog.addEventListener('close', () => {
    if (formDialog.returnValue === 'confirm') {
      const name = document.getElementById('name').value;
      console.log('姓名：', name);
    }
  });
</script>

在这个例子中，我们创建了一个包含姓名输入框的表单。当用户点击“提交”按钮时，formDialog.returnValue会被设置为"confirm"，我们可以在close事件处理函数中获取输入框的值并进行处理。注意，表单的method属性设置为"dialog"，这表示表单数据不会通过HTTP请求发送到服务器，而是通过close事件返回。

dialog在实际项目中的应用场景有哪些？