Form Horisontal

Agar label form berada di sebelah kiri alat inputan, pisahkan label dan alat inputan dalam dua kolom menggunakan sistem grid. Tambahkan class .right pada label agar rata kanan dan tambahkan class .inline agar label rata tengah vertikal.

horizontal form.html

<form>

    <div class"row">

        <div class="columns small-3">

            <label for="username" class="right inline">

                    Username</label>

        </div>

        <div class="columns small-9">

            <input type="text" id="username"

                    placeholder="Username">

        </div>

    </div>

    <div class="row">

        <div class="columns small-3">

            <label for="password" class="right inline">

                    Password</label>

        </div

        <div class="columns small-9">

            <input type="text" id="password"

                    placeholder="Password">

        </div>

    </div>

    <div class="row">

        <div class="columns small-9 small-offset-3">

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

        </div>

    </div>

</form>

Share :