bikin form dengan CSS dan JQUERY

Dalam tutorial ini, Anda akan belajar cara membuat bentuk yang indah dengan pop up kotak pesan menggunakan CSS & Jquery.

Hubungi Kami Formulir

Name>
Email>
Alamat>
Username>
Sandi>

• 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

1. Buat Formulir
2. Buat elemen Pesan Popup
3. Gaya Formulir menggunakan CSS
4. 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.

Hubungi Kami Formulir

Name>
Email>
Alamat>
Username>
Sandi>

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.

Hubungi Kami Formulir

Name>	Masukkan Nama Lengkap Anda
Email>	Anda Alamat Email Aktif
Alamat>	Masukkan Alamat Lengkap Anda
Username>	Ketik username untuk situs ini
Sandi>	Lebih dari 8 Karakter panjang

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.

Klik Disini untuk Download Contoh Formulir CSS