The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Submit Button
RowanB
post Mar 21 2019, 06:34 AM
Post #1





Group: Members
Posts: 3
Joined: 29-September 09
Member No.: 9,893



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 21 2019, 07:54 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 21 2019, 01:46 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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">

This is not supported by IE11 though (currently used by about 2%, according to https://caniuse.com/usage-table).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 21 2019, 06:47 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Duh. I hadn't noticed that one. But what's the purpose? The only thing I can think of is layout reasons.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 22 2019, 05:57 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 22 2019, 07:45 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



But at least label usually is within the form and close to the input.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 22 2019, 01:26 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



BTW, the FORM attribute can be used on all Reassociateable form elements, seemingly allowing things like this:

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. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 22 2019, 06:29 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yikes. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 22 2019, 06:59 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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>

laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 22 2019, 08:59 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Progress is nice, isn't it? wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:14 AM