W3.CSS Template

Pada bagian sebelumnya, kita telah mempelajari cara-cara untuk membuat elemen-elemen dari form. Bagian ini akan menjelaskan bagaimana mengubah tampilan form agar menjadi menarik, menggunakan CSS. Perubahan tampilan form menggunakan CSS dilakukan dengan memanfaatkan banyak properti-properti yang telah dipelajari pada bagian-bagian sebelumnya, tetapi pemilihan elemen untuk diubah tampilannya sendiri dapat dilakukan dengan beberapa selector yang belum dipelajari.

Untuk lebih jelasnya, kita dapat langsung melihat contoh-contoh kode untuk perubahan tampilan form.

Memilih Elemen Berdasarkan Atribut pada CSS

Elemen-elemen masukan pada form banyak yang menggunakan atribut yang sama, dengan sedikit perbedaan pada bagian atribut type yang digunakan elemen tersebut. Misalnya, elemen masukan email dan text secara tampilan sama, tetapi memiliki atribut type yang berbeda:

<input type="text">
<input type="email">

Kemudian juga terdapat elemen submit dan reset yang ditampilkan dalam bentuk tombol, tetapi masih tetap menggunakan elemen input:

<input type="submit">
<input type="reset">

Jika kita hanya ingin memberikan properti CSS untuk elemen submit, bagaimanakah kita menetapkan selector yang benar?
Untungnya, CSS menyediakan selector khusus untuk memilih elemen HTML berdasarkan atribut yang ada pada elemen tersebut. Fitur ini dikenal dengan nama Attribute Selector, yang dapat dituliskan sebagai berikut:

input[attribute=value]

Sehingga jika kita ingin memberikan properti CSS tertentu untuk elemen submit saja maka kita dapat menggunakan selector seperti berikut:

input[type=submit] {
    /* properti CSS */
}

sehingga kita dapat mengaplikasikan properti CSS pada elemen tersebut selayaknya elemen-elemen lain:

input[type=submit] {
    background: linear-gradient(to bottom, #0088CC, #0044CC);
    border: 1px solid #0088CC;
    color: #FFF;
    margin: 4px 10px;
    padding: 5px;
    width: 100px;
}

input[type=submit]:hover {
    cursor: pointer;
}

input[type=submit]:active {
    background: #0044CC;
}

yang akan menghasilkan:

Contoh Implementasi CSS Attribute Selector pada Elemen Submit | Demo

menariknya lagi, Attribute Selector dapat digunakan tidak hanya pada elemen-elemen form, melainkan pada elemen lainnya, misalnya untuk membuat semua elemen span yang berbahasa Indonesia berwarna biru, kita dapat mengaplikasikan Attrbute Selector pada elemen link seperti berikut:

span[lang=id] {
    color: #00F;
}

Selain yang telah dijelaskan sebelumnya, Attribute Selector juga masih memiliki banyak fitur untuk menyeleksi nilai di dalam atribut, tetapi pembahasan lengkap tidak akan dilakukan. Jika ingin mempelajari tentang fitur-fitur lengkap dari Attribute Selector, aanda dapat membacanya di sini.

Mengubah Tampilan Validasi Elemen Form

Seperti yang telah dipelajari pada bagian Validasi Masukan pada Form, HTML secara standar telah menyediakan tampilan untuk validasi masukan dari pengguna. Seperti elemen-elemen lain pada HTML, tentunya kita dapat mengubah tampilan validasi dengan menggunakan CSS. Sayangnya, kita hanya dapat mengubah tampilan elemen form, bukan “pop up” teks seperti yang tampak pada gambar Contoh Pesan Kesalahan Pengisian Email pada HTML.
Begitupun, kita tetap dapat memberikan tampilan visual kepada pengguna ketika sedang mengisikan form. Misalnya, kita dapat memberikan tanda kesalahan untuk elemen yang belum valid, dan tanda cek pada elemen yang sudah valid. Untuk mengubah tampilan elemen-elemen yang telah valid dan belum valid pada HTML, CSS menyediakan pseudo-selector :valid dan invalid, yang memiliki fungsi sesuai dengan namanya:

input:valid {
    /* tampilan ketika valid */
}

input:invalid {
    /* tampilan ketika invalid */
}

CSS bahkan menyediakan pseudo-selector :required untuk elemen-elemen yang diberikan atribut required, sehingga kita dapat mengubah tampilan elemen tersebut ketika sudah diisikan atau belum, seperti berikut:

input:required:invalid {
    /* elemen wajib diisi, belum diisi */
}

input:required:valid {
    /* elemen wajib diisi, sudah diisi */
}

Mengubah Tampilan Elemen yang Sedang Diisikan Pengguna

Seperti elemen yang valid dan tidak valid, CSS juga memberikan sebuah pseudo-selector untuk elemen-elemen masukan form yang sedang diisikan pengguna. Pseudo-selector yang kita gunakan untuk kasus ini yaitu :focus.

input:focus {
    /* tampilan ketika pengguna mengisikan masukan */
}

Demo Perubahan Tampilan Form

Dengan berbagai selector yang telah dibahas sebelumnya, kita dapat mengaplikasikan dan mengkombinasikan selector-selector tersebut untuk mendapatkan tampilan form yang lebih baik daripada tampilan form standar. Misalnya, untuk form berikut:

<form action="test.html" method="post">
    <h1>Form Pendaftaran</h1>

    <fieldset id="UserDataFields">
        <legend>Data pengguna (wajib diisikan seluruhnya)</legend>

        <div class="control-group">
            <label for="Register[Username]">Nama Pengguna</label>
            <input type="text"
                   name="Register[Username]"
                   id="RegisterUsername" required>
        </div>

        <div class="control-group">
            <label for="Register[Password]">Password</label>
            <input type="password"
                   name="Register[Password]"
                   id="RegisterPassword" required>
        </div>

        <div class="control-group">
            <label for="Register[PasswordConfirm]">
                Konfirmasi Password
            </label>
            <input type="password"
                   name="Register[PasswordConfirm]"
                   id="RegisterPasswordConfirm" required>
        </div>

        <div class="control-group">
            <label for="Register[Email]">Email</label>
            <input type="email"
                   name="Register[Email]"
                   id="RegisterEmail" required>
        </div>
    </fieldset>

    <fieldset id="SelfInfo">
        <legend>Data diri</legend>

        <div class="control-group">
            <label for="Register[Sex]">Jenis Kelamin</label>
            <select id="RegisterSex" name="Register[Sex]">
                <option value="pria">Pria</option>
                <option value="wanita">Wanita</option>
            </select>
        </div>

        <div class="control-group">
            <label for="Register[Birthday]">Tanggal Lahir</label>
            <input type="datetime-local"
                   name="Register[Birthday]"
                   id="RegisterBirthday]">
        </div>
    </fieldset>

    <fieldset id="FormAction">
        <legend>Selesai mengisikan form?</legend>

        <input type="reset" value="Hapus Form">
        <input type="submit" value="Daftar">
    </fieldset>
</form>

kita dapat mengaplikasikan CSS berikut:

body {
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 12px;
}

form {
    margin: 0 auto;
    width: 960px;
}

form > h1 {
    border-bottom: 1px solid #E5E5E5;
    font-size: 1.5em;
    line-height: 2.5em;
    margin-bottom: 1em;
    text-align: center;
    width: 100%;
}

fieldset {
    border: none;
}

fieldset > legend {
    font-size: 1.25em;
    line-height: 2.5em;
}

input {
    display: inline-block;
    vertical-align: center;
}

input:required:invalid,
input:focus:invalid,
input:required:valid {
    background-position: 97.5% center;
    background-repeat: no-repeat;
}

input:required:invalid,
input:focus:invalid {
    background-image: url("http://i.imgur.com/NSaK8yt.png");
}

input:required:valid {
    background-image: url("http://i.imgur.com/ttb7yp4.png");
}

input[type=submit],
input[type=reset] {
    background: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    border: 1px solid #999;
    margin: 4px 10px;
    padding: 5px;
    width: 100px;
}

input[type=submit]:hover,
input[type=reset]:hover {
    cursor: pointer;
}

input[type=submit]:active,
input[type=reset]:active {
    background: #D4D4D4;
}

input[type=submit] {
    background: linear-gradient(to bottom, #0088CC, #0044CC);
    border: 1px solid #0088CC;
    color: #FFF;
}

input[type=submit]:active {
    background: #0044CC;
}

select,
input[type*=date],
input[type=text],
input[type=tel],
input[type=email],
input[type=url],
input[type=password] {
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 5px;
    width: 225px;
}

select:focus,
input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    border-radius: 5px;
    box-shadow: inset
                0
                1px 1px
                rgba(0, 0, 0, 0.075),
                0 0 8px
                rgba(82, 168, 236, 0.6);
    outline: 0;
}

.control-group {
    margin: 10px 0;
}

.control-group > label {
    display: inline-block;
    text-align: right;
    width: 20%;
}

#FormAction {
    border-top: 1px solid #C5C5C5;
    margin-bottom: 1em;
    text-align: center;
    width: 100%;
}

rabiynet

Add Comment

artikel

Sabtu, 13 Juni 2015

RABIYNET

PKP, PKA, PKN, Lelang Jabatan, Tugas Kuliah, Skripsi, Tesis

Mengubah Tampilan Form

Memilih Elemen Berdasarkan Atribut pada CSS

Mengubah Tampilan Validasi Elemen Form

Mengubah Tampilan Elemen yang Sedang Diisikan Pengguna

Demo Perubahan Tampilan Form