Banner

Cara Membuat Form Menggunakan HTML

form kontak


Dalam sebuah site biasanya terdapat satu atau lebih structure, seperti structure pencarian, registrasi dan lain sebagainya. Structure ini biasa digunakan untuk mengumpulkan information dari pengunjung site.


Sebuah structure, boleh jadi memiliki beragam kontrol, mulai dari content info, Combo box, Catch dan lain sebagainya. Kita akan mempelajari sebagian kontrol yang disebutkan diatas karena kontrol di atas adalah yang withering sering digunakan dalam halaman web.


Pertama-tama, pembuatan sebuah structure diawali dengan tag <form>, dan setiap kontrol-kontrol yang dibutuhkan ditempatkan di dalam tag ini.


Control-control Structure 


Setiap control pada structure dapat dibuat dengan menggunakan tag <input>. Dan yang membedakan tipe dari control tersebut berada pada atribut type (tipe kontrol). Berikut ini adalah sebagian tipe kontrol yang biasa ditemui :

Mark

Mark digunakan untuk memberikan keterangan pada setiap input yang ada. Jika anda perhatikan formulir pendaftaran situs yippee, yang disebut dengan mark adalah yang ditandai berikut ini :


<label for="Name"> Keterangan Information </label>


Atribut for diisi dengan isi dari atribut name pada kontrol yang ingin diberi name.


Content


Control input ini dapat diisi dengan teks yang memiliki individualized organization yang tidak terlalu panjang/hanya satu baris, biasa digunakan dalam structure pencarian, nama dan lain sebagainya.


<label for="nama">Nama Lengkap</label>
<input type="text" name="nama"/>


Jika content information yang akan ditampilkan ingin memiliki nilai, maka tuliskan nilai tersebut di dalam atribut esteem.


<input type="text" name="nama" value="Rian Ariona"/>


Dengan begitu, ketika halaman dibuka, content information ini secara otomatis akan terisi dengan nilai dari atribut esteem.


Content Territory 


Sama halnya dengan Info Content, namun textarea dapat diisi lebih dari satu baris, cocok digunakan untuk isian yang panjang, seperti alamat, deskripsi, atau biodata.


Berbeda dengan kontrol lainnya yang menggunakan tag <input>, content region memiliki tag sendiri yaitu <textarea></textarea>. Dan apa yang terdapat di dalam tag ini adalah esteem dari kontrol tersebut


<label form="alamat">Alamat Lengkap</label>
<textarea name="alamat"></textarea>


Combo Box



Combo Box adalah kontrol yang memiliki pilihan ketika diklik. Pembuatannya sama seperti pembuatan Daftar/Rundown namun dengan label yang berbeda.


<label form="kota">Kota</label>
<select name="kota">
<option>Jakarta</option>
<option>Bandung</option>
<option>Tasikmalaya</option>
</select>



Submit/Catch


Submit atau Catch, berupa tombol yang dapat di klik. Penggunaan atribut esteem pada kontrol ini akan merubah content yang ada di dalamnya.

<input type="submit" value=" kirimkan data"/>


Sebagai latihan, kita coba menggabungkan kontrol-kontrol yang telah anda pelajari sebelumnya menjadi satu structure utuh.


Buatlah record baru, dengan nama document latihan6.html, lalu ketikkan kode HTML berikut pada


<!DOCTYPE HTML>
<HTML>
<head>
<title>Form</title>
</head>
<body>
<form>
<label form="nama">Nama</label>
<input type="text" name="nama"><br>
<label form="alamat">Alamat</label>
<textarea name="alamat"></textarea><br>
<label form="kota">Kota</label>
<select name="kota">
<option>Jakarta</option>
<option>Bandung</option>
<option>Tasikmalaya</option>
</select><br>
<input type="submit" value="kirimkan data">
</form>
</body>
</HTML>


Dalam buku ini, saya tidak akan membahas bagaimana cara memroses information yang dikumpulkan dari structure tersebut, karena dalam HTML kita tidak bisa melakukan compositions pengolahan information. Ingat bahwa HTML hanya digunakan untuk memformat dokumen, bukan untuk memroses information.


Untuk memroses information, kita bisa menggunakan bahasa pemrograman web, seperti Javascript atau PHP atau bahasa pemrograman web lainnya.


Dengan bahasa pemrograman seperti Javascript atau PHP anda dapat mengolah information yang dikumpulkan dari Structure HTML untuk diproses dan dikeluarkan kembali menjadi suatu informasi baru.

Subscribe to receive free email updates:

0 Response to "Cara Membuat Form Menggunakan HTML"

Post a Comment