# How to render a form with an external submit button

There should be at least two ways for any user to submit a form. Pointer users should be able to press a submit button, and keyboard users should be able to press the `enter` key. Both of these UX behaviors are provided natively by the browser, given a `button` with `type="submit"` (or an `input` with `type="submit"`) is rendered somewhere inside a `form` tag.

```xml
<form>
  <input name="name" />
  <input name="surname" />

  <button type="submit">
    Submit the form
  </button>
</form>
```

Unfortunately, it's not always possible to render the submit button inside the `form` element. This is especially true if you don't have complete control over the DOM structure, like when using a component library. So you may end up with something like:

```xml
<form>
  <input name="name" />
  <input name="surname" />
</form>

...

<button type="submit">
  Submit the form
</button>
```

And then quickly see that neither clicking the submit button nor pressing the `enter` key submit the form.

## [form attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-form)

No worries! While submit buttons automatically associate with an ancestor `form`, it's possible to explicitly link a submit button with another form using the [`form` attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-form) There are just two requirements:

1. a unique `id` must be assigned to the `form` element
    
2. a `form` attribute must be added to the `button` with the value of the form's `id`.
    

```xml
<form id="nameForm">
  <input name="name" />
  <input name="surname" />
</form>

...

<button type="submit" form="nameForm">
  Submit the form
</button>
```

But wait!

The form will now submit when pressing the submit button, but pressing the `enter` key still won't work. This is because the browser still requires a submit button or input to be rendered somewhere inside the `form` for it to automatically handle form submission when the user presses the `enter` key. The easiest way to fix this is to render another submit button inside the form and then hide it visually with CSS.

```xml
<form id="nameForm">
  <input name="name" />
  <input name="surname" />
  <button type="submit" style="display: none;" />
</form>

...

<button type="submit" form="nameForm">
  Submit the form
</button>
```

Now the form is accessible and you should be able to render that real submit button wherever you need to.