mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 07:08:01 +00:00
Add Submit A Form With A Button Outside The Form as an html til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||
|
||||
_738 TILs and counting..._
|
||||
_739 TILs and counting..._
|
||||
|
||||
---
|
||||
|
||||
@@ -24,6 +24,7 @@ _738 TILs and counting..._
|
||||
* [Elixir](#elixir)
|
||||
* [Git](#git)
|
||||
* [Go](#go)
|
||||
* [HTML](#html)
|
||||
* [Internet](#internet)
|
||||
* [JavaScript](#javascript)
|
||||
* [Linux](#linux)
|
||||
@@ -226,6 +227,10 @@ _738 TILs and counting..._
|
||||
- [Sleep For A Duration](go/sleep-for-a-duration.md)
|
||||
- [Upgrading From An Older Version On Mac](go/upgrading-from-an-older-version-on-mac.md)
|
||||
|
||||
### HTML
|
||||
|
||||
- [Submit A Form With A Button Outside The Form](html/submit-a-form-with-a-button-outside-the-form.md)
|
||||
|
||||
### Internet
|
||||
|
||||
- [Add Emoji To GitHub Repository Description](internet/add-emoji-to-github-repository-description.md)
|
||||
|
||||
25
html/submit-a-form-with-a-button-outside-the-form.md
Normal file
25
html/submit-a-form-with-a-button-outside-the-form.md
Normal file
@@ -0,0 +1,25 @@
|
||||
# Submit A Form With A Button Outside The Form
|
||||
|
||||
You can tie a submit button to a form that the button doesn't live inside
|
||||
of. The trick is to give the form an `id` and then reference that `id` with
|
||||
the button's `form` property.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<form id="my-form">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" name="name"></input>
|
||||
</form>
|
||||
|
||||
<!-- ... -->
|
||||
|
||||
<button type="submit" form="my-form">Submit</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
With this setup, clicking the _Submit_ button will cause the form to be
|
||||
submitted.
|
||||
|
||||
See the [MDN Button
|
||||
docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) for
|
||||
more details.
|
||||
Reference in New Issue
Block a user