Kontaktformular mit Dateianhang

Für die bei Kontaktformularen häufig eingesetzten Datei-Uploads müssen spezielle HTML-Elemente und CSS-Klassen eingesetzt werden, um eine einheitliche, browserübergreifende Darstellung zu erreichen. Das eigentliche file-Input wird hierbei mit der CSS-Klasse sr-only nur für Screenreader sichtbar gemacht und um ein direkt darauf folgendes Label ergänzt. Der Name der ausgewählten Datei wird schließlich in einem nicht bearbeitbaren Input mittels JavaScript angezeigt. Details zur Strukturierung und den zu verwendenden CSS-Klassen sind dem folgenden HTML zu entnehmen.

<form data-component="form-121456465">
    <div class="form-group">
        <label for="email">E-Mail</label>
        <input type="email" class="form-control" id="email" placeholder="max.mustermann@example.com">
    </div>
    <div class="form-group">
        <label for="message">Nachricht</label>
        <textarea class="form-control" name="message" id="message" rows="6" placeholder="Was würden Sie uns gerne mitteilen?" required></textarea>
    </div>
    <div class="form-group">
        <label for="file">Datei</label>
        <div class="input-group">
            <span class="input-group-btn">
                <input id="file" name="file" type="file" class="sr-only" aria-describedby="file_help" />
                <label class="btn btn-default" for="file">
                    Durchsuchen&hellip;
                </label>
            </span>
            <input type="text" class="form-control" readonly tabIndex="-1">
        </div>
        <small id="file_help" class="form-text text-muted">Hilfetext für erlaubte Dateiformate. Er kann ruhig etwas länger sein, um keine Fragen offen zu lassen.</small>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"><span>Ja, ich akzeptiere die <a href="#" target="_blank">Bedingungen</a></span>.
        </label>
    </div>
    <div class="form-group clearfix">
        <button type="submit" class="btn btn-default pull-right">Absenden</button>
    </div>
</form>