Frontpage

<div class="container">
    <h1>Forms overview:</h1>

    <hr>

    <h2>Persistent inputs</h2>
    <p>We are using persistent inputs, so when you enter data it will be stored in your sessionStorage. Try entering data and refreshing the page.</p>
    <p>Using: <a href="https://codepen.io/bfred-it/pen/zNNxOz">https://codepen.io/bfred-it/pen/zNNxOz</a></p>
    <hr>
    <h2>Input types</h2>
    <div class="input__wrapper">
        <label class="label  " for="selectId">
            Select
            
        </label>
        <div class="select__wrapper">
            <select class="select" name="select" id="selectId">
        <option selected="true" disabled="disabled">Choose an option</option>

            <option value="Value 1">Option 1</option>
            <option value="Value 2">Option 2</option>
            <option value="Value 3">Option 3</option>
            <option value="Value 4">Option 4</option>
        
    </select>
            <svg class="svg-icon  select__icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-dropdown"></use>
    </svg></div>
    </div>

    <div class="input__wrapper">
        <input type="checkbox" class="checkbox" name="checkbox" id="checkboxId">
        <label for="checkboxId">This is a checkbox</label>

        <h3 class="title"></h3>
        <div class=""></div>
        <label for="checkboxId">This is a checkbox</label>
    </div>

    <div class="input__wrapper">
        <input type="radio" class="radio" name="radio" id="1" value="val1">
        <label for="1">Radio 1</label> </div>
    <div class="input__wrapper">
        <input type="radio" class="radio" name="radio" id="2" value="val2">
        <label for="2">Radio 2</label> </div>

    <hr>
    <h2>Standard fields with validation</h2>
    <p>
        Using: <a href="https://github.com/cferdinandi/validate">https://github.com/cferdinandi/validate</a>
    </p>

    <form data-validate>
        <div class="input__wrapper">
            <label class="label  " for="email-id">
                Email
                
                    <span class="label__sub">(Påkrævet)</span>
            </label> <input class="input  " type="email" name="email-input" id="email-id" placeholder="Insert e-mail" required />

            <div class="input__description">Dette en note med hjælp, der skaber tryghed hos brugeren</div>
        </div>

        <div class="input__wrapper">
            <label class="label  " for="password-id">
                Password
                
                    <span class="label__sub">(Påkrævet)</span>
            </label> <input class="input  " type="password" name="password-input" id="password-id" placeholder="Insert password" required />

        </div>

        <div class="input__wrapper">
            <label class="label  " for="search-id">
                Søgning
                
                    <span class="label__sub">(Påkrævet)</span>
            </label> <input class="input  " type="search" name="search-input" id="search-id" placeholder="Insert search" required />

        </div>

        <div class="input__wrapper">
            <label class="label  " for="text-id">
                Tekst
                
                    <span class="label__sub">(Valgfri)</span>
            </label> <input class="input  " type="text" name="" id="" placeholder="" />
        </div>

        <div class="input__wrapper">
            <label class="label  " for="textareaId">
                Beskrivelse
                
                    <span class="label__sub">(Valgfrit)</span>
            </label> <textarea class="textarea  " name="textarea" id="textareaId" placeholder="This is a textarea"></textarea>

        </div>

        <button type="submit" class="button ">
            Submit
        </button>

    </form>

    <hr>

    <form data-validate>

        <h2>Input masking</h2>
        <p>
            Using: <a href="https://github.com/text-mask/text-mask/tree/master/vanilla">https://github.com/text-mask/text-mask/tree/master/vanilla</a>
        </p>

        <div class="input__wrapper">
            <label class="label  " for="phoneId">
                Telefon
                
                    <span class="label__sub">(phone)</span>
            </label> <input class="input  js-mask--phone" type="text" name="phone" id="phoneId" placeholder="Indtast dit telefonnummer" required />
        </div>

        <div class="input__wrapper">
            <label class="label  " for="cpr">
                CPR
                
                    <span class="label__sub">(cpr)</span>
            </label> <input class="input  js-mask--cpr" type="text" name="cpr" id="cpr" placeholder="Indtast dit CPR nummer" required />
        </div>

        <div class="input__wrapper">
            <label class="label  " for="bank">
                Reg. og Kontonummer
                
                    <span class="label__sub">(bank)</span>
            </label> <input class="input  js-mask--bank" type="text" name="bank" id="bank" placeholder="Indtast dit registrerings og kontonummer" required />
        </div>

        <div class="input__wrapper">
            <label class="label  " for="date1">
                Dato (dd/mm/åååå)
                
                    <span class="label__sub">(date1)</span>
            </label> <input class="input  js-mask--date1" type="text" name="date1" id="date1" placeholder="Indtast dit registrerings og kontonummer" required />
        </div>

        <button type="submit" class="button ">
                Submit
            </button>
    </form>
</div>