Egenskaper för anpassat Forms-blockfält

Det här dokumentet sammanfattar hur JSON-scheman mappar till återgiven HTML i blocks/form/form.js, med fokus på hur fält identifieras och återges, vanliga mönster och fältspecifika skillnader.

Hur fält (fieldType) identifieras?

Varje fält i JSON-schemat har en fieldType-egenskap som avgör hur det återges. fieldType kan vara:

Om fieldType matchar en specialtyp används en anpassad renderare . Annars behandlas den som en standardindatatyp.

Se avsnitten nedan för den fullständiga HTML-strukturen och egenskaperna för varje fälttyp.

Vanliga egenskaper som används av fält

Nedan visas de egenskaper som används i de flesta fält:

Vanlig HTML-struktur

De flesta fält återges i en wrapper som innehåller en etikett och valfri hjälptext. I följande utdrag visas strukturen:

<div class="<fieldType>-wrapper field-wrapper field-<name>" data-id="<id>">
<label for="<id>" class="field-label">Label</label>
<!-- Field-specific input/element here -->
<div class="field-description" id="<id>-description">Description or error
message</div>
</div>

För grupper (radio/kryssruta) och paneler används en <fieldset> med en <legend> i stället för en <div>/<label>. Hjälptexten

finns bara om beskrivning har angetts.

Felmeddelandevisning

Felmeddelanden visas i samma .field-description-element som används för hjälptexten, som uppdateras dynamiskt.

När ett fält är ogiltigt:

• Radbrytaren (t.ex. .field-wrapper) tilldelas klassen .field-invalid.
• Innehållet i .field-description har ersatts med motsvarande felmeddelande.

När fältet blir giltigt:

• Klassen .field-invalid har tagits bort.
• .field-description återställs till den ursprungliga hjälptexten (om den är tillgänglig) eller tas bort om det inte finns någon.

Anpassade felmeddelanden kan definieras med egenskapen constraintMessages i JSON.
De läggs till som data-<constraint>ErrorMessage-attribut i wrapper (till exempel data-requiredErrorMessage).

Standardindatatyper (HTML Input eller *-input)

Om fieldType inte är en specialtyp behandlas den som en HTML-standardindatatyp eller som <type>-input, till exempel text, number, email, date, text-input, number-input.

• Suffixet -input tas bort och bastypen används som indatans type-attribut.
• De här typerna hanteras som standard i renderField().
  Vanliga standardindatatyper är text, number, email, date, password, tel, range, file osv. De accepterar också text-input, number-input osv., som normaliseras till bastypen.

Begränsningar för standardindatatyper

Begränsningar läggs till som attribut i indataelementet baserat på JSON-egenskaper.

Dessa attribut anges automatiskt av formuläråtergivaren baserat på fältets JSON-definition.

Exempel: HTML Structure med Constraints

I följande exempel visas hur ett nummerfält återges med valideringsbegränsningar och felhanteringsattribut.

<div class="number-wrapper field-wrapper field-age" data-id="age"
data-required="true"
data-minimumErrorMessage="Too small" data-maximumErrorMessage="Too large">
<label for="age" class="field-label">Age</label>
<input type="number"
id="age" name="age"
value="30" required min="18"
max="99" step="1"
placeholder="Enter your age" />
<div class="field-description" id="age-description"> Description or error message
</div>
</div>

Varje del av HTML-strukturen spelar en roll när det gäller databindning, validering och visning av hjälp- och felmeddelanden.

Fältspecifika egenskaper och deras HTML-strukturer

Nedrullningsbar meny

Extra egenskaper:

• enum / enumNames: Definiera alternativvärden och deras visningsetiketter för listrutan.
• type: Aktiverar flera markeringar om värdet är array.
• placeholder: Lägger till ett inaktiverat platshållaralternativ som vägleder användarna före markeringen.

Exempel:

<div class="drop-down-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true"
data-requiredErrorMessage="This field is required">
<label for="<id>" class="field-label">Label</label>
<select id="<id>" name="<name>" required title="Tooltip" multiple>
<option disabled selected value="">Placeholder</option>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</div>

Oformaterad text

Extra egenskaper:

• richText: Om true återges HTML i stycket.

Exempel:

<div class="plain-text-wrapper field-wrapper field-<name>" data-id="<id>">
<label for="<id>" class="field-label">Label</label>
<p>Text or <a href="..." target="_blank">link</a></p>
</div>

Kryssruta

Extra egenskaper:

• enum: Definierar värdena för kryssrutans markerade och omarkerade lägen.
• properties.variant / properties.alignment: Anger den visuella stilen och justeringen för kryssrutor i switchstil.

Exempel:

<div class="checkbox-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true"
data-requiredErrorMessage="Please check this box">
<label for="<id>" class="field-label">Label</label>
<input type="checkbox"
id="<id>"
name="<name>" value="on"
required
data-unchecked-value="off" />
<div class="field-description" id="<id>-description"> Description or error message
</div>
</div>

Knapp

Extra egenskaper:

• buttonType: Anger knappens beteende genom att ange dess typ (knapp, skicka eller återställ).

Exempel:

<div class="button-wrapper field-wrapper field-<name>" data-id="<id>">
<button id="<id>" name="<name>" type="submit" class="button"> Label
</button>
</div>

Flera rader

Extra egenskaper:

• minLength: Anger det minsta antalet tecken som tillåts i text- eller textområdesindata.
• maxLength: Anger det maximala antalet tecken som tillåts i text- eller textområdesindata.
• pattern: Definierar ett reguljärt uttryck som indatavärdet måste matcha för att betraktas som giltigt.
• placeholder: Visar platshållartext i indata eller textområdet tills ett värde anges.

Exempel:

<div class="multiline-wrapper field-wrapper field-<name>" data-id="<id>"
data-minLengthErrorMessage="Too short" data-maxLengthErrorMessage="Too long">
<label for="<id>" class="field-label">Label</label>
<textarea id="<id>"
name="<name>" required
minlength="2"
maxlength="100"
pattern="[A-Za-z]+"
placeholder="Type here..."></textarea>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</div>

Panel

Extra egenskaper:

• repeatable: Anger om panelen kan upprepas dynamiskt.
• minOccur: Anger det minsta antalet panelinstanser som krävs. maxOccur: Anger maximalt antal tillåtna panelinstanser.
• properties.variant: Definierar panelens visuella stil eller variant.
• properties.colspan: Anger hur många kolumner panelen spänner över i en stödrasterlayout.
• index: Anger panelens position i dess överordnade behållare.
• fieldset: Grupperar relaterade fält under ett <fieldset>-element med en teckenförklaring eller etikett.

Exempel:

<fieldset class="panel-wrapper field-wrapper field-<name>" data-id="<id>"
name="<name>"
data-repeatable="true" data-index="0">
<legend class="field-label">Label</legend>
<!-- Nested fields here -->
<button type="button" class="add">Add</button>
<button type="button" class="remove">Remove</button>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</fieldset>

Radio

Extra egenskaper:

• enum: Definierar uppsättningen tillåtna värden för alternativfältet, som används som värdeattribut för varje alternativknappsalternativ.

Exempel:

<div class="radio-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true">
<label for="<id>" class="field-label">Label</label>
<input type="radio" id="<id>" name="<name>" value="opt1" required />
<div class="field-description" id="<id>-description"> Description or error message
</div>
</div>

Alternativgrupp

Extra egenskaper:

• enum: Definierar listan med alternativvärden för alternativgruppen, som används som varje alternativknapps värde.
• enumNames: Tillhandahåller visningsetiketter för alternativknapparna, som matchar uppräkningsordningen.

Exempel:

<fieldset class="radio-group-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true">
<legend class="field-label">Label</legend>
<div>
<input type="radio" id="<id>-0" name="<name>" value="opt1" required />
<label for="<id>-0">Option 1</label>
</div>
<div>
<input type="radio" id="<id>-1" name="<name>" value="opt2" />
<label for="<id>-1">Option 2</label>
</div>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</fieldset>

Kryssrutegrupp

Extra egenskaper:

• enum: Definierar listan med alternativvärden för kryssrutegruppen, som används som varje kryssrutas värde.
• enumNames: Tillhandahåller visningsetiketter för kryssrutorna, enligt uppräkningsordningen.
• minItems: Anger det minsta antalet kryssrutor som måste markeras för att vara giltiga.
• maxItems: Anger det maximala antalet kryssrutor som kan markeras innan ett fel utlöses.

Exempel:

<fieldset class="checkbox-group-wrapper field-wrapper field-<name>" data-id="<id>"
data-required="true" data-minItems="1"
data-maxItems="3">
<legend class="field-label">Label</legend>
<div>
<input type="checkbox" id="<id>-0" name="<name>" value="opt1" required />
<label for="<id>-0">Option 1</label>
</div>
<div>
<input type="checkbox" id="<id>-1" name="<name>" value="opt2" />
<label for="<id>-1">Option 2</label>
</div>
<div class="field-description" id="<id>-description"> Description or error message
</div>
</fieldset>

Bild

Extra egenskaper:

• value / properties['fd:repoPath']: Definierar sökvägen till bildkällan eller databassökvägen för återgivning av bilden.
• altText: Tillhandahåller alternativ text för bilden (alt-attribut) för att förbättra tillgängligheten.

Exempel:

<div class="image-wrapper field-wrapper field-<name>" data-id="<id>">
<picture>
<img src="..." alt="..." />
<!-- Optimized sources -->
</picture>
</div>

Rubrik

Extra egenskaper:

• value: Anger det textinnehåll som ska visas i rubrikelementet (t.ex. <h2>).

Exempel:

<div class="heading-wrapper field-wrapper field-<name>" data-id="<id>">
<h2 id="<id>">Heading Text</h2>
</div>

Mer information finns i implementeringen i blocks/form/form.js och blocks/form/util.js.