Desain Form Dasar

Elemen-elemen pada form akan secara otomatis mengikuti desain Foundation tanpa kita menambahkan class apapun. Berikut contoh elemen form dasar tanpa tambahan class dari Foundation:

Skrip basic form.html

<form>

    <div class="row">

        <div class="columns small-10 ">

            <label>Nama Lengkap

                <input type="text" placeholder="Nama lengkap">

            </label>

    </div>

        </div>

    <div class="row">

        <div class="columns small-12 ">

            <label>Alamat Lengkap

                <textarea placeholder="Alamat lengkap"></textarea>

            </label>

        </div>

    </div>

    <div class="row">ostae

        <div class="columns small-10">

            <label>Jenis Kelamin </label>

            <input type="radio" name="jk" value="L" id="laki-laki>

            <label for="laki-laki">Laki-laki</label>

            <input type="radio" name="jk" value="P" id="perempuan">

            <label for="perempuan"> Perempuan</label>

        </div>

    </div>

    <div class="row">

        <div class= "columns small-10">

            <label>Status Pernikahan </label>

            <input type="checkbox" value="Y" id="status">

            <label for="status">Sudah Menikah</label >

        </div>

    </div>

    <div class="row">

        <div class="columns small -8">

            <label>Agama

            <select>

            <option>Islam</option>

            <option>Kristen</option>

            <option>Katolik</option>

            <option>Hindu</option>

            <option>Budha</option>

            <option>Kong Hu Chu</option>

            </select>

            </label>

        </div>

    </div>

    <diy class="row">

        <div class="columns small-6">

            <input type="submit" class="small button">

        </div>

    </div>

</form>

Share :