CSS-stijlen maken voor HTML5-formulieren
- Onderwerpen:
- Mobile Forms
Gemaakt voor:
- User
CAUTIONHTML5-uitvoering van een op XFA gebaseerde formuliersjabloon bestaat uit verschillende HTML-elementen. Deze elementen worden in een volgorde gerangschikt. Elk element heeft duidelijk gedefinieerde CSS-klassen. U kunt deze CSS-klasse gebruiken om de weergave van een element te selecteren en te wijzigen.
NOTECSS-klassen voor elementen
Elk element bevat duidelijk gedefinieerde CSS-klassen. U kunt deze klassen wijzigen om de weergave van een element te wijzigen. Elk element, behalve het veld en draw-elementen, heeft twee CSS-klassen: de klasse Type en de klasse Name.
-
De Type-klasse geeft het type van het XFA-veld aan. U kunt de
typeklasse om de stijlen van alle elementen van een bepaald type te wijzigen. -
De Name, klasse komt overeen met de naam van het XFA-veld. U kunt de
nameklasse om aangepaste stijl te wijzigen en toe te passen op een element.
NOTEVoor de pagina's die niet in de Ontwerper van AEM Forms worden genoemd, worden de pagina's in een vorm HTML5 in de stijgende orde van hun aantal genoemd. Voor een HTML5-formulier met twee pagina's krijgen de pagina's bijvoorbeeld de naam Pagina1, Pagina2.
Veldelement
Het veldelement bevat twee geneste elementen: widget en bijschrift.
Widget-element
Het widgetelement bevat het interface-element voor interactie met gebruikers. De klasse heeft drie CSS-klassen:
- Widget: Elke widget heeft deze klasse.
- name: Alle widgets die bij AEM worden geleverd, bevatten de widgetnaamklasse. Voor aangepaste widgets biedt de widgetontwikkelaar de widgetnaamklasse.
- type: Elke widget heeft een interface-element. Deze klasse definieert het type van het interface-element.
<!--field with caption-->
<div class="field numericfield NumericField3 ">
<div class="caption">
caption content
</div>
<div class="widget numericfieldwidget numericInput">
widget content
</div>
</div>
<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
widget content
</div>
Naast de klasse type en name bevat de veldcomponent ook een extra CSS-klasse met de naam subtype. Een subtype geeft aan welk type veld het is, bijvoorbeeld NumericField, DateField, TextField. U kunt de subtypeklasse overschrijven om de opmaak van alle velden met tekst en subtype te wijzigen.
CSS-klassen voor verschillende componenten
of
Pagina<pagenumber> (standaard)
CSS-klassen voor verschillende velden
AEM Forms Designer ondersteunt verschillende typen velden in een formulier, zoals NumeriekVeld, DecimaalVeld en Datumveld. Al deze velden in HTML bevatten de bovengenoemde CSS-klassen. Ze bevatten ook enkele extra klassen, afhankelijk van het type veld.
Aan elk veld is een widget gekoppeld die het interface-element vertegenwoordigt. De klassen van elk veld en de widgets die aan elk veld zijn gekoppeld, worden hieronder weergegeven.
CSS-klassen voor verschillende Draw Elements
Met AEM Forms Designer kunt u statische tekenelementen, zoals tekst en afbeeldingen, invoegen. Voor elk tekenelement wordt een aparte CSS-klasse gekoppeld aan dat element. De lijst met CSS-klassen voor draw-elementen wordt hieronder weergegeven. Aan elk tekenelement is een tekenklasse gekoppeld.
Andere delen van het formulier opmaken
Naast de weergave van UI-componenten in het HTML-formulier kunt u de stijl van elementen zoals inline-fouten, inline-waarschuwingen en velden met validatiefouten wijzigen.
Styling Inline Errors
Wanneer de validatie van een veld resulteert in een fout, wordt een inlinefout weergegeven wanneer het veld actief is. Als u de stijl van inline-fouten wilt wijzigen, overschrijft u de CSS-id error-msg.
Styling Inline Warnings
Wanneer de validatie van een veld resulteert in een waarschuwing, wordt een inlinewaarschuwing weergegeven wanneer het veld actief is. Als u de stijl van deze inline-waarschuwingen wilt wijzigen, overschrijft u de CSS-id warning-msg.
Styling Fields with Validation Errors
Wanneer de validatie voor een veld mislukt, verandert de stijl van de widget. Deze stijlwijziging wordt uitgevoerd door een CSS-klasse toe te passen widgetError op de widgetcomponent. Als u de standaardstijl wilt wijzigen, overschrijft u de instelling widgetError klasse.