Freie Grundschule Pfefferwerk - Frontend Design

Form Example 

<form class="c-form o-space-b:default">

    <!-- input text examples -->
    <fieldset class="c-form__fieldset">
        <legend class="c-form__legend u-typo:l">Fieldset</legend>

        <div class="c-form__group ">
            <!--
        @int:
        to provide accessibility always provide labels,
        if we have to hide them add u-visually-hidden class
    -->
            <label class="c-form__label " for="input-text-label-1">
        Feld-Bezeichnung 
    </label>

            <div class="c-form__input-container">
                <input id="input-text-label-1" type="text" placeholder="Platzhaltertext" class="c-form__input">
            </div>

        </div>

        <div class="c-form__group ">
            <!--
        @int:
        to provide accessibility always provide labels,
        if we have to hide them add u-visually-hidden class
    -->
            <label class="c-form__label " for="input-text-label-2">
        Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
    </label>

            <div class="c-form__input-container">
                <input aria-describedby="input-text-description-2" id="input-text-label-2" type="text" class="c-form__input" required>
            </div>

            <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
            <p id="input-text-description-2" class="c-form__msg u-typo:s">Platz für Hinweistext...</p>

        </div>

        <div class="c-form__group ">
            <!--
        @int:
        to provide accessibility always provide labels,
        if we have to hide them add u-visually-hidden class
    -->
            <label class="c-form__label " for="input-text-label-3">
        Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
    </label>

            <div class="c-form__input-container">
                <input aria-describedby="input-text-description-3" id="input-text-label-3" type="text" class="c-form__input" required>
                <span class="c-form__icon" aria-hidden="true"><i class="o-icons o-icons--email" aria-hidden="true"></i>
</span>
            </div>

            <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
            <p id="input-text-description-3" class="c-form__msg u-typo:s">Feld mit Icon</p>

        </div>

        <div class="c-form__group ">
            <!--
        @int:
        to provide accessibility always provide labels,
        if we have to hide them add u-visually-hidden class
    -->
            <label class="c-form__label u-visually-hidden" for="input-text-label-4">
        Feld-Bezeichnung 
    </label>

            <div class="c-form__input-container">
                <input aria-describedby="input-text-description-4" id="input-text-label-4" type="text" placeholder="Platzhaltertext" class="c-form__input">
            </div>

            <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
            <p id="input-text-description-4" class="c-form__msg u-typo:s">Feld mit versteckter Bezeichnung</p>

        </div>

        <div class="c-form__group is-error">
            <!--
        @int:
        to provide accessibility always provide labels,
        if we have to hide them add u-visually-hidden class
    -->
            <label class="c-form__label " for="input-text-label-5">
        Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
    </label>

            <div class="c-form__input-container">
                <input aria-describedby="input-text-description-5" id="input-text-label-5" type="text" placeholder="Platzhaltertext" class="c-form__input" required value="Eingabe fehlerhaft">
            </div>

            <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
            <p id="input-text-description-5" class="c-form__msg u-typo:s">Hinweistext mit Fehlerbeschreibung</p>

        </div>

        <div class="c-form__group is-valid">
            <!--
        @int:
        to provide accessibility always provide labels,
        if we have to hide them add u-visually-hidden class
    -->
            <label class="c-form__label " for="input-text-label-6">
        Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
    </label>

            <div class="c-form__input-container">
                <input aria-describedby="input-text-description-6" id="input-text-label-6" type="text" placeholder="Platzhaltertext" class="c-form__input" required value="Eingabe valide">
            </div>

            <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
            <p id="input-text-description-6" class="c-form__msg u-typo:s">Möglicher Text bei korrekter Eingabe</p>

        </div>

        <div class="c-form__group">
            <div class="c-form__required-container u-typo:s">
                <span class="c-form__required" title="Pflichtfeld">*</span>
                <span class="c-form__msg">Pflichtfeld bitte ausfüllen</span>
            </div>
        </div>

        <div class="c-form__group">
            <button class="c-button c-button--primary" type="submit" value="send">
    Absenden
</button>

            <button class="c-button c-button--ghost" type="reset" value="reset">
    Zurücksetzen
</button>

        </div>
    </fieldset>

    <!-- select/ textarea example -->
    <fieldset class="c-form__fieldset">
        <legend class="c-form__legend u-typo:l">Fieldset</legend>

        <div class="c-form__group ">

            <label class="c-form__label " for="select-label-1">
        Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
    </label>

            <div class="c-form__input-container">
                <select aria-describedby="select-description-1" id="select-label-1" class="c-form__input">
            <option value="" disabled selected>Bitte wählen Sie eine Option</option>
            <option value="Option One">Option eins</option>
            <option value="Option Two">Option zwei</option>
            <option value="Option Three">Option drei</option>
        </select>
                <div class="c-form__select-arrow" aria-hidden="true"></div>
            </div>

            <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
            <p id="select-description-1" class="c-form__msg u-typo:s">Platz für Hinweistext</p>

        </div>

        <div class="c-form__group ">

            <label class="c-form__label " for="textarea-label-1">
        Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
    </label>

            <div class="c-form__input-container">
                <textarea aria-describedby="textarea-description-1" name="textarea-label-1" id="textarea-label-1" placeholder="Ihr Feedback..." class="c-form__input" required></textarea>
            </div>

            <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
            <p id="textarea-description-1" class="c-form__msg u-typo:s">Platz für Hinweistext</p>

        </div>

        <div class="c-form__group">
            <p class="c-form__text">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
        </div>

        <div class="c-form__group">
            <div class="c-form__required-container u-typo:s">
                <span class="c-form__required" title="Pflichtfeld">*</span>
                <span class="c-form__msg">Pflichtfeld bitte ausfüllen</span>
            </div>
        </div>

        <div class="c-form__group">
            <button class="c-button c-button--primary" type="submit" value="send">
    Absenden
</button>

            <button class="c-button c-button--ghost" type="reset" value="reset">
    Zurücksetzen
</button>

        </div>
    </fieldset>

    <!-- checkbox/ radio button example -->
    <fieldset class="c-form__fieldset">
        <legend class="c-form__legend u-typo:l">Fieldset</legend>

        <div class="c-form__group ">

            <!--
            @int:
            provide nested fieldset and legend for each list
        -->
            <fieldset class="c-form__fieldset c-form__checkfields">

                <legend class="c-form__legend">Bezeichnung für Checkboxen</legend>

                <ul class="c-checkfields-list">
                    <li class="c-checkfields-list__item">
                        <input id="input-checkbox-label-1" type="checkbox" name="input-checkbox-name-1" checked>
                        <label for="input-checkbox-label-1">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
                    </li>

                    <li class="c-checkfields-list__item">
                        <input id="input-checkbox-label-2" type="checkbox" name="input-checkbox-name-1">
                        <label for="input-checkbox-label-2">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
                    </li>
                </ul>

            </fieldset>

        </div>

        <div class="c-form__group ">
            <!--
        @int:
        provide nested fieldset and legend for each list
    -->
            <fieldset class="c-form__fieldset c-form__checkfields">

                <legend class="c-form__legend">Bezeichnung für Radio-Buttons</legend>

                <ul class="c-checkfields-list">

                    <li class="c-checkfields-list__item">
                        <input id="input-radio-label-1" type="radio" name="input-radio-name-1" checked>
                        <label for="input-radio-label-1">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
                    </li>

                    <li class="c-checkfields-list__item">
                        <input id="input-radio-label-2" type="radio" name="input-radio-name-1">
                        <label for="input-radio-label-2">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
                    </li>
                </ul>

            </fieldset>
        </div>

        <div class="c-form__group ">

            <!-- single checkbox -->
            <div class="c-form__checkfields">
                <input id="input-checkbox-label-3" type="checkbox" name="input-checkbox-name-3">
                <label for="input-checkbox-label-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</label>
            </div>

        </div>

        <div class="c-form__group">
            <button class="c-button c-button--primary" type="submit" value="send">
    Absenden
</button>

            <button class="c-button c-button--ghost" type="reset" value="reset">
    Zurücksetzen
</button>

        </div>
    </fieldset>

</form>
 
<form class="c-form {{spaceAfter}}">

    <!-- input text examples -->
    <fieldset class="c-form__fieldset">
        <legend class="c-form__legend u-typo:l">{{fieldsetLegend}}</legend>

        {{render '@form-field-input' inputNoDecriptionData merge=true}}

        {{render '@form-field-input' inputData merge=true}}

        {{render '@form-field-input' inputIconData merge=true}}

        {{render '@form-field-input' inputHiddenLabelData merge=true}}

        {{render '@form-field-input' inputErrorData merge=true}}

        {{render '@form-field-input' inputValidData merge=true}}

        {{render '@form-required'}}

        <div class="c-form__group">
            {{render '@button' buttonSubmitData merge=true}}
            {{render '@button' buttonResetData merge=true}}
        </div>
    </fieldset>


    <!-- select/ textarea example -->
    <fieldset class="c-form__fieldset">
        <legend class="c-form__legend u-typo:l">{{fieldsetLegend}}</legend>

        {{render '@form-field-select'}}

        {{render '@form-field-textarea'}}

        {{render '@form-text'}}

        {{render '@form-required'}}

        <div class="c-form__group">
            {{render '@button' buttonSubmitData merge=true}}
            {{render '@button' buttonResetData merge=true}}
        </div>
    </fieldset>


    <!-- checkbox/ radio button example -->
    <fieldset class="c-form__fieldset">
        <legend class="c-form__legend u-typo:l">{{fieldsetLegend}}</legend>

        {{render '@form-field-checkbox'}}

        {{render '@form-field-radio'}}

        {{> '@form-field-checkbox' singleCheckbox=true}}

        <div class="c-form__group">
            {{render '@button' buttonSubmitData merge=true}}
            {{render '@button' buttonResetData merge=true}}
        </div>
    </fieldset>

</form>
 
{
  "spaceAfter": "o-space-b:default",
  "formTitle": "Form Title",
  "fieldsetLegend": "Fieldset",
  "text": "Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.",
  "inputNoDecriptionData": {
    "id": "1",
    "required": null,
    "described": null
  },
  "inputData": {
    "id": "2",
    "placeholder": null,
    "descriptionId": 2
  },
  "inputIconData": {
    "id": "3",
    "icon": true,
    "placeholder": null,
    "described": "Feld mit Icon",
    "descriptionId": 3
  },
  "inputHiddenLabelData": {
    "id": "4",
    "hiddenClass": true,
    "described": "Feld mit versteckter Bezeichnung",
    "descriptionId": 4,
    "required": null,
    "icon": null
  },
  "inputErrorData": {
    "id": "5",
    "described": "Hinweistext mit Fehlerbeschreibung",
    "descriptionId": 5,
    "isError": true
  },
  "inputValidData": {
    "id": "6",
    "described": "Möglicher Text bei korrekter Eingabe",
    "descriptionId": 6,
    "isValid": true
  },
  "buttonSubmitData": {
    "buttonModifier": "primary",
    "buttonLabel": "Absenden",
    "typeButton": null,
    "typeSubmit": true,
    "valueSubmit": "send"
  },
  "buttonResetData": {
    "buttonModifier": "ghost",
    "buttonLabel": "Zurücksetzen",
    "typeButton": null,
    "typeReset": true,
    "valueReset": "reset"
  }
}

There are no notes for this item.