Skip to main content
Ben Nadel at InVision In Real Life (IRL) 2018 (Hollywood, CA) with: Eric Betts
Ben Nadel at InVision In Real Life (IRL) 2018 (Hollywood, CA) with: Eric Betts ( @AGuyNamedBettse )

Associating Submit Buttons With Any Form Using Button Attributes In Native HTML

By
Published in , Comments (5)

In the vast majority of cases, submit buttons are a descendant element, contained with the form on which they act. Sometimes, however - due to things like page layout constraints - an "external" button needs to trigger a non-parent form submission. Historically, I would have reached for JavaScript to get this done. But, I just learned that any button can natively target any form on the page by using the form attribute and a matching id value.

This isn't the first time that the button has thrilled and delighted me: a few months ago, I discovered that a button could override a variety of form submission properties using native attributes. In fact, the use of the form attribute was right there in the Mozilla docs - it just didn't register in my brain.

The idea here is simple. A submit button can submit any form by using a form attribute that points to the target form's id value. In the following snippet, we're using id="myForm" to bind the external button to the right form.

<form id="myForm">
	...
</form>
<button type="submit" form="myForm">
	Submit Form
</button>

Let's see this in action. In the following ColdFusion demo, I have a form that accepts a name property. By default, the form will "greet" the user with a message. However, externally to the form, I have two other submit buttons that target the form (via the form attribute) and supply alternative actions for Insult and Flattery:

<cfscript>

	param name="form.name" type="string" default="Tricia";
	param name="form.action" type="string" default="";

</cfscript>
<cfoutput>

	<!-- BEGIN: Form. -->
	<form id="myForm" method="post" action="#cgi.script_name#">
		<input
			type="text"
			name="name"
			value="#encodeForHtmlAttribute( form.name )#"
		/>
		<button type="submit" name="action" value="greet">
			Greet
		</button>
	</form>
	<!-- END: Form. -->

	<hr />

	<p>
		These buttons are <strong>outside the form</strong> container. However, they are
		using the <code>form</code> attribute to associate with an existing form on the
		page.
	</p>
	<p>
		<button type="submit" form="myForm" name="action" value="insult">
			Insult
		</button>
		<button type="submit" form="myForm" name="action" value="flatter">
			Flatter
		</button>
	</p>

	<!--- Output message if we have all the submitted form data. --->
	<cfif ( form.name.len() && form.action.len() )>
		<hr />
		<p>
			<strong>[action: #encodeForHtml( form.action )#]</strong>
			<cfswitch expression="#form.action#">
				<cfcase value="greet">
					Good morning, #encodeForHtml( form.name )#, I hope all is well.
				</cfcase>
				<cfcase value="insult">
					Hey #encodeForHtml( form.name )#, you are a poo-face!
				</cfcase>
				<cfcase value="flatter">
					Wow #encodeForHtml( form.name )#, you look amazing!
				</cfcase>
			</cfswitch>
		</p>
	</cfif>

</cfoutput>

In this particular case, there's no actual need for the Insult and Flattery buttons to be outside of the <form> tag - it's only for the sake of the demo. And, when we run this ColdFusion application and submit the form using the various submit buttons, we get the following output:

A form being submitted with three buttons, 1 inside the form element and 2 external to the form element.

As you can see, each of the submit buttons is able to submit the form despite the fact that two of the buttons don't even live inside of the form container! This is great. I love the fact that native HTML can do so much of the heavy lifting for me.

Want to use code from this post? Check out the license.

Reader Comments

220 Comments

@Ben

Back to the basics! It always surprises me how after 30 years, I can still learn something fundamental like this. I've definitely restructured code in the past so that my submit button would be within the form tags, even though that's NOT where I really wanted it.

15,748 Comments

@Chris,

💯 I've done the form-structure dance, to be sure! I'm definitely going to make use of this, even in a context where I already have a JavaScript framework. Because, even when I have a JS workflow, I'm still keen to lean on the native HTML more (when possible).

Post A Comment — I'd Love To Hear From You!

Post a Comment

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel