Mengenal Tag Form Pada HTML

Kegunaan Form


Form adalah satu-satunya cara sebuah dokumen input dari para pengunjung homepage kita. Kemudian hasil input dari from ini dapat kita manipulasi dengan program-program CGI yang ada di website server kita, atau paling tidak dikirim ke alamat email kita.

Komponen-komponen umum dalam sebuah formulir adalah textbox, push button, radio button, checkbox dan listbox. Masing-masing komponen ini mempunyai fungsi yang khusus, radio button misalnya, dipakai jika kita ingin pengunjung hanya boleh memilih satu di antara beberapa pilihan yang mungkin.

Sebuah form didefinisikan dengan <form>.
<form>
          <!-- element form -->
</form>

Element-Element Form
  • Textbox
  • Password
  • Hidden Text
Ketiga jenis komponen input di atas ini mempunyai fungsi yang mirip dan tag yang di pakai pun juga sama. Textbox berfungsi untuk menerima input berupa data karakter, Password dipakai untuk menerima password (data yang dketik ditampilkan sebagai bintang) dan Hidden text dipakai untuk melewatkan data tanpa menampilkannya di formulirnya sendiri.

Ketikkan dokumen di bawah ini :
<html>
    <head>
        <title>Form Ke 1 </title>
    </head>

    <body>
   
        <form>
            Masukkan Nama Anda :
                <input type="text" name="nama" size="" value="" />
        </form>
            <!-- Website Complete Coding Blogspot -->
    </body>
   
</html>

Hasilnya seperti di bawah ini :

http://websitecompletecoding.blogspot.co.id/
Komponen Textbox

Jika sudah berhasil dengan dokumend diatas, coba tambahkan dokumen di atas, seperti tampak di bawah ini :
<html>
    <head>
        <title>Form Ke 1 </title>
    </head>

    <body>
   
        <form>
            Masukkan Nama Anda :
                <input type="text" name="nama" size="" value="" /> <br>
            Masukkan Password Anda :
                <input type="password" name="pass" size="10" value=""> <br>
                <input type="hidden" name="status" value="member">
        </form>
            <!-- Website Complete Coding Blogspot -->
    </body>
   
</html>
Maka akan menghasilkan tampilan seperti berikut ini :

http://websitecompletecoding.blogspot.co.id/
Komponen text password

Input tipe text akan menampilkan text yang diketikkan dan type password akan menggantikan karakter yang diketikkan dengan simbol bintang. Sedangkan input tiype hidden tidak ditampilkan akan tetapi datanya akan di kirim ke server juga.


Tombol Submit Dan Reset

Form akan di proses oleh server jika kita menyediakan mekanisme untuk mengirim form tersebut. Dalam hal ini digunakan tombol submit. Jika tombol ini di-klik maka form akan dikirim ke server.

Perhatikan tambahan yang diberikan pada komponen sebelumnya :
<html>
    <head>
        <title>Form Ke 1 </title>
    </head>

    <body>
   
        <form>
            Masukkan Nama Anda :
                <input type="text" name="nama" size="" value="" /> <br>
            Masukkan Password Anda :
                <input type="password" name="pass" size="10" value=""> <br>
                <input type="hidden" name="status" value="member">
                <input type="submit" name="tombol">
        </form>
            <!-- Website Complete Coding Blogspot -->
    </body>
   
</html>
Tampilan yang akan muncul seperti di bawah ini :

http://websitecompletecoding.blogspot.co.id/
Komponen Submit Button

Pesan dalam tabel secara default diberikan "Submit". Nilai ini dapat diubah dengan memberikan atribut value dengan isi adalah pesan yang kita inginkan.

Misalnya :
value="kirim"

Hidden Field

Komponen form hidden digunakan untuk mengirim data ke server dimana nilai sudah ditentukan oleh penulis program. Pada contoh sebelumnya dikirim variabel request bernama status dengan nilainya adalah member.

Contoh:
<input type="hidden" name="status" value="member" />

Dari sini kita sudah bisa membangun subah database yang di kirim server secara sederhana, namun belum terkoneksi terkoneksi proses datanya dari form yang di terima atau yang sudah terinput.

Postingan terkait:

Belum ada tanggapan untuk "Mengenal Tag Form Pada HTML"

Posting Komentar