form-basic

<form class="c-form">
    <fieldset>
        <legend>Standard input fields</legend>

        <div class="c-form__row">
            <label for="naam">naam</label>
            <input type="text" id="naam" placeholder="naam" />
        </div>

        <div class="c-form__row">
            <div class="s-row s-row--responsive">
                <div class="s-row__column s-row__column--8-12">
                    <label for="straat">straat</label>
                    <input type="text" id="straat" placeholder="straat" />
                </div>
                <div class="s-row__column s-row__column--2-12">
                    <label for="huisnummer">huisnummer</label>
                    <input type="number" id="huisnummer" placeholder="huisnummer" />
                </div>
                <div class="s-row__column s-row__column--2-12">
                    <label for="toevoeging">toevoeging</label>
                    <input type="text" id="toevoeging" placeholder="toevoeging" />
                </div>
            </div>
        </div>

        <div class="c-form__row">
            <div class="s-row s-row--responsive">
                <div class="s-row__column s-row__column--3-12">
                    <label for="postcode">postcode</label>
                    <input type="text" id="postcode" placeholder="postcode" maxlength="7" />
                </div>
                <div class="s-row__column s-row__column--9-12">
                    <label for="plaats">plaats</label>
                    <input type="text" id="plaats" placeholder="plaats" />
                </div>
            </div>
        </div>

        <div class="c-form__row">
            <label for="telefoon">telefoon</label>
            <input type="tel" id="telefoon" placeholder="telefoon" />
        </div>

        <div class="c-form__row">
            <label for="email">email</label>
            <input type="email" id="email" placeholder="email" />
        </div>

        <div class="c-form__row">
            <label for="textarea">textarea</label>
            <textarea id="textarea" placeholder="textarea"></textarea>
        </div>

    </fieldset>

    <fieldset>
        <legend>Select fields</legend>

        <div class="c-form__row">
            <p class="label">Kies uit een van deze opties</p>
            <select name="select" id="select">
                <option default hidden>Maak een keuze</option>
                <option value="optie 1">optie 1</option>
                <option value="optie 2">optie 2</option>
                <option value="optie 3">optie 3</option>
                <option value="optie 4">optie 4</option>
                <option value="optie 5">optie 5</option>
            </select>
        </div>

    </fieldset>

    <fieldset>
        <legend>Radiobuttons and checkboxes</legend>

        <div class="c-form__row">
            <p class="label">Geslacht</p>
            <div class="c-radio-replace">
                <input type="radio" name="gender" value="female" id="gender_male">
                <label for="gender_male">man</label>
                <input type="radio" name="gender" value="male" id="gender_female">
                <label for="gender_female">vrouw</label>
            </div>
        </div>

        <div class="c-form__row">
            <p class="label">Meerdere keuzes mogelijk</p>
            <div class="c-radio-replace">
                <input type="checkbox" name="checkbox" value="value1" id="check1">
                <label for="check1">Check 1</label>
                <input type="checkbox" name="checkbox" value="value2" id="check2">
                <label for="check2">Check 2</label>
                <input type="checkbox" name="checkbox" value="value3" id="check3">
                <label for="check3">Check 3</label>
            </div>
        </div>

    </fieldset>

    <fieldset>
        <legend>Buttons</legend>

        <div class="c-form__row">
            <button type="button" value="Verstuur" class="button button--icon button--icon-send">Verstuur</button>
        </div>

    </fieldset>
</form>