Basic Form

1179 × 333
<div class="o-layer  o-layer--large t-page-theme-brand-b">
    <div class="o-retain  o-retain--form">

        <form method="post" action="#">

            <div class="o-flow">
                <div>
                    <label for="id_firstName" class="c-label ">
                        Voornaam
                    </label>

                    <input type="text" class="c-input-text  " id="id_firstName" name="firstName">

                    <div class="c-validation-message">Dit is een input validatie error</div>

                </div>

                <div>
                    <label for="id_email" class="c-label ">
                        E-mailadres
                    </label>

                    <input type="email" class="c-input-text  " id="id_email" name="email">

                    <div class="c-validation-message">Dit is een input validatie error</div>

                </div>

                <div>
                    <label for="id_message" class="c-label ">
                        Uw bericht
                    </label>

                    <textarea class="c-input-text c-input-text--textarea " id="id_message" name="message"></textarea>

                    <div class="c-validation-message">Dit is een input validatie error</div>

                </div>

                <div>
                    <label for="id_select" class="c-label ">
                        Selecteer een optie
                    </label>

                    <div class="c-select">
                        <select class="c-input-text  c-select__select" name="id_select" id="id_select">
                            <option value=option-1>option content 1</option>
                            <option value=option-2>option content 2</option>
                            <option value=option-3>option content 3</option>
                        </select>
                        <div class="c-select__icon">
                            <svg class="c-icon    " aria-hidden="true">
                                <use xlink:href="../../dist/sprite.svg#icon-chevron-down" />
                            </svg>

                        </div>
                    </div>

                    <div class="c-validation-message">Dit is een input validatie error</div>

                </div>

                <fieldset>
                    <legend class="c-label ">
                        Selecteer de juiste waarde
                    </legend>

                    <ul class="o-list-clean  o-flow  o-flow--tiny">
                        <li>
                            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                                <input class="c-input-control" type="radio" name="radio_btn_name" id="id_radio_0" value="radio value 0">
                                <label for="id_radio_0">Radio label 0</label>
                            </div>
                        </li>
                        <li>
                            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                                <input class="c-input-control" type="radio" name="radio_btn_name" id="id_radio_1" value="radio value 1">
                                <label for="id_radio_1">Radio label 1</label>
                            </div>
                        </li>
                        <li>
                            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                                <input class="c-input-control" type="radio" name="radio_btn_name" id="id_radio_2" value="">
                                <label for="id_radio_2">Radio label 2</label>
                            </div>
                        </li>
                    </ul>

                    <div class="c-validation-message">Dit is een input validatie error</div>

                </fieldset>

                <fieldset>

                    <legend class="c-label ">
                        Selecteer een of meerdere velden
                    </legend>

                    <ul class="o-list-clean  o-flow  o-flow--tiny">
                        <li>
                            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                                <input class="c-input-control" type="checkbox" name="id_checkbox_0" id="id_checkbox_0" value="checkbox value 0">
                                <label for="id_checkbox_0">Checkbox label 0</label>
                            </div>
                        </li>
                        <li>
                            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                                <input class="c-input-control" type="checkbox" name="id_checkbox_1" id="id_checkbox_1" value="checkbox value 1">
                                <label for="id_checkbox_1">Checkbox label 1</label>
                            </div>
                        </li>
                        <li>
                            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                                <input class="c-input-control" type="checkbox" name="id_checkbox_2" id="id_checkbox_2" value="checkbox value 2">
                                <label for="id_checkbox_2">Checkbox label 2</label>
                            </div>
                        </li>
                    </ul>

                    <div class="c-validation-message">Dit is een input validatie error</div>

                </fieldset>

                <div>
                    <label for="id_file" class="c-label ">
                        Uw bedrijfslogo
                    </label>

                    <input type="file" class="c-input-text  c-field-file-upload__input" name='file' />

                </div>

                <div>
                    <button type="submit" class="c-button                ">
                        <span class="c-button__inner">
                            <span class="c-button__label  " data-module-bind="btn-label">
                                Versturen
                            </span>

                        </span>
                    </button>

                </div>

            </div>

        </form>
    </div>
</div>
<div class="o-layer  o-layer--large t-page-theme-brand-b">
  <div class="o-retain  o-retain--form">

    <form method="post" action="#">

      <div class="o-flow">
        {{ render '@molecules-form-field-text'  }}

        {{ render '@molecules-form-field-text' email }}

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

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

        {{ render '@molecules-form-field-radioset' }}
        {{! render '@molecules-form-radio-button-list' }}

        {{ render '@molecules-form-checkbox-list' }}

        {{ render '@molecules-form-field-file-upload' }}

        {{ render '@molecules-form-field-submit' }}

      </div>

    </form>
  </div>
</div>
{
  "email": {
    "label": {
      "label": "E-mailadres",
      "for": "id_email"
    },
    "input": {
      "type": "email",
      "id": "id_email",
      "name": "email"
    }
  }
}

No notes defined.