Are form elements outside of a FORM tag semantic html5?
FormsHtmlForms Problem Overview
If I have a SELECT tag that will filter a table based on a user choice, does the SELECT tag need to be in a FORM tag (to be valid HTML5), if the resulting functionality will not work if JS disabled (i.e. we'll show the entire table or a 'more' link instead of doing a server-side filter on select of the form action/submit option (We may write the select in JS so it disappears from the markup if JS disabled.
Or do all form elements need to be in a form tag regardless of usage (and therefore a null 'action' attribute value).
I know HTML5 allows almost anything, I just couldn't find a definitive answer on W3, so thought I'd get your thoughts. Hope that makes sense. Cheers.
Forms Solutions
Solution 1 - Forms
All the form controls can be used anywhere where phrasing content is expected, which means they can appear just about anywhere in the body of the document. If you don't need to have them submitted back to a server then there's no need for them to be associated with a form, however I've noticed that in some browsers you can't take advantage of the form validation features unless the elements can potentially be submitted.
One feature new to HTML5 is that form controls no longer need to be the direct child of a form element in order to be submitted with that form, the form attribute allows you to specify the id of the form the element should be submitted with.
Solution 2 - Forms
It would appear that in HTML5 form elements can be outside of a <form> tag and still be valid;
<!DOCTYPE html>
<html>
<head>
<title>Just making this valid</title>
</head>
<body>
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</body>
</html>
The above code validates successfully (minus the obvious character encoding errors). I haven't read the entire HTML5 Spec, however the validator is usually correct on these sorts of matters.
Solution 3 - Forms
The HTML5 spec specifically allows <input>s (and other form-associated elements) not to have a <form>:
> A form-associated element can have a relationship with a <form> element, which is called the element’s form owner. If a form-associated element is not associated with a <form> element, its form owner is said to be null.
So feel free to use them wherever your heart desires!