Dalam tutorial ini, Anda akan belajar cara membuat bentuk yang indah dengan pop up kotak pesan menggunakan CSS & Jquery.
- Ini adalah "Hubungi Kami Formulir" tabel menggunakan diciptakan. Tabel memiliki dua kolom. Kolom kiri berisi semua label untuk input field pada kolom kanan.
- CSS3 telah digunakan untuk menghias bentuk.
- Kotak pesan akan muncul ketika cicked pada field input (Cobalah!).
- Formulir ini didukung oleh semua browser mendukung CSS3.
Formulir ini akan berfungsi berbeda pada IE8 dan versi lebih rendah karena memiliki dukungan sangat kurang untuk CSS3.
| Dukungan Browser | » |  |  |  |  |
|---|
| Bahasa | » | CSS3, HTML4 & jQuery |
|---|
|
| Kesulitan | » | Menengah |
|---|
| Perkiraan Waktu Penyelesaian | » | 30 menit. |
|---|
Langkah Untuk Membuat Formulir CSS
- Buat Formulir
- Buat elemen Pesan Popup
- Gaya Formulir menggunakan CSS
- Jquery untuk memicu dan Animate popup.
Langkah 1: Membuat Formulir
Bentuk-bentuk biasanya dibuat dalam format tabel sehingga kita akan membuat Formulir menggunakan tabel.
Tabel ini akan memiliki dua kolom. Satu untuk Pelabelan bidang Masukan. Yang lain untuk elemen kolom input.
Berikut tampilannya tanpa CSS Styling.
Langkah 2: Elemen Pesan Popup
Sekarang kita akan menambahkan pesan Lapangan Masukan terkait di dalam
span elemen tag, tepat di samping Fields Masukan.
Ini
span elemen tag akan bertindak sebagai pesan popup.
Berikut Kode HTML untuk Tabel
Perhatikan table memiliki id="form_table" .
Kita akan menggunakan id ini nanti untuk styling bentuk dan memicu popup menggunakan jQuery.
<Form name = "Form1" metode = "posting" action = "" >
<table border= "0" id= "form_table>"
<caption> Hubungi Kami Formulir </ caption>
<tr>
<th width= "25%>" Nama> </ th>
<td>
<input type= "teks" name= "nama>"
<span> Masukkan Nama Lengkap Anda </ span>
</ Td>
</ Tr>
<tr>
Email <th>> </ th>
<td>
<input type= "teks" name= "email>"
<span> Anda Alamat Email Aktif </ span>
</ Td>
</ Tr>
<tr>
<th valign= "atas>" Alamat> </ th>
<td>
<textarea type= name= "teks alamat" style= "height:80px>"
</ Textarea> <span> Masukkan Alamat Lengkap Anda </ span> </ td>
</ Tr>
<tr>
<th> Username> </ th>
<td>
<input type= "teks" name= "username>"
<span> Ketik username untuk situs anda di sini </ span>
</ Td>
</ Tr>
<tr>
<th> Sandi> </ th>
<td>
<input type= name= "sandi sandi>"
<span> Lebih dari 8 Karakter panjang </ span>
</ Td>
</ Tr>
<tr>
<th> </ th>
<td>
<input type= "mengirimkan" name= "mengirimkan" value= "Kirim Formulir>"
<input type= "ulang" name= "reset>"
</ Td>
</ Tr>
</ Table>
</ Form>
Langkah 3: Gaya Formulir Menggunakan CSS
Sekarang kita akan mengkonversi Contact Form biasa melihat ke dalam bentuk mencari Keren menggunakan CSS Stylesheet.
Kami akan menggunakan gambar latar belakang untuk
caption elemen dan menambahkan beberapa tinggi dan lebar untuk itu.
Para
input boks teks dan
textarea memiliki sudut bulat dan tebal sekitar 2 pixel berwarna abu-abu perbatasan.
Warna latar belakang juga akan berubah bila bidang ini foucused.
Tombol Submit dan Reset memiliki lebar yang sama dan warna latar belakang yang sama dengan field input.
Berikut Kode CSS untuk Formulir
Paste kode ini di dalam
head tag.
<style type= "text/css>"
# Form_table {
background: # 2c2c2c;
border: 4px solid # 0170e4;
width: 450px;
margin: 30px auto;
font-family: arial;
color: # fff;
}
# Form_table th {
text-align: right;
color: # eee;
font-size: 14px;
}
# Form_table td {
position: relative;
width: 40%;
}
# Form_table keterangan {
background: url (gambar / caption.jpg) kiri tengah;
tinggi: 58px;
line-height: 58px;
width: 450px;
font-size: 21px;
font-weight: merah;
}
# Form_table masukan, textarea # form_table {
width: 250px;
background-color: # 353535;
display: inline;
color: # ddd;
border: 2px solid # 444;
margin: 5px 2px;
font-family: arial;
tinggi: 28px;
font-size: 13px;
border-radius: 8px;
-Moz-border-radius: 8px;
-Webkit-border-radius: 8px;
}
# Form_table input [type = "mengirimkan]" masukan, # form_table [type = "ulang]" {
width: 120px;
}
# Form_table masukan: fokus, textarea # form_table: fokus {
background: # 555;
}
# Form_table masukan + span, # form_table textarea + p {
display: none;
background: url (images/message2.png) tidak mengulang-kiri tengah;
line-height: 32px;
font-size: 12px;
font-weight: bold;
color: # 000;
padding: 0px 20px;
position: absolute;
width: 180px;
z-index: 99;
}
</ Style>
Penjelasan
Line 3> # form_table {
→ Selector dari
table memiliki
id="form_table" .
→ Properties seperti warna latar belakang, ukuran dan warna perbatasan, lebar didefinisikan di sini.
Baris 11 th> # form_table {
→ Memilih
th tag dari
table .
→ teks berwarna Putih diterapkan ke meja pos.
Baris 16> # form_table td {
→ Memilih
td tag dari
table .
→ Lebar dan posisi relatif didefinisikan di sini untuk
td tag.
→ posisi
relatif adalah penting di sini, ini akan membantu untuk posisi
span elemen kemudian.
Line 20> # form_table keterangan {
→ Untuk memilih
caption elemen tag.
→ Latar belakang gambar, lebar, tinggi dll dinyatakan di sini untuk
caption tag.
Baris 28 masukan> # form_table, textarea # form_table {
→ Berikut
comma digunakan antara dua penyeleksi untuk menerapkan set properti yang sama.
→ Properties seperti perbatasan, dll backgound, lebar didefinisikan di sini.
→
Rounded Corners telah digunakan di sini untuk teks dan bidang textarea.
Baris 42> # form_table input [type = mengirimkan],
masukan # form_table [type = ulang]
{
→ Untuk memilih
input ladang dengan
type="submit" dan
type="reset" .
→ lebar sama diterapkan pada tombol
submit dan
reset.
Garis 45> # form_table masukan: fokus, textarea # form_table: fokus {
→ Bila
input atau
textarea akan fokus bidang warna latar belakang mereka akan berubah menjadi lebih terang.
Baris 48 masukan> # form_table + span, # form_table textarea + p {
→ Untuk Memilih
span elemen yang tepat di samping
input dan
textarea bidang.
→ Latar Belakang ditambahkan ke
span elemen.
→ Secara default
span elemen akan disembunyikan dari pandangan (menggunakan Properti Display) sampai field input difokuskan.
Langkah 4: Terapkan jQuery Untuk Popup
Para
span unsur tersembunyi dari pandangan sekarang. Kami akan membuat mereka muncul hanya ketika lapangan difokuskan.
Untuk Efek Popup, Perpustakaan jQuery perlu dimasukkan dalam halaman web.
Sertakan Perpustakaan jQuery
jQuery dapat didownload
dari> jQuery.com <.
Kami akan menyertakan jQuery dalam
tag.
Berikut kode:
<head>
<script src= type= "text/javascript jquery-1.5.2.min.js>" </ script>
</ Head>
alternatif cara untuk memasukkan Perpustakaan jQuery pada halaman Web tanpa men-download file jQuery.
Hal ini dapat dilakukan dengan menambahkan
src atribut ke
script tag.
Mengatur nilai
src atribut untuk "ajax/libs/jquery/1.4.2/jquery.min.js http://ajax.googleapis.com/";
<head>
<Script type = "text / javascript" src = "http://ajax.googleapis.com/" "
" "ajax/libs/jquery/1.4.2/jquery.min.js>" </ script>
</ Head>
Kode jQuery
Kode ini akan membuat
span elemen yang tepat di samping
input dan
textarea bidang Popup.
Paste kode ini di dalam
head tag.
<script type=
"text/javascript>"
$ (Dokumen)
siap (fungsi ().
{
$ "
(Input, textarea)." Fokus (function () {
.
$ (Ini) berikutnya "(rentang)" menunjukkan "(lambat)" css "(display, inline)..;"
});
$ "(Input, textarea)
" focusout (fungsi ().
{
$ (Ini)
berikutnya "(rentang)" menyembunyikan "(lambat)..;"
});
});
</ Script>
Penjelasan
Line 3> $ (document). Siap (function () {
→ Fungsi ini hanya akan berjalan ketika halaman (dokumen) beban sepenuhnya.
Baris 4> $ (input, textarea).
Fokus (function () {
→ Fungsi ini memilih masukan dan bidang textarea.
→ Fungsi ini hanya berjalan ketika ladang-ladang terfokus dengan kursor.
Baris 5> $ (ini) berikutnya (rentang)
menunjukkan (lambat)
css (display, inline);...});
→ Para
span elemen yang tepat
next ke ladang akan muncul keluar.
→ Efek pop up akan muncul perlahan-lahan.
→
Tampilan Inline properti ditambahkan ke
span elemen, sehingga pesan tersebut muncul keluar dari sisi kanan.
Line 7> $ (input, textarea).
Focusout (function () {
→ Fungsi ini berjalan ketika acara foucusout terjadi pada
input atau
textarea .
. Baris 8> $ (ini) berikutnya (rentang)
menyembunyikan (lambat);.
→ Efek pop up akan menyembunyikan perlahan.
Buat kalian yang ingin mencoba amplikasi yang tersebut atau buat masukan anda untuk mencoba membuat program khususnya delphi 7 tinggal download aza alias Free kok. amplikasi tersebut di buat menggunakan Delphi 7.
