Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 2] Oleh: Sendy PK
Sekarang kita akan menambahkan CSS pada halaman HTML kita untuk memperindah tampilan form. Sebagian besar CSS posisi form dan status messages di tengah jendela, dan form style dan form fields. <style type="text/css"> /* Add some margin to the page and set a default font and colour */ ...
Sekarang kita akan menambahkan CSS pada halaman HTML kita untuk memperindah tampilan form. Sebagian besar CSS posisi form dan status messages di tengah jendela, dan form style dan form fields. <style type="text/css">
/* Add some margin to the page and set a default font and colour */ body { margin: 30px; font-family: "Georgia", serif; line-height: 1.8em; color: #333; }
/* Set the content dimensions */ #content { width: 800px; padding: 50px; margin: 0 <span class="wb6hlyvz4" id="wb6hlyvz4_6" style="height: 16px;">auto; display: <span class="wb6hlyvz4" id="wb6hlyvz4_5" style="height: 16px;">block; font-size: 1.2em; } #content h2 { line-height: 1.5em; }
/* Add curved borders to various elements */ #contactForm, .statusMessage, input[type="submit"], input[type="button"] { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
/* Style for the contact form and status messages */ #contactForm, .statusMessage { color: #666; background-color: #ebedf2; background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) ); background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% ); border: 1px solid #aaa; -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5); box-shadow: 0 0 1em rgba(0, 0, 0, .5); opacity: .95; }
/* The form dimensions */ #contactForm { width: 40em; height: 33em; padding: 0 1.5em 1.5em 1.5em; margin: 0 auto; }
/* Position the form in the middle of the window (if JavaScript is enabled) */ #contactForm.positioned { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin-top: auto; margin-bottom: auto; }
/* Dimensions and position of the status messages */ .statusMessage { display: none; margin: auto; width: 30em; height: 2em; padding: 1.5em; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .statusMessage p { text-align: center; margin: 0; padding: 0; }
/* The header at the top of the form */ #contactForm h2 { font-size: 2em; font-style: italic;
letter-spacing: .05em; margin: 0 0 1em -.75em; padding: 1em; width: 19.5em; color: #aeb6aa; background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */ border-bottom: 1px solid #aaa; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; }
/* Give form elements consistent margin, padding and line height */ #contactForm ul { list-style: none; margin: 0; padding: 0; } #contactForm ul li { margin: .9em 0 0 0; padding: 0; } #contactForm input, #contactForm label { line-height: 1em; }
/* The field labels */ label { display: block; float: left; clear: left; text-align: right; width: 28%; padding: .4em 0 0 0; margin: .15em .5em 0 0; font-weight: bold; }
/* The fields */ input, textarea { display: block; margin: 0;
padding: .4em; width: 67%; font-family: "Georgia", serif; font-size: 1em; border: 1px solid #aaa; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset; -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset; box-shadow: rgba(0,0,0,.2) 0 1px 4px inset; background: #fff; } textarea { height: 13em; line-height: 1.5em; resize: none; }
/* Place a border around focused fields, and hide the inner shadow */ #contactForm *:focus { border: 1px solid #66f; outline: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
/* Display correctly filled-in fields with a green background */ input:valid, textarea:valid { background: #dfd; }
/* The Send and Cancel buttons */ input[type="submit"], input[type="button"] { float: right; margin: 2em 1em 0 1em; width: 10em; padding: .5em; border: 1px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); box-shadow: 0 0 .5em rgba(0, 0, 0, .8); color: #fff; background: #0a0; font-size: 1em; line-height: 1em; font-weight: bold; opacity: .7; -webkit-appearance: none; -moz-transition: opacity .5s; -webkit-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } input[type="submit"]:hover, input[type="submit"]:active, input[type="button"]:hover, input[type="button"]:active { cursor: pointer; opacity: 1; } input[type="submit"]:active, input[type="button"]:active { color: #333; background: #eee; -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; } input[type="button"] { background: #f33; }
/* Header/footer boxes */ .wideBox { clear: both; text-align: center; margin: 70px; padding: 10px; background: #ebedf2; border: 1px solid #333; } .wideBox h1 { font-weight: bold; margin: 20px; color: #666;
font-size: 1.5em; }
Mari kita lihat beberapa bagian yang menarik dari CSS: 1. Style untuk contact form dan status messages Kita berikan form dan status kotak yang bagus dan lembut dari atas sampai bawah gradien
menggunakan WebKit-gradien dan -moz-linear-gradient, dan kita juga menambahkan drop shadow dengan box-shadow Terakhir, kita memberikan form dan pesan kotak opacity .95 (95%), yang membuat konten berbayang. 2. Posisi form di tengah-tengah window (jika JavaScript diaktifkan) Awalnya, kita hanya menempatkan form inline setelah halaman konten. Hal ini dimaksudkan agar form dapat digunakan pada browser non-JavaScript-enabled tanpa mendapatkan konten. Namun, untuk JavaScript browser, kita ingin form muncul di tengah jendela, dari atas konten.
Pada #contactForm.positioned , menggunakan posisi tetap, menetapkan atas, bawah, kiri dan kanan nilai semua ke nol, dan memastikan bahwa semua 4 margin yang ditetapkan untuk auto. Ini berpusat elemen secara horisontal dan vertikal di sebagian besar browser modern. Nanti kita akan menggunakan JavaScript untuk menambahkan positioned class pada form.
Header di bagian atas form Form "Send us an email ..." header dengan gambar perangko, dengan rule styles #contactForm h2 pada header. Kita memberikan teks gaya italic besar dan huruf keluar sedikit ruang. Kita juga menambahkan margin dan padding untuk membuat ruang di sekitar dan di dalam header. Kita menggunakan beberapa margin kiri negatif (-.75em) pada header untuk memotong padding pada form, sehingga header pergi tepat ke tepi kiri form. Kita juga mengatur lebar header untuk 19.5em sehingga sama persis dengan lebar form.
1. Kita juga mengatur warna heading, memberikan background gelap, posisi gambar thepostage stamp di sudut kanan atas, menambahkan bordertipis di bawah, dan menambahkan sudut atas melengkung. 2. Fields Kita memberikan input dan textarea dengan field font yang menarik,border bulat dengan border-radius, dan gentle inner shadow menggunakan box-shadow. Kita juga mengapung label bidang kiri sehingga mereka duduk di samping bidang. Ketika field difokuskan (diklik atau pindah ke dengan tombol Tab), kita memberikan border warna biru dan menghapus shadow. Kita juga menetapkan outline: tidak ada untuk menghapus garis biru ditambah dengan beberapa browser. Terakhir, kita menggunakan: pseudo-class yang valid untuk memberikan field diselesaikan dengan benar background hijau, bagi mereka browser yang mendukung validasi form HTML5. 3. Tombol Kirim dan Batal input [type = "submit"] selects the Send Email button, while input [type = "tombol"] memilih tombol Batal. Float pada posisi berdampingan, dan menambahkan beberapa margin untuk memberi mereka ruang. Kita berikan fixed width yaitu lebarnya teta[, dan beberapa padding untuk membuat mereka size yang layak. Kita tambahkan rounded border agar batasnya bulat dan drop shadow yang halus, dan tentukan teks dan warna latar belakang. Kita juga buat tombol sedikit transparan (opacity: .7), dan membuat sepenuhnya transparan ketika melayang di atas untuk menyorot mereka. Kita menggunakan transisi CSS memudar opacity perlahan. Terakhir ketika tombol diklik (: aktif) kita
bergerak bayangan di dalam tombol untuk memberikan "ditekan" tampilan, dan memberikan skema warna hitam-putih. Pada Tutorial selanjutnya kita akan membuat file PHP untuk mengirimka email Sampai Ketemu di Tutorial selanjutnya.
Tentang Penulis Sendy PK Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di www.spk.my.id dan Online Shop saya di www.spkshop.web.id
