Cara membuat form menggunakan html
Wednesday, April 11, 2018
Add Comment
 |
| Contoh Form |
Pada sebuah website terkadang kita menemukan satu atau lebih form, seperti form pencarian, form pendaftaran facebook, Twitter, Gmail atau form Pendaftaran mahasiswa baru pada sebuah perguruan tinggi, form disini digunakan untuk mendata pengunjung pada sebuah website.
Ada beberapa kontrol yang dimiliki form untuk membuat dan menyimpan data, diantaranya Text, Combo Box, Text Area, radio button dan lain –lain.
Pembuatan control ini dibuat dengan menggunakan <tag> dan diikuti oleh atribut,atribut disini berfungsi sebagai pemberi informasi tambahan pada tag, informasi ini bisa berupa perintah untuk ukuran, jenis, Warna Text, dll. Setiap atribut diikuti oleh nama dan nilai (value) yang ditulis dengan name=”value”. Nilai (value) diapit oleh tanda kutip, baik tanda kutip satu ( ‘ ) ataupun tanda kutip dua ( “ ). Untuk lebih jelasnya lihat contoh dibawah ini :
<p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt berwarna biru sekaligus tebal</b></font>
Keterangan :
<p> adalalah tag
<font face="verdana" size="12" color="blue"> adalah atribut yang memberi nilai pada tag <p>.
Contoh kontrol dalam pembuatan form :
Label
Label digunakan untuk memberikan keterangan pada inputan, contohnya dibawah ini:
<label for =”name”> Nama Siswa </label>
<label for =”name”> Nama Siswa </label>
 |
| name adalah contoh label |
Text
Control ini digunakan untuk menginput sebuah teks yang tidak terlalu panjang, seperti nama pencarian dll, Contoh :
<label for=”nama”> Nama Siswa : </label>
<input type=”text” name=”nama”/>
Text Area
Text Area digunakan untuk menginput text yang lebih panjang seperti alamat, biodata dll, text area memiliki tag tesendiri yaitu < textarea> </ textarea>, berikut contoh penggunaanya.
<label for=”alamat”> Alamat : </label>
<textarea name=”alamat”> </textarea>
Combo Box
Pada saat mendaftar secara online pada sebuah perguruan tinggi, dan kalian mengisi form pendaftaran pada pilihan agama kalian tinggal klik ada pilihan kebawah, itulah menu Combo Box.
Sebagai contoh :
<label for="agama">Agama</label>
<select name="agama">
<option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
</select>
Submit
Adalah sebuah tombol yang bisa diklik, atribut value pada tombol ini akan merubah text yang telah diisi.
Contoh Skripnya :
<input type="submit" value="Simpan" />
Untuk lebih jelas mari kita praktekkan, buatlah file baru pada web editor kalian dengan nama latihan5.html dan tulislah kode dibawah ini:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Latihan Form</title>
</head>
<body>
<form>
<label for="nama">Nama</label>
<input type="text"name="nama">
<br>
<label for="salamat">Alamat</label>
<textarea name="alamat" ></textarea>
<br>
<label for="agama">Agama </label>
<select name="agama">
<option>Islam</option>
<option>Kristen</option>
<option>Hindu </option>
</select>
<br>
<label for="telp">Telepon</label>
<input type="text"name="telp">
<br>
<input type="button" value= "Simpan">
</form>
</body>
</HTML>
Pada pembahsan ini tidak membahas pemrosesan data pada form diatas, perlu diingat bahwa html hanya digunakan untuk memformat dokumen, agar kita bisa memroses data diatas diperlukan bahasa pemrograman web seperti PHP dan JavaScript yang bisa menyimpan, Edit dan update data sehingga menjadi sebuah informasi.
Kalian bisa melihat contohnya pada postingan saya sebelumnya Membuat CRUD Sederhana menggunakan PHP dan MySQL.
0 Response to "Cara membuat form menggunakan html"
Post a Comment