Tutorial Belajar Pemrograman Pascal, java, android, CSS, HTML, php, javascript, c++, visual basic, ajax, jquery, game maker, yii framework, dll

Saturday, March 3, 2012


From HTML merupakan tag yang paling penting adalam pemorgraman HTML khususnya dalam pembuatan aplikasi berbasis web. Form menyediakan property masukan yang dapat berupa textbox, check box, radio button, dan button.

Untuk mendkelariskan sebuah from digunakan tag <form>…</form>. Di dalam tag ini di definisikan elemen – elemen form sperti yang telah di sebutkan di atas. Selain tag, elemen form juga dapat menuliskan sembarang teks, tag, maupun image.

Atribut elemen from :
Action                   = lokasi dan nama file (file yang berisi data – data form)
Method                 = [get | post] metode HTTP untuk men-submit form

Properti masukan pada elemen form

1.  Text box<input type="text">
Dignakan untuk memasukan input yang berupa teks.
Size                    = ukuran dari textbox dalam karakter
Maxsize              = maksimal jumlah karakter yang dapat di input
Nama                 = nama variable yang dikirim ke suatu aplikasi
Value                  = akan menampilkan isinya sebagai nilai default

2. Password<input type="password">
Di gunakan untuk memasukan password
Size                     = ukuran textbox dalam karakter
Maxsize               = maksimal jumlah karakter yang dapat di input
Name                  = nama variable yang dikirim ke suatu aplikasi

3. Hidden<input type"hidden">
Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
Name                  = nama dari variable yang dikirim ke suatu aplikasi
Value                  = nilai dari variable

4. Check Box<input type="checkbox">
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
Name                    = nama dari variable yang dikirim ke suatu aplikasi
Value                    = nilai dari variable
Checked (checkbox yang sudah ditandai)

5. Radio Button<input type="radio">
Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
Name                    = nama veriabel yang dikirim ke suatu aplikasi
Value                    = nilai dari variable
Checked (radio button yang sudah di tandai)

6. Push Button<input type="button">
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
Name                    = nama dari variable yang dikirim ke suatu aplikasi
Value                    = label teks di atas tombol

7. Submit<input type="submit">
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.
Name                    = nama dari variable yang dikirim ke suatu aplikasi
Value                    = label teks di atas tombol

8. Image Submit Button<input type="image" src="url">
Digunakan untuk menggantikan tombol standar submit dengan image.
Name                    = nama dari variable ayng dikirim ke suatu aplikasi

9. Reset<input type="reset">
Digunakan untuk mereset semua masukan dalam form.
Value                    = label teks di button

10. Text Area<textarea>…</textarea>
Elemen untuk memasukan teks secara leluasa seperti notepad.
Nama                    = nama dari veriabel yang dikirim ke suatu aplikasi
Rows                     = panjang baris dalam karakter
Cols                       = tiggi kotak

11. Select<select>…</select>
Daftar isi dalam property select menggunakan tag <option>
Size                        = jumlah pilihan yang dapat terlihat
Name                    = nama dari veriabel yang dikirim ke suatu aplikasi

Untuk mencobanya ketikan scrpt berikut pada notepad lalu simpan dengan estensi .HTML lalu jalankan.


<html>
     <head><title>Form</title></head>
     <body>
          <form action="cetak.php" method="post">
            <p>Nama            : <input type="text" name="nama"/></p>
<p>Alamat          : <input type="text" name="alamat"/></p>
<p>Jenis Kelamin :</p>
<input type="radio" name="sex" value="man"/>laki - laki
                <input type="radio" name="sex" value="woman"/>Perempuan
            <p>Pekerjaan :</p>
<select name="pekerjaan">
                <option value="pelajar">Pelajar</option>
                <option value="Peg_negri">Pegawai Negri</option>
                <option value="Buruh">Buruh</option>
                </select>
            <p>Hobby           :</p>
<input type="checkbox" name="hobby" value="Sepakbola"/>Facebookan
              <input type="checkbox" name="hobby" value="Main Komputer"/>Main Komputer
              <input type="checkbox" name="hobby" value="Tidur"/>Tidur
            <p><input type="submit" value="kirim data"/>
              <input type="reset" value="ulangi"/></p>
</form>
</body>
</html>
Maka hasilnya akan seperti di bawah, akan tetapi jangan kaget jika ketika anda mengklik "Kirim Data" semua tulisan yang ada dalam form akan menghilang karna semua tulisan yang anda masukan sedang dalam proses pengiriman namun karna disini kita belum memberi tujuan pada form ini maka data tersebut hanya akan menghilang.


untuk menampilkan data yang di submit maka kita harus membuat sebuah file baru dengan nama cetak.php berikut ini adalah scriptnya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<?php
$nama=$_POST['nama'];
$alamat=$_POST['alamat'];
$sex=$_POST['sex'];
$pekerjaan=$_POST['pekerjaan'];
$hobby=$_POST['hobby'];

echo 'Nama : ';
echo $nama;
echo 'Alamat : ';
echo $alamat;
echo 'Jenis Kelamin : ';
echo $sex;
echo 'Pekerjaan : ';
echo $pekerjaan;
echo 'Hobby :';
echo $hobby;

?>

</body>
</html>
simpan kedua file tersebut dalam satu folder lalu jalankan.

Terima Kasih Telah Mengunjungi Blog Sederhana Ini.

Di Mohon Apabila Anda Ingin Mengcopas Artikel Pada Blog ini Cantumkan URL Sumber.

Sebagai Pengunjung Yang Baik Anda Dapat Meninggalkan Komentar di Blog Sederhana Ini.

Share this post

16 komentar

  1. nah setelah form itu kita isikan, cara menampilkannya gimana?

    ReplyDelete
    Replies
    1. form action="#" method="get">
      "#" diganti dengan nama file untuk memproses tampilan form ini, misalnya form ini dikirim ke file bernama proses.php, maka isi dengan form action="proses.php" method="get">

      Delete
  2. cara membuat "proses.php" nya gimana gan..?

    aku blogger pemula gan, mohon bimbingannya..!

    ReplyDelete
  3. maz, saya membuat form, button, radio button n lainnya di dalam satu frame. unuk agar membuatnya menjadi rapi/lurus gimana selain menggunakan tabel. dtunggu secepatnya ya maz soalx ada tugas untuk hari senin depan... mohon batuannya terima kasih

    ReplyDelete
  4. kalau untuk supaya hasil submitnya kita terima langsung di email gimana bang?

    ReplyDelete
  5. kalau misal data yang d input kluar pas onclick gmn?

    ReplyDelete
    Replies
    1. buka panduan java di blog saya mungkin dapat pencerahan.
      http://jintoples.blogspot.com/search/label/Java

      Delete
  6. Replies
    1. Sama - sama gan,,,
      sering - sering dateng,,,
      baca juga artikel - artikel lain,,,

      Delete
  7. Mantap gan, kalau dikembangin sepertinya bisa untuk membuat kontak email.

    ReplyDelete
  8. gan kalo mau pindah kursor dari satu form ke yang lain dengan tombol enter gimana yah?

    ReplyDelete
  9. Terimakasih banyak mas atas pencerahannya.. salam kenal..

    ReplyDelete

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© Jin Toples Programming
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0