Skip to content

Commit

Permalink
Use <button> not <input>s for form submission
Browse files Browse the repository at this point in the history
Both `<button type='submit'>Submit<button>` and
`<input type='submit' value='Submit'>` can be used to submit a form.

Historically `<input>` has been preferred because it’s better-supported
by IE6 in that:
- the `submit` attribute is mandatory on `<button>`, not on `<input>`
- the `innerHTML` of a button will be submitted to the server, not the
  value (as in other browsers)

Reasons to now use `<button>` instead:
- IE6/7 support is no longer a concern (especially with deprecation of
  TLS 1.0 on the way)
- Because an `<input>` element can’t have children, the pseudo-element
  hack[1] used to ensure the top edge of the button is clickable doesn’t
  work.

Fixes alphagov#545

1. alphagov/govuk_frontend_toolkit@24e1906#diff-ef0e4eb6f1e90b44b0c3fe39dce274a4R79
  • Loading branch information
quis committed Feb 1, 2018
1 parent 5b6dc24 commit 7857543
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion app/views/snippets/buttons_button.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<input class="button" type="submit" value="Save and continue">
<button class="button" type="submit">Save and continue</button>
2 changes: 1 addition & 1 deletion app/views/snippets/buttons_button_disabled.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<input class="button" type="submit" value="Save and continue" disabled="disabled" aria-disabled="true">
<button class="button" type="submit" disabled="disabled" aria-disabled="true">Save and continue</button>

0 comments on commit 7857543

Please sign in to comment.