DokumentationAEM 6.4Forms-Anleitung

Ändern von Standardstilen von HTML5-Formularen changing-default-styles-of-html-forms

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • User
CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

HTML5-Formulare werden mithilfe von HTML5-Funktionen gerendert. Der Stil des gerenderten Formulars wird mit CSS festgelegt. Das Standarderscheinungsbild von HTML5-Formularen ist der PDF-Darstellung ähnlich. Entwickler können benutzerdefinierte CSS verwenden, um das standardmäßige Erscheinungsbild von HTML5-Formularen zu ändern.

Dieser Artikel enthält Schritt-für-Schritt-Anleitungen, um den Stil eines HTML5-Formulars zu ändern, und der Artikel Einführung in Stile enthält detaillierte Informationen zu den verschiedenen Gestaltungsaspekten von HTML5-Formularen. Stellen Sie sicher, dass Sie den Artikel „Einführung in Stile“ gelesen haben, bevor Sie die in diesem Artikel aufgeführten Schritte ausführen.

Die folgenden beiden Bilder zeigen den Unterschied zwischen Standard- und benutzerdefiniertem Stil.

images-002-small

Gestalten Sie Ihre Formulare style-your-forms

  1. Wählen Sie ein Profil aus, um benutzerdefinierte Stile hinzuzufügen

    Rufen Sie die CRX DE-Schnittstelle unter der URL https://<Server>:<Port>/crx/de auf und erstellen Sie ein Profil oder wählen Sie ein vorhandenes Profil. Wie Sie ein Profil erstellen, erfahren Sie hier: Erstellen eines neuen Profils.

  2. Erstellen Sie ein CSS-Stylesheet für die Formatierung der HTML5-Formulare

    Navigieren Sie zu dem Ordner, in dem Sie den Profil-Renderer erstellt haben, und erstellen Sie eine CSS-Stylesheet-Datei. Die folgenden Schritte sind erforderlich:

    1. Klicken Sie mit der rechten Maustaste auf den Ordner und wählen Sie erstellen -> Datei erstellen aus dem Menü

    Informationen darüber, welche CSS-Klassen für eine bestimmte Komponente in Ihren HTML5-Formularen erstellt werden sollen, finden Sie unter Einführung in Stile.

  3. Einschließen des Stylesheets in den Profil-Renderer

    Öffnen Sie die Profil-Renderer-Seite (JSP-Datei) in CRX DE und fügen Sie die CSS-Datei in die Seite direkt unter der XFA-Client-Bibliothek ein. Führen Sie diese Schritte aus, um die CSS-Datei in das Profil einzuschließen.

    1. Suchen Sie auf der Renderer-Seite nach der folgenden Zeile:

      <cq:includeClientLib categories="xfaforms.profile" />

    2. Fügen Sie Folgendes unter der darüberstehenden Zeile ein, um das Stylesheet einzuschließen:

      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>

    3. Speichern Sie die Datei.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da