Forms

• Forms

  • Example:

    • • .com

    OneTwoThreeFour

    Label

    • Red
    • Blue

    Label

    • Checkbox 1
    • Checkbox 2

  • Code:

    <form>
    <ul class="vrow">
    <li class="vl-12 vcol">
    <p>
    <input id="inputA" type="text" class="vbor-b vfield" placeholder="What's your input?" />
    <label for="inputA" data-vlabel="Input Label"></label>
    </p>
    </li>
    </ul>
    <ul class="vrow">
    <li class="vl-4 vcol">
    <p>
    <input id="inputB" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
    <label for="inputB" data-vlabel="Input Label"></label>
    </p>
    </li>
    <li class="vl-4 vcol">
    <p>
    <input id="inputC" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
    <label for="inputC" data-vlabel="Input Label"></label>
    </p>
    </li>
    <li class="vl-4 vcol">
    <ul class="vrow vcol-0">
    <li class="vl-9 vm-9 vs-9 vcol">
    <p>
    <input id="inputD" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
    <label for="inputD" data-vlabel="Input Label"></label>
    </p>
    </li>
    <li class="vl-3 vm-3 vs-3 vcol">
    <p>
    <label for="website" class="vsuf">.com</label>
    </p>
    </li>
    </ul>
    </li>
    </ul>
    <div class="vrow">
    <div class="vl-12 vcol">
    <p>
    <select id="selectA" class="vbor-b vfield">
    <option value=""></option>
    <option value="value1">One</option>
    <option value="value2">Two</option>
    <option value="value3">Three</option>
    <option value="value4">Four</option>
    </select>
    <label for="selectA" data-vlabel="Select"></label>
    </p>
    </div>
    </div>
    <div class="vrow">
    <div class="vl-6 vcol">
    <label>Label</label>
    <ul class="vin-blocks">
    <li>
    <input type="radio" id="inputRed" name="inputKey">
    <label for="inputRed">Red</label>
    </li>
    <li>
    <input type="radio" id="inputBlue" name="inputKey">
    <label for="inputBlue">Blue</label>
    </li>
    </ul>
    </div>
    <div class="vl-6 vcol">
    <label>Label</label>
    <ul class="vin-blocks">
    <li>
    <input id="checkbox1" type="checkbox" name="inputKey">
    <label for="checkbox1">Checkbox 1</label>
    </li>
    <li>
    <input id="checkbox2" type="checkbox" name="inputKey">
    <label for="checkbox2">Checkbox 2</label>
    </li>
    </ul>
    </div>
    </div>
    <div class="vrow">
    <div class="vl-12 vcol">
    <p>
    <textarea id="textareaA" class="vbor-b vfield" placeholder="What's your input?"></textarea>
    <label for="inputA" data-vlabel="Textarea"></label>
    </p>
    </div>
    </div>
    </form> 

  Supercategory

  • Structure