button without the form is semantic?

StackOverflow https://stackoverflow.com/questions/21564176

  •  07-10-2022
  •  | 
  •  

Question

In html5 can I use <button> outside the <form>, like this:

<body>
    <form action="page.html" method="get" id="myForm">
    ...
    </form>
    <button type="submit" form="myForm" value="Submit">Send</button>
</body>

But I do not want to use the form, only the <button>, because my project is all done with Javascript/Ajax

I wanted to make a "noscript-friendly" design, but it is a closed intranet and for a company project and do not have much time for this.

Use <button> without <form> is semantic?

<body>
    <div>
        <button type="button">test</button>
    </div>
</body>

Or would be better to continue to use <a href="javascript:void(0)">?

Note: Remember not all valid code by W3 is a semantic code

Was it helpful?

Solution

Your use of the button element is appropriate.

That’s why there is the Button state in the first place. The HTML5 spec also shows an example, very similar to your use case:

The following button is labeled "Show hint" and pops up a dialog box when activated:

<button type=button
    onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
 Show hint
</button>

Note: Your question has nothing to do with the Semantic Web. There is a difference between "semantic (markup)" and "Semantic Web".

Your use of the button element is "semantic" in the sense that you are using it correctly according to the HTML5 specification, and that there is no other element defined which would be more appropriate.

You might want to use the a element in cases where you are navigating to another resource (no matter how it’s implemented technically). For apps, the difference is sometimes not very clear. A rule of thumb: if the URL changes (could users want to bookmark/share it?) and/or you could use a link type (even only theoretically), it’s likely that you should use a instead of button. But as this is a different question, please take it just as a side note.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top