Form

Javascript

Fonction Description
sk.Form.init(container) Initialise les formulaires situés dans le conteneur
sk.Form.reset(form) Ré-initialise le formulaire
sk.Form.validation(form) Vérifier si les éléments required sont remplis.
Renvoi true ou false
sk.Form.inputFile.reset(inputFile) Ré-initialise le input file
sk.Form.switch.check(input)
sk.Form.switch.uncheck(input)
sk.Form.switch.toggle(input)

Choix du thème

Input

<form class="stackedForm" data-color="green"  method="post">
    <div class="input required">
        <label for="input01">Label</label>
        <input id="input01" name="input01" type="text">
    </div>

    <div class="input required">
        <label for="input02">Label</label>
        <input id="input02" name="input02" type="text" placeholder="Placeholder">
    </div>

    <div class="input required">
        <label for="input03">Label</label>
        <i class="iconLeft" data-icon="fal/user"></i>
        <input id="input03" name="input03" type="text" placeholder="Placeholder">
    </div>

    <div class="input">
        <label for="input04">Label</label>
        <i class="iconRight" data-icon="fal/user"></i>
        <input id="input04" name="input04" type="text" placeholder="Placeholder">
    </div>

    <div class="input required">
        <label for="input05">Label</label>
        <i class="iconLeft" data-icon="fal/user"></i>
        <input id="input05" name="input05" type="text" placeholder="Placeholder" disabled>
    </div>

    <div class="center paddingL">
        <button>Valider</button>
    </div>

</form>

Select

<form class="stackedForm" method="post">

    <div class="select">
        <label for="select01">Label</label>
        <select id="select01" name="select01">
            <option value="1">Option 01</option>
            <option value="2">Option 02</option>
            <option value="3">Option 03</option>
            <option value="4">Option 04</option>
        </select>
    </div>

    <div class="select required">
        <label for="select02">Label</label>
        <i class="iconLeft" data-icon="fal/user"></i>
        <select id="select02" name="select02">
            <option value=""></option>
            <option value="1">Option 01</option>
            <option value="2">Option 02</option>
            <option value="3">Option 03</option>
            <option value="4">Option 04</option>
        </select>
    </div>

    <div class="select">
        <label for="select03">Label</label>
        <i class="iconLeft" data-icon="fal/envelope"></i>
        <select id="select03" name="select03">
            <option value="1">Option 01</option>
            <option value="2">Option 02</option>
            <option value="3">Option 03</option>
            <option value="4" disabled>Option 04</option>
        </select>
    </div>

    <div class="select">
        <label for="select04">Label</label>
        <i class="iconLeft" data-icon="fal/envelope"></i>
        <select id="select04" name="select04" disabled>
            <option value="1">Option 01</option>
            <option value="2">Option 02</option>
            <option value="3">Option 03</option>
            <option value="4">Option 04</option>
        </select>
    </div>
    <div class="center paddingL">
        <button>Valider</button>
    </div>

</form>

Textarea

<form class="stackedForm" data-color="green" method="post">

    <div class="textarea required">
        <label for="textarea01">Textarea</label>
        <textarea id="textarea01" name="textarea01"></textarea>
    </div>

    <div class="textarea">
        <label for="textarea02">Textarea</label>
        <textarea id="textarea02" name="textarea02" placeholder="Placeholder" disabled></textarea>
    </div>

    <div class="center paddingL">
        <button>Valider</button>
    </div>

</form>

Radio

Radio

<form class="stackedForm" method="post">
    <div class="radio required">
        <p>Radio</p>
        <input type="radio" id="radio01-1" name="radio01" value="1">
        <label for="radio01-1">Radio 01</label>
        <input type="radio" id="radio01-2" name="radio01" value="2">
        <label for="radio01-2">Radio 02</label>
        <input type="radio" id="radio01-3" name="radio01" value="3" disabled>
        <label for="radio01-3">Radio 03</label>
    </div>

    <div class="center paddingL">
        <button>Valider</button>
    </div>
</form>

Checkbox

Radio

<form class="stackedForm" data-color="green" method="post">
    <div class="checkbox required">
        <p>Radio</p>
        <input type="checkbox" id="checkbox01-1" name="checkbox01">
        <label for="checkbox01-1">Checkbox 01</label>
        <input type="checkbox" id="checkbox01-2" name="checkbox01">
        <label for="checkbox01-2">Checkbox 02</label>
        <input type="checkbox" id="checkbox01-3" name="checkbox01" disabled>
        <label for="checkbox01-3">Checkbox 03</label>
    </div>

    <div class="center paddingL">
        <button>Valider</button>
    </div>
</form>

File

<form class="stackedForm"  method="post">
    <div class="inputFile required" data-text="Sélectionner un fichier">
        <label for="inputFile01">Label</label>
        <input id="inputFile01" name="inputFile01" type="file">
    </div>

    <div class="inputFile required" data-text="Sélectionner un fichier">
        <label for="inputFile02">Label</label>
        <input id="inputFile02" name="inputFile02" type="file" disabled>
    </div>

    <div class="center paddingL">
        <button>Valider</button>
    </div>
</form>

Switch

<form class="stackedForm" data-color="green" method="post">
    <div class="switch">
        <input id="switch01" name="switch01" type="hidden">
        <label for="switch01">Label</label>
    </div>
    <div class="switch">
        <input id="switch02" name="switch02" type="hidden" value="1">
        <label for="switch02">Label</label>
    </div>

    <div class="switch">
        <input id="switch03" name="switch03" type="hidden" disabled>
        <label for="switch03">Label</label>
    </div>

    <div class="switch">
        <input id="switch04" name="switch04" type="hidden" value="1" disabled>
        <label for="switch04">Label</label>
    </div>
</form>

Avec grille

Sexe

Centre d'intérêt

<form class="stackedForm" method="post">
    <div class="grid6 grid12M gutter">
        <div class="input">
            <label for="input06">Nom</label>
            <i class="iconLeft" data-icon="fal/user"></i>
            <input id="input06" name="input06" type="text">
        </div>

        <div class="input">
            <label for="input07">Prénom</label>
            <i class="iconLeft" data-icon="fal/user"></i>
            <input id="input07" name="input07" type="text">
        </div>

        <div class="select">
            <label for="select05">Sexe</label>
            <i class="iconLeft" data-icon="fal/transgender"></i>
            <select id="select05" name="select05">
                <option value="1">Homme</option>
                <option value="2">Femme</option>
            </select>
        </div>

        <div class="select required">
            <label for="select06">Ville de résidence</label>
            <i class="iconLeft" data-icon="fal/map-marker"></i>
            <select id="select06" name="select06">
                <option value=""></option>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
                <option value="3">Option 03</option>
                <option value="4">Option 04</option>
            </select>
        </div>

        <div class="textarea col12">
            <label for="textarea03">Commentaire</label>
            <textarea id="textarea03" name="textarea04"></textarea>
        </div>

        <div class="radio required">
            <p>Sexe</p>
            <input type="radio" id="radio02-1" name="radio02" value="1">
            <label for="radio02-1">Homme</label>
            <input type="radio" id="radio02-2" name="radio02" value="2">
            <label for="radio02-2">Femme</label>
        </div>

        <div class="checkbox required">
            <p>Centre d'intérêt</p>
            <input type="checkbox" id="checkbox02-1" name="checkbox02" value="1">
            <label for="checkbox02-1">Bricolage</label>
            <input type="checkbox" id="checkbox02-2" name="checkbox02" value="2">
            <label for="checkbox02-2">Jardinage</label>
            <input type="checkbox" id="checkbox02-3" name="checkbox02" value="3">
            <label for="checkbox02-3">Lecture</label>
        </div>

        <div class="inputFile" data-text="Sélectionner un fichier">
            <label for="inputFile03">Label</label>
            <input id="inputFile03" name="inputFile03" type="file">
        </div>

        <div class="inputFile" data-text="Sélectionner un fichier">
            <label for="inputFile04">Label</label>
            <input id="inputFile04" name="inputFile04" type="file">
        </div>

        <div class="switch">
            <input id="switch05" name="switch05" type="hidden">
            <label for="switch05">Label</label>
        </div>

        <div class="switch">
            <input id="switch06" name="switch06" type="hidden" value="1">
            <label for="switch06">Label</label>
        </div>

        <div class="col12 center paddingL">
            <button>Valider</button>
        </div>

    </div>
</form>