If I have a submit button, like this:
<button type='submit' name='newevent' value='newevent' formmethod='post' formaction='edit_event.php'>Create New Event</button>
does it have to be inside a form?
If I have several submit buttons, each submitting to a different page, does each one have to be within its own form, or can I just have one form for all of them?
Does the formaction property of the button override the action property of the form?
If I do not have to include the submit button in a form, how can I create some more values to be returned by the submit? I.e. if in the action page I want to be able to read the value of $_POST['source'], which may be different for each submit button, how do I set these values in the HTML?
Thanks - Rowan
Full Version: Submit Button
QUOTE
does it have to be inside a form?
If you want it to do something, yes.
QUOTE
If I have several submit buttons, each submitting to a different page, does each one have to be within its own form, or can I just have one form for all of them?
Does the formaction property of the button override the action property of the form?
Does the formaction property of the button override the action property of the form?
Yes, I think that's the point of formaction and formmethod, that they override the corresponding attributes in the form tag and yes, a from can have multiple submit buttons. You can read about the basics with multiple submit buttons here: http://htmlhelp.com/faq/html/forms.html#two-submit . I don't know if everything it says there still is valid when you use formaction and formmethod though.
Formaction and formmethod are new with HTML5. I think you use action and method in the form tag as usual and then the new attributes for each submit button override that. Older browsers won't support this. I haven't read up on this in detail, so reservations for that.
QUOTE(RowanB @ Mar 21 2019, 12:34 PM) 
If I have a submit button, like this:
<button type='submit' name='newevent' value='newevent' formmethod='post' formaction='edit_event.php'>Create New Event</button>
does it have to be inside a form?
It can be outside if you give the FORM element an ID and the submit button a corresponding FORM attribute value:
CODE
<form id="foo">
<input type="text" name="foo" value="bar">
</form>
<input type="submit" form="foo" value="Submit">
<input type="text" name="foo" value="bar">
</form>
<input type="submit" form="foo" value="Submit">
This is not supported by IE11 though (currently used by about 2%, according to https://caniuse.com/usage-table).
Duh. I hadn't noticed that one. But what's the purpose? The only thing I can think of is layout reasons.
It certainly doesn't improve the HTML structure, can't see how helps accessibility either. But the principle seems the same as when using LABEL and FOR attributes that are associated with a form element somewhere else on the page.
But at least label usually is within the form and close to the input.
BTW, the FORM attribute can be used on all Reassociateable form elements, seemingly allowing things like this:
<form id="f"></form>
<input type="text" name="foo" form="f" value="bar">
<input type="submit" form="f" value="Send">
Maybe this helps portability somehow.
CODE
<form id="f"></form>
<input type="text" name="foo" form="f" value="bar">
<input type="submit" form="f" value="Send">
Maybe this helps portability somehow.
Yikes. 
Seems you can also put a submit button inside another form than the one it submits:
CODE
<form id="f1">
<input type="text" name="foo2" form="f2" value="bar2">
<input type="submit" form="f2" value="Submit form 2">
</form>
<form id="f2">
<input type="text" name="foo1" form="f1" value="bar1">
<input type="submit" form="f1" value="Submit form 1">
</form>
<input type="text" name="foo2" form="f2" value="bar2">
<input type="submit" form="f2" value="Submit form 2">
</form>
<form id="f2">
<input type="text" name="foo1" form="f1" value="bar1">
<input type="submit" form="f1" value="Submit form 1">
</form>
Progress is nice, isn't it? 
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.