Cara Membuat Search Box: Membuat HTML
Dalam contoh ini, kita akan membuat kotak pencarian sederhana yang memerlukan input teks dan termasuk tombol pencarian di sebelah kanan. Meskipun cukup dasar, kotak pencarian ini dapat dengan mudah di-modifikasi agar sesuai dengan website yang berbeda.
Sebelum kita dapat membuat CSS, kita perlu membangun HTML. Kita akan menggunakan skrip struktur umum HTML sebagai tempat skrip kotak pencarian. Jika anda belum mengetahui apa itu skrip struktur umum HTML, anda bisa mengunjungi tutorial “Pengenalan HTML: Struktur Umum Part 1”. Berikut adalah skrip HTML awal.
1
2
3
4
5
6
7
8
9
10
11
12
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<div>Ini adalah div</div>
<span>Ini adalah span</span>
</body>
</html>
|
Kita hapus semua skrip yang berada dalam tag body dan kita ganti dengan skrip berikut:
1
2
3
4
|
<form>
<input class="search" type="text" placeholder="Cari..." required>
<input class="button" type="button" value="Cari">
</form>
|
Disarankan untuk mengetik kode/skrip daripada paste langsung; dengan begitu kita jadi lebih terbiasa untuk memahami isi skrip. Selesai mengetik, simpan dokumen dan buka di browser. Sehingga dalam browser akan tampil seperti gambar berikut:
Hasil Awal Sebelum CSS
Sampai disini kita sudah menciptakan bentuk sederhana dari search box dengan kolom teks dan tombol submit sebelah-nya. Sebelum meneruskan pada pembuatan CSS, mari kita bahas dulu skrip diatas:
placeholder: ini adalah teks yang muncul di kolom pencarian sebelum kita memasukkan masukan apapun. Dalam value dari atribut placeholder ini, kita dapat mengubahnya ke teks apapun sesuka kita.required: Ini memberitahu browser bahwa kotak pencarian memerlukan beberapa masukan agar form bisa bekerja.Cara membuat kotak pencarian: Menambahkan CSS
Sebenarnya kita sudah selesai dalam membuat kotak pencarian, Cuma sangat sederhana dan terkesan sangat membosankan. Supaya terlihat lebih cantik, kita akan menambahkan kode CSS untuk memberikan tampilan yang lebih baik.
Silahkan anda kembali ke Notepad dan ketik-kan skrip dibawah ini tepat dibawah
meta tag title:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
form {
width:500px;
margin:50px auto;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
}
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid #53bd84;
background-color:#53bd84;
color:#fafafa;
}
.button:hover {
background-color:#fafafa;
color:#207cca;
}
|
Setelah itu refresh halaman web anda, maka tampilan halaman web akan tampil seperti gambar berikut ini:
Setelah Penerapan CSS awal
Bagaimana hasilnya? Lebih cantik kan?! Mengubah warna dari
elemen form bisa dibilang cukup mudah dengan menerapkan beberapa tweak CSS.
Mari kita membahas CSS secara lebih rinci:
1
2
3
4
|
form {
width:500px;
margin:50px auto;
}
|
Skrip diatas befungsi untuk menginstruksikan browser untuk mengatur lebar dari form menjadi
500px dan mengatur margin atas dan bawah selebar 50px. 'auto' di sini berarti bahwa kiri / kanan margin diatur secara otomatis.
1
2
3
4
5
|
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
}
|
Skrip ini digunakan untuk style kotak pencarian yang memiliki
class .search. Kita telah menentukan padding atas / bawah 8px dan padding kiri / kanan 15px.
Kita juga telah menentukan warna latar belakang menggunakan nilai RGBA, di mana tiga nilai pertama mengacu pada warna RGB (Red, Green, Blue), dan yang terakhir (‘A’) nilai ini mengacu pada transparansi. Semakin rendah nilai transparansi, akan tampak lebih transparan elemen tersebut.
Contohnya nilai RGB (84, 188, 132) sesuai dengan nilai warna hex
#54bc84.
Contoh Value RGB
Kita juga telah menentukan border selebar
0px. Kenapa kok nilainya 0? Dilakukan hanya sebagai tindakan pencegahan untuk memastikan bahwa browser versi lama tidak akan memberikan border secara default.
1
2
3
4
5
6
7
8
|
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid #53bd84;
background-color:#53bd84;
color:#fafafa;
}
|
Skrip diatas merupakan styling untuk tombol pencarian. Beberapa hal yang perlu diperhatikan di sini:
position: relative – Tombol pencarian, secara default, ditempatkan di sebelah kanan kotak pencarian dengan margin beberapa piksel antara elemen-elemen. Karena kita ingin tombol berada tepat di sebelah kotak pencarian, maka kita mengaturnya dengan posisi relatif.left: -8px – Karena elemen sekarang memiliki posisi relatif, kita bisa menggeser ke kiri dengan memberikan posisi negatif.padding: 6px 15px – Bagian atas atau bawah padding pada bagian tombol kurang lebar, maka kita setting padding agar lebar dari tombol sama seperti lebar pada form.
1
2
3
4
|
.button:hover {
background-color:#fafafa;
color:#207cca;
}
|
Untuk skrip diatas berfungsi untuk mengatur warna button ketika disorot dengan mouse.
Sejauh ini, kita telah membuat kotak pencarian standar yang dapat digunakan pada sebagian besar situs web dengan tambahan beberapa tweak. Tapi bagaimana jika ingin menambahkan sedikit lebih style ke kotak pencarian? Untungnya, kita dapat menggunakan CSS lagi untuk membuat lebih elegan, karena CSS tidak hanya terbatas pada perubahan warna dan menambahkan border.
Membuat Kotak Pencarian: Mengubah Placeholder
Usaha mengubah format teks placeholder dari kotak pencarian akan sedikit lebih rumit. Browser yang berbeda akan menangani teks placeholder secara berbeda pula. Oleh karena itu, setiap perubahan pada elemen membutuhkan pengaturan yang berbeda untuk masing-masing browser.
Di bawah ini, kita akan mengubah warna teks placeholder ke warna merah dan font di-setting ke Helvetica Neue.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
::-webkit-input-placeholder { /* For WebKit browsers */
color: #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
color: #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
::-moz-placeholder { /* For Mozilla Firefox 19+ */
color: #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
:-ms-input-placeholder { /* For Internet Explorer 10+ */
color: #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
|
Setelah kita mengetik-kan skrip diatas dalam
tag style, maka kotak pencarian kita akan tampak seperti gambar seperti ini:
Hasil Akhir
Berikut ini adalah Source Code atau Skrip Akhir:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<style type="text/css">
form {
width:500px;
margin:50px auto;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
}
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid #53bd84;
background-color:#53bd84;
color:#fafafa;
}
.button:hover {
background-color:#fafafa;
color:#207cca;
}
::-webkit-input-placeholder { /* For WebKit browsers */
color: #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
color: #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
::-moz-placeholder { /* For Mozilla Firefox 19+ */
color: #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
:-ms-input-placeholder { /* For Internet Explorer 10+ */
color: #dd3333;
font-family:Helvetica Neue;
font-weight:bold;
}
</style>
</head>
<body>
<form>
<input class="search" type="text" placeholder="Cari..." required>
<input class="button" type="button" value="Cari">
</form>
</body>
</html>
|
Perlu diingat bahwa skrip ini bekerja hanya untuk browser terbaru, jadi perlu setting tambahan pada CSS agar kotak pencarian kita bisa bekerja pada semua browser dan teknik penggunaan CSS diatas menggunakan teknik embedded style/Internal Styles. Untuk menggunakan teknik CSS yang lain, anda bisa mengunjungi artikel “Tips Cara menggunakan CSS pada HTML“
No comments:
Post a Comment