Files
notifications-admin/app/templates/components/page-footer.html
Chris Hill-Scott 9aa4a7267a Use <button> not <input>s for form submission
Both `<button type='submit'>Submit<button>` and
`<input type='submit' value='Submit'>` can be used to submit a form.

We have historically[1] used `<input>` 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[2] used to ensure the top edge of the button is clickable doesn’t
  work. We’re seeing this bug[3] affect real users in research.

1. We inhereted our buttons from Digital Marketplace, here is me making
   that change in their code:  8df7e2e79e (diff-b1420f7b7a25657d849edf90a70ef541)
2. 24e1906c0d (diff-ef0e4eb6f1e90b44b0c3fe39dce274a4R79)

3. https://github.com/alphagov/govuk_elements/issues/545
2018-02-01 13:53:45 +00:00

29 lines
1.0 KiB
HTML

{% macro page_footer(
button_text=None,
destructive=False,
back_link=False,
back_link_text="Back",
secondary_link=False,
secondary_link_text=None,
delete_link=False,
delete_link_text="delete"
) %}
<div class="page-footer">
{% if button_text %}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<button type="submit" class="button{% if destructive %}-destructive{% endif %}">{{ button_text }}</button>
{% endif %}
{% if back_link %}
<a class="page-footer-back-link" href="{{ back_link }}">{{ back_link_text }}</a>
{% endif %}
{% if delete_link %}
<span class="page-footer-delete-link {% if not button_text %}page-footer-delete-link-without-button{% endif %}">
<a href="{{ delete_link }}">{{ delete_link_text }}</a>
</span>
{% endif %}
{% if secondary_link and secondary_link_text %}
<a class="page-footer-secondary-link" href="{{ secondary_link }}">{{ secondary_link_text }}</a>
{% endif %}
</div>
{% endmacro %}