Files
notifications-admin/app/templates/views/notifications/check.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

64 lines
2.3 KiB
HTML

{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/message-count-label.html" import message_count_label %}
{% block service_page_title %}
{{ "Error" if error else "Preview of {}".format(template.name) }}
{% endblock %}
{% block maincolumn_content %}
{% if error == 'not-allowed-to-send-to' %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
{% with
count_of_recipients=1,
template_type_label=(
'phone number' if template.template_type == 'sms' else 'email address'
)
%}
{% include "partials/check/not-allowed-to-send-to.html" %}
{% endwith %}
{% endcall %}
</div>
{% elif error == 'too-many-messages' %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
{% include "partials/check/too-many-messages.html" %}
{% endcall %}
</div>
{% elif error == 'message-too-long' %}
{# the only row_errors we can get when sending one off messages is that the message is too long #}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
{% include "partials/check/message-too-long.html" %}
{% endcall %}
</div>
{% else %}
<h1 class="heading-large">
Preview of {{ template.name }}
</h1>
{% endif %}
{{ template|string }}
<div class="bottom-gutter-3-2">
<form method="post" enctype="multipart/form-data" action="{{url_for(
'main.send_notification',
service_id=current_service.id,
template_id=template.id,
help='3' if help else 0
)}}" class='page-footer'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
{% if not error %}
{% if template.template_type != 'letter' or not request.args.from_test %}
<button type="submit" class="button">Send 1 {{ message_count_label(1, template.template_type, suffix='') }}</button>
{% else %}
<a href="{{ url_for('main.check_messages_preview', service_id=current_service.id, template_type=template.template_type, upload_id=upload_id, filetype='pdf') }}" download class="button">Download as a printable PDF</a>
{% endif %}
{% endif %}
<a href="{{ back_link }}" class="page-footer-back-link">Back</a>
</form>
</div>
{% endblock %}