Ä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-Informationen zum Ändern des Stils eines HTML5-Formulars und Einführung in Stile Der Artikel enthält detaillierte Informationen zu verschiedenen Stilaspekten von HTML5-Formularen. Stellen Sie sicher, dass Sie den Artikel Einführung zu Stilen gelesen haben, bevor Sie die in diesem Artikel erwähnten 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

    Greifen Sie auf die CRX DE-Schnittstelle unter der URL zu: https://<server>:<port>/crx/de und erstellen Sie ein Profil oder wählen Sie ein vorhandenes Profil aus. Informationen zum Erstellen eines Profils finden Sie unter 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