Mengubah Tampilan Form¶
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 atributtype 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">
submit dan reset yang ditampilkan dalam bentuk tombol, tetapi masih tetap menggunakan elemen input:<input type="submit">
<input type="reset">
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]
submit saja maka kita dapat menggunakan selector seperti berikut:input[type=submit] {
/* properti CSS */
}
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;
}
Contoh Implementasi CSS Attribute Selector pada Elemen Submit | Demo
span yang berbahasa Indonesia berwarna biru, kita dapat mengaplikasikan Attrbute Selector pada elemen link seperti berikut:span[lang=id] {
color: #00F;
}
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 */
}
: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>
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%;
}
sumber: http://bertzzie.com/knowledge/desain-web-dasar/FormStyling.html
