51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Input

100% 
<!-- Text -->
<div class="o-form__field">
    <div class="o-form__fluid">
        <input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
        <label class="o-form__label">Ihr Name<span class="required">*</span></label>
    </div>
    <span class="o-form__status o-form__status--warning">
          
        </span>
    <span class="o-form__info" id="input-01"></span>
</div>


<!-- Email -->
<div class="o-form__field">
    <div class="o-form__fluid">
        <input title="" type="email" class="o-form__input o-form__input--email " placeholder="Ihre E-Mail-Adresse" aria-describedby="input-03" pattern="email" required>
        <label class="o-form__label">Input type: email<span class="required">*</span></label>
    </div>
    <span class="o-form__status o-form__status--warning">
          Dieses Feld muss ausgefüllt werden.
        </span>
    <span class="o-form__info" id="input-03"></span>
</div>


<!-- Number -->
<div class="o-form__field">
    <div class="o-form__fluid">
        <input title="" type="number" class="o-form__input o-form__input--number " placeholder="Bitte ausfüllen" aria-describedby="input-04" pattern="number">
        <label class="o-form__label">Input type: phone</label>
    </div>
    <span class="o-form__info" id="input-04"></span>
</div>


<!-- Url -->
<div class="o-form__field">
    <div class="o-form__fluid">
        <input title="" type="url" class="o-form__input o-form__input--url " placeholder="Ihre Webseite" aria-describedby="input-5" pattern="url" required>
        <label class="o-form__label">Input type: url<span class="required">*</span></label>
    </div>
    <span class="o-form__status o-form__status--warning">
          Dieses Feld muss ausgefüllt werden.
        </span>
    <span class="o-form__info" id="input-5"></span>
</div>


<div class="o-form__field">
    <div class="o-form__fluid">
        <input title="{{ title }}" type="{{ type }}"
               class="o-form__input o-form__input--{{ type }} {{ class }}"
               placeholder="{{ placeholder }}"
            {% if Id %} aria-describedby="{{ Id }}"{% endif %}
            {% if pattern %} pattern="{{ pattern }}"{% endif %}
            {% if required %} required{% endif %}>
        {% if label %}
            <label class="o-form__label">{{ label }}{% if required %}<span class="required">*</span>{% endif %}</label>
        {% endif %}
    </div>
    {% if required %}
        <span class="o-form__status o-form__status--warning">
          {{ errortext }}
        </span>
    {% endif %}
    {% if Id %}
        <span class="o-form__info" id="{{ Id }}">{{ description }}</span>
    {% endif %}
</div>
 
/* Text */
{
  "label": "Ihr Name",
  "type": "text",
  "placeholder": "Bitte ausfüllen",
  "Id": "input-01",
  "pattern": false,
  "required": true,
  "errortext": "",
  "description": "",
  "title": ""
}


/* Email */
{
  "label": "Input type: email",
  "type": "email",
  "placeholder": "Ihre E-Mail-Adresse",
  "Id": "input-03",
  "pattern": "email",
  "required": true,
  "errortext": "Dieses Feld muss ausgefüllt werden.",
  "description": "",
  "title": ""
}


/* Number */
{
  "label": "Input type: phone",
  "type": "number",
  "placeholder": "Bitte ausfüllen",
  "Id": "input-04",
  "pattern": "number",
  "required": false,
  "errortext": "Dieses Feld muss ausgefüllt werden.",
  "description": "",
  "title": ""
}


/* Url */
{
  "label": "Input type: url",
  "type": "url",
  "placeholder": "Ihre Webseite",
  "Id": "input-5",
  "pattern": "url",
  "required": true,
  "errortext": "Dieses Feld muss ausgefüllt werden.",
  "description": "",
  "title": ""
}

There are no notes for this item.