Ändern von Standardstilen von HTML5-Formularen

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 Standarderscheinungsbild 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

  1. Wählen Sie ein Profil, um benutzerdefinierte Stile hinzufü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 zum Gestalten der HTML5-Formulare

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

    1. Klicken Sie mit der rechten Maustaste auf den Ordner und wählen Sie Erstellen-> Datei erstellen aus dem Menü.
      Welche CSS-Klassen für eine bestimmte Komponente in Ihrem HTML5-Formular zu erstellen sind, erfahren Sie unter Einführung zu Stilen.

  3. Schließen Sie das Stylesheet im Profil-Renderer ein.

    Öffnen Sie die Profil-Renderer-Seite (JSP-Datei) in CRX DE und schließen Sie die CSS-Datei auf der Seite direkt unter der XFA-Clientbibliothek ein. Führen Sie diese Schritte durch, um die css-Datei im 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.

Auf dieser Seite