trying to understand forms

This element includes the global attributes.

accept Deprecated
Comma-separated content types the server accepts.

Note: This attribute has been deprecated and should not be used. Instead, use the accept attribute on <input type=file> elements.

accept-charset
The character encoding accepted by the server. The specification allows a single case-insensitive value of "UTF-8", reflecting the ubiquity of this encoding (historically multiple character encodings could be specified as a comma-separated or space-separated list).

autocapitalize
Controls whether inputted text is automatically capitalized and, if so, in what manner. See the autocapitalize global attribute page for more information.

autocomplete
Indicates whether input elements can by default have their values automatically completed by the browser. autocomplete attributes on form elements override it on <form>. Possible values:

off: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see Managing autofill for login fields.)
on: The browser may automatically complete entries.
name
The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.

rel
Controls the annotations and what kinds of links the form creates. Annotations include external, nofollow, opener, noopener, and noreferrer. Link types include help, prev, next, search, and license. The rel value is a space-separated list of these enumerated values.

This element includes the global attributes.

accept Deprecated
Comma-separated content types the server accepts.

Note: This attribute has been deprecated and should not be used. Instead, use the accept attribute on <input type=file> elements.

accept-charset
The character encoding accepted by the server. The specification allows a single case-insensitive value of "UTF-8", reflecting the ubiquity of this encoding (historically multiple character encodings could be specified as a comma-separated or space-separated list).

autocapitalize
Controls whether inputted text is automatically capitalized and, if so, in what manner. See the autocapitalize global attribute page for more information.

autocomplete
Indicates whether input elements can by default have their values automatically completed by the browser. autocomplete attributes on form elements override it on <form>. Possible values:

off: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see Managing autofill for login fields.)
on: The browser may automatically complete entries.
name
The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.

rel
Controls the annotations and what kinds of links the form creates. Annotations include external, nofollow, opener, noopener, and noreferrer. Link types include help, prev, next, search, and license. The rel value is a space-separated list of these enumerated values.

<form id="box-add" method="get">
     <input maxlength="50" id="task-input" type="text" placeholder="Add your task">
     <button id="add-btn">ADD</button>
    </form>

<form id="box-add" method="get">
     <input maxlength="50" id="task-input" type="text" placeholder="Add your task">
     <button id="add-btn">ADD</button>
    </form>

<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

addBtn.addEventListener("click", () => {
 let taskListItem = document.querySelector(".task-list-item")
 let clone = taskListItem.cloneNode(true)
 clone.style.display = "flex"

 let checkBoxElement = clone.querySelector("input")
 let pElement = clone.querySelector("p")
 let removeBtn = clone.querySelector(".remove-btn")
 let taskName = taskInput.value


 removeBtn.addEventListener("click", () => {
  taskListContainer.removeChild(clone)
 })
 checkBoxElement.addEventListener("click", () => {
  if (checkBoxElement.checked === true) {
   pElement.style.textDecoration = "line-through"
  }
  else(
   pElement.style.textDecoration = "none"
  )
 })

 pElement.textContent = taskName
 taskListContainer.appendChild(clone)
 taskInput.value = ""
})

addBtn.addEventListener("click", () => {
 let taskListItem = document.querySelector(".task-list-item")
 let clone = taskListItem.cloneNode(true)
 clone.style.display = "flex"

 let checkBoxElement = clone.querySelector("input")
 let pElement = clone.querySelector("p")
 let removeBtn = clone.querySelector(".remove-btn")
 let taskName = taskInput.value


 removeBtn.addEventListener("click", () => {
  taskListContainer.removeChild(clone)
 })
 checkBoxElement.addEventListener("click", () => {
  if (checkBoxElement.checked === true) {
   pElement.style.textDecoration = "line-through"
  }
  else(
   pElement.style.textDecoration = "none"
  )
 })

 pElement.textContent = taskName
 taskListContainer.appendChild(clone)
 taskInput.value = ""
})