HTML semantics: form without input fields for deleting an item

220 Views Asked by At

How to semantically structure HTML to delete an item?

I know that HTML's <form method="..."> only permits "POST" and "GET". But that doesn't matter to me, since all forms are submitted via AJAX. ( Btw. I found some old draft that requests "PUT" and "DELETE" in forms: http://amundsen.com/examples/put-delete-forms/ ). This question is just about the HTML semantics.

In some rare cases there are forms that use an input field, in order to let the user confirm his delete action (like GitHubs "Delete this Repository").

But what about having a form that contains no inputs at all, but only a single submit button?

Bonus question: Would it make any difference if it's a real delete vs. a soft delete (a.k.a. "move to trash")?

1

There are 1 best solutions below

0
On BEST ANSWER

If you're unable to use HTML <form> methods and must rely on javascript to send information to the server, in this specific case, a <button> element by itself (without a wrapping form element) is most appropriate. Buttons don't have to be wrapped in forms to be used to trigger actions.

The HTML <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.

Mozilla HTML Elements Reference: Button Element

A standalone button should be used regardless of if the button action is a "soft" or "hard" delete, but you should use text or another method to make sure users understand which action is being performed.

<button class="soft-delete" type="button" data-item="1234">Move to Trash</button>
<button class="hard-delete" type="button" data-item="1234">Delete Forever</button>