Adminportal MLU

Formular @form

Abgenommen

Form @form--form

HTML
Kontext

<!-- Form -->
<form class="form">
  <div class="form__content">
    <div class="form__text-required">
      <p class="label">Pflichtfelder sind mit * markiert</p>
    </div>
    <div class="form__fields">
      <div class="form__field">
        <div class="form-group">
          <label class="label form-group__label" for="form-group-065f">Name (Pflichtfeld)
            <abbr class="label__required" title="Pflichtfeld">*</abbr>
          </label>
          <input class="input" id="form-group-065f" name="form-group-065f" required="required"></input>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="label label--disabled form-group__label" for="form-group-0af1">Eingabefeld deaktiviert</label>
          <input class="input" id="form-group-0af1" name="form-group-0af1" disabled="disabled"></input>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="label label--invalid form-group__label" for="form-group-8ae3">Eingabefeld ungültig</label>
          <input class="input" id="form-group-8ae3" name="form-group-8ae3" value="hier stimmt etwas nicht" aria-invalid="true" aria-errormessage="form-group-8ae3-error"></input>
          <p class="form-group__error" id="form-group-8ae3-error">Hier steht der Grund des Fehlers.</p>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="label form-group__label" for="form-group-4196">Auswahlfeld</label>
          <select class="select" id="form-group-4196" name="form-group-4196">
            <option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="checkbox" for="form-group-ad9f">
            <input class="checkbox__input" type="checkbox" required="required" id="form-group-ad9f" name="form-group-ad9f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ich habe die
<a class="link link--external" href="#datendatenschutz" target="_blank">Datenschutzerklärung</a> gelesen und bin damit einverstanden. (Pflichtfeld)</span></label>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="checkbox" for="form-group-b92e">
            <input class="checkbox__input" type="checkbox" id="form-group-b92e" name="form-group-b92e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Dieses Fled ist optional.</span></label>
        </div>
      </div>
      <div class="form__headline">
        <h3 class="headline headline--6">Zwischenheadline</h3>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="label form-group__label" for="form-group-f4e8">Nachricht (Pflichtfeld)
            <abbr class="label__required" title="Pflichtfeld">*</abbr>
          </label>
          <textarea class="input input--textarea" id="form-group-f4e8" name="form-group-f4e8" type="textarea" placeholder="Das ist ein Platzhalter" required="required"></textarea>
        </div>
      </div>
      <div class="form__field">
        <fieldset class="form-group">
          <div class="form-group__item">
            <label class="radio" for="radio-form-group-fa37-0">
              <input class="radio__input" type="radio" id="radio-form-group-fa37-0" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Hier kann zwischen zwei Optionen gewählt werden.</span></label>
          </div>
          <div class="form-group__item">
            <label class="radio" for="radio-form-group-fa37-1">
              <input class="radio__input" type="radio" checked="checked" id="radio-form-group-fa37-1" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Hier ist die zweite Option.</span></label>
          </div>
        </fieldset>
      </div>
      <div class="form__headline">
        <h3 class="headline headline--6">Zwischenheadline</h3>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="switch" for="switch-form-group-479c">
            <input class="switch__input" type="checkbox" id="switch-form-group-479c" name="form-group-479c" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Hier kann eine Einstellung aktiviert werden.</span></label>
        </div>
      </div>
    </div>
    <div class="form__buttons">
      <button class="button button--primary" type="submit"><span class="button__text">Absenden</span></button>
    </div>
  </div>
</form>

{
  "submit": "Absenden",
  "required": true,
  "submitprimary": true,
  "fields": [
    {
      "label": "Name (Pflichtfeld)",
      "required": true
    },
    {
      "label": "Eingabefeld deaktiviert",
      "disabled": true
    },
    {
      "label": "Eingabefeld ungültig",
      "invalid": true,
      "error": "Hier steht der Grund des Fehlers.",
      "settings": {
        "value": "hier stimmt etwas nicht"
      }
    },
    {
      "label": "Auswahlfeld",
      "use": "select",
      "settings": {
        "hasPleaseSelectOption": true,
        "options": [
          "Option 1",
          "Option 2",
          "Option 3"
        ]
      }
    },
    {
      "use": "checkbox",
      "required": true,
      "settings": {
        "text": "Ich habe die #[a.link.link--external(href='#datendatenschutz', target='_blank') Datenschutzerklärung] gelesen und bin damit einverstanden. (Pflichtfeld)\n"
      }
    },
    {
      "use": "checkbox",
      "settings": {
        "text": "Dieses Fled ist optional.\n"
      }
    },
    {
      "headline": {
        "level": 3,
        "size": 6,
        "text": "Zwischenheadline"
      },
      "label": "Nachricht (Pflichtfeld)",
      "required": true,
      "settings": {
        "type": "textarea",
        "placeholder": "Das ist ein Platzhalter"
      }
    },
    {
      "group": [
        {
          "use": "radio",
          "settings": {
            "text": "Hier kann zwischen zwei Optionen gewählt werden.\n",
            "name": "radio-group"
          }
        },
        {
          "use": "radio",
          "settings": {
            "text": "Hier ist die zweite Option.",
            "checked": true,
            "name": "radio-group"
          }
        }
      ]
    },
    {
      "headline": {
        "level": 3,
        "size": 6,
        "text": "Zwischenheadline"
      },
      "use": "switch",
      "settings": {
        "text": "Hier kann eine Einstellung aktiviert werden.\n"
      }
    }
  ]
}

Account @form--account

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Account -->
<form class="form">
  <div class="form__content">
    <div class="form__text-headline">
      <h3 class="headline headline--6">Account</h3>
    </div>
    <div class="form__fields">
      <div class="form__field">
        <div class="form-group">
          <label class="label label--disabled form-group__label" for="form-group-a97c">Titel
            <abbr class="label__required" title="Pflichtfeld">*</abbr>
          </label>
          <input class="input" id="form-group-a97c" name="form-group-a97c" required="required" disabled="disabled"></input>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="label form-group__label" for="form-group-c05a">Vorname
            <abbr class="label__required" title="Pflichtfeld">*</abbr>
          </label>
          <input class="input" id="form-group-c05a" name="form-group-c05a" value="Franz" required="required"></input>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="label form-group__label" for="form-group-ce33">Nachname
            <abbr class="label__required" title="Pflichtfeld">*</abbr>
          </label>
          <input class="input" id="form-group-ce33" name="form-group-ce33" value="Schünzel" required="required"></input>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="label form-group__label" for="form-group-966c">Geburtdatum
            <abbr class="label__required" title="Pflichtfeld">*</abbr>
          </label>
          <input class="input" id="form-group-966c" name="form-group-966c" value="14.04.1988" required="required"></input>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="checkbox" for="form-group-504a">
            <input class="checkbox__input" type="checkbox" checked="checked" id="form-group-504a" name="form-group-504a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Blumen kaufen</span></label>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="checkbox" for="form-group-860d">
            <input class="checkbox__input" type="checkbox" id="form-group-860d" name="form-group-860d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lied singen</span></label>
        </div>
      </div>
      <div class="form__field">
        <div class="form-group">
          <label class="switch" for="switch-form-group-722c">
            <input class="switch__input" type="checkbox" id="switch-form-group-722c" name="form-group-722c" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Geschenk automatisch versenden</span></label>
        </div>
      </div>
    </div>
    <div class="form__buttons">
      <button class="button button--primary" type="submit"><span class="button__text">Speichern</span></button>
    </div>
  </div>
</form>

{
  "submit": "Speichern",
  "headline": {
    "size": 6,
    "level": 3,
    "text": "Account"
  },
  "submitprimary": true,
  "fields": [
    {
      "label": "Titel",
      "required": true,
      "disabled": true
    },
    {
      "label": "Vorname",
      "required": true,
      "settings": {
        "value": "Franz"
      }
    },
    {
      "label": "Nachname",
      "required": true,
      "settings": {
        "value": "Schünzel"
      }
    },
    {
      "label": "Geburtdatum",
      "required": true,
      "type": "date",
      "settings": {
        "value": "14.04.1988"
      }
    },
    {
      "use": "checkbox",
      "settings": {
        "checked": true,
        "text": "Blumen kaufen\n"
      }
    },
    {
      "use": "checkbox",
      "settings": {
        "checked": null,
        "text": "Lied singen\n"
      }
    },
    {
      "use": "switch",
      "settings": {
        "text": "Geschenk automatisch versenden\n"
      }
    }
  ]
}

Verlauf @form--verlauf

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Verlauf -->
<form class="form">
  <div class="form__content">
    <div class="form__text-headline">
      <h3 class="headline headline--6">Verlauf</h3>
    </div>
    <div class="form__fields">
      <div class="form__field">
        <div class="form-group">
          <label class="label form-group__label" for="form-group-3c3d">Nachricht</label>
          <textarea class="input input--textarea" id="form-group-3c3d" name="form-group-3c3d" type="textarea" placeholder="Was und warum?"></textarea>
        </div>
      </div>
    </div>
    <div class="form__buttons">
      <button class="button button--primary" type="submit"><span class="button__text">Senden</span></button>
    </div>
  </div>
</form>

{
  "submit": "Senden",
  "headline": {
    "size": 6,
    "level": 3,
    "text": "Verlauf"
  },
  "submitprimary": true,
  "fields": [
    {
      "label": "Nachricht",
      "settings": {
        "type": "textarea",
        "placeholder": "Was und warum?"
      }
    }
  ]
}

Formular @form

# Form @form--form

# Account @form--account

# Verlauf @form--verlauf

Form @form--form

Account @form--account

Verlauf @form--verlauf