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.
/* 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</span>;
display: <span class="wb6hlyvz4" id="wb6hlyvz4_5" style="height: 16px;">block</span>; 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;
-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; }
</style>
<!-- Some IE7 hacks and workarounds --> <!--[if lt IE 8]>
<style>
/* IE7 needs the fields to be floated as well as the labels */ input, textarea { float: right; } #formButtons { clear: both; } /*
IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
The negative margins are half the element's width/height. */ #contactForm.positioned, .statusMessage { left: 50%; top: 50%; } #contactForm.positioned { margin-left: -20em; margin-top: -16.5em; } .statusMessage { margin-left: -15em; margin-top: -1em; } </style> <![endif]-->
Mari kita lihat beberapa bagian yang menarik dari CSS: 1. Style untuk contact form dan status messages
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
