mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-03-05 18:02:20 -05:00
9aa4a7267a
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
32 lines
1.2 KiB
HTML
32 lines
1.2 KiB
HTML
{% macro file_upload(field, button_text="Choose file", alternate_link=None, alternate_link_text=None) %}
|
|
<form method="post" enctype="multipart/form-data" class="{% if field.errors %}form-group-error{% endif %}" data-module="file-upload">
|
|
<label class="file-upload-label" for="{{ field.name }}">
|
|
<span class="visually-hidden">{{ field.label.text }}</span>
|
|
{% if hint %}
|
|
<span class="form-hint">
|
|
{{ hint }}
|
|
</span>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</label>
|
|
{{ field(**{
|
|
'class': 'file-upload-field'
|
|
}) }}
|
|
<label class="file-upload-button" for="{{ field.name }}">
|
|
{{ button_text }}
|
|
</label>
|
|
{% if alternate_link and alternate_link_text %}
|
|
<span class="file-upload-alternate-link">
|
|
or <a href="{{ alternate_link }}">{{ alternate_link_text }}</a>
|
|
</span>
|
|
{% endif %}
|
|
<label class="file-upload-filename" for="{{ field.name }}"></label>
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
|
<button type="submit" class="file-upload-submit">Submit</button>
|
|
</form>
|
|
{% endmacro %}
|