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

Question

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

我正在使用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>```



   

Also the console give me one warning saying:
"Form submission canceled because the form is not connected"

Answer 1

因为您要动态添加创建侦听器所需的表单

// 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>