为什么必需的属性在表单上不起作用？-解网

问：

我正在创建此表单，但是当我单击“创建任务”按钮时，所需的属性被忽略了。

我正在使用 innerHTML 创建表单，并且：

<form id="task-form">
  <label for="task-title">Title:</label>
  <input type="text" id="task-title" name="task-title" required>
  <label for="task-date">Due date:</label>
  <input type="date" id="task-date" name="task-date" required>
  <label for="task-description">Description:</label>
  <textarea name="task-description" id="task-description" required></textarea>
  <label for="checkbox">Add to a project?</label>
  <input type="checkbox" name="checkbox" id="checkbox">
  <label for="task-priority">Priority:</label>
  <select name="task-priority" id="task-priority" required>
    <option value="Low">Low</option>
    <option value="Medium">Medium</option>
    <option value="High">High</option>
  </select>
  <button type="submit" id="create-task-btn">Create Task</button>
</form>

控制台还给我一个警告说： “表单提交已取消，因为表单未连接”

需要 JavaScript HTML 表单输入

// Create the form element and set its properties
const form = document.createElement('form');
form.id = 'task-form';

// Create and append the form's content
form.innerHTML = `
    <label for="task-title">Title:</label>
    <input type="text" id="task-title" name="task-title" required>
    <label for="task-date">Due date:</label>
    <input type="date" id="task-date" name="task-date" required>
    <label for="task-description">Description:</label>
    <textarea name="task-description" id="task-description" required></textarea>
    <label for="checkbox">Add to a project?</label>
    <input type="checkbox" name="checkbox" id="checkbox">
    <label for="task-priority">Priority:</label>
    <select name="task-priority" id="task-priority" required>
        <option value="Low">Low</option>
        <option value="Medium">Medium</option>
        <option value="High">High</option>
    </select>
    <button type="submit" id="create-task-btn">Create Task</button>
`;

// Append the form to the document
const formContainer = document.getElementById('form-container');
formContainer.appendChild(form);

// Add an event listener for form submission
form.addEventListener('submit', function (event) {
    event.preventDefault(); // Prevent the default form submission behavior
    // Your form submission logic here
});

<div id="form-container"></div>

为什么必需的属性在表单上不起作用？

Why the required attribute doesn't work on form?

评论

评论