Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use <button> not <input>s for form submission #593

Merged
merged 1 commit into from
May 8, 2018

Conversation

quis
Copy link
Member

@quis quis commented Feb 1, 2018

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 hack1 used to ensure the top edge of the button is clickable doesn’t work.

Fixes #545

  1. alphagov/govuk_frontend_toolkit@24e1906#diff-ef0e4eb6f1e90b44b0c3fe39dce274a4R79

NickColley added a commit to alphagov/govuk-frontend that referenced this pull request May 8, 2018
Only allow `input` to be used when explicitly asking to use it.

See alphagov/govuk_elements#593
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
@quis quis force-pushed the input-not-button branch from 7857543 to 06a7e7e Compare May 8, 2018 16:24
@quis quis merged commit 62d68f1 into alphagov:master May 8, 2018
@quis quis deleted the input-not-button branch May 8, 2018 16:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants