Membuat Form Lebih Rapi dengan Tabel dan Validasi HTML 5
Terbit pada 2016-10-16, 11:09:49 WIB. Oleh : Fuad Nur Hasan, Dibaca : 3925 kaliMembuat Form Lebih Rapi dengan Tabel dan Validasi HTML 5 - Pada artikel sebelumnya saya telah membahas tentang "Mengenal Perintah Dasar di HTML", jika kalian belum baca silahkan baca terlebih dahulu. Nah pada kesempatan kali ini saya akan membahas tentang bagaimana membuat form yang rapi dengan bantuan tabel. Namun sebelumnya saya akan bahas terlebih dahulu apa saja sih yang ada di dalam form?
Form di HTML atau web programming biasanya berisi input, textarea, select (combo box), option, file. Ini standar nya sebuah form. Untuk contohnya yuk mari kita bahas dibawah ini penerapannya di gabungkan dengan tabel agar lebih rapi.
Silahkan kalian buat sebuah folder di localhost kalian, disini saya pakai nama folder tutorial_fuad, dimana didalam folder ini saya membuat satu folder lagi dengan nama tabel-dan-form. Setelah membuat sebuah folder latihan kalian buat satu file dan simpan di dalam folder kalian dengan nama index.php
Selanjutnya silahkan ketikkan kode dibawah ini :
Penjelasan dari kode diatas :
Kita menggunakan method post didalam form yang kita buat tujuannya agar apa isi formulir yang kita kirimkan tidak terbaca oleh penyadap. Form yang kita buat adalah form standar. Kemudian di dalam tabel ada colspan ini berfungsi untuk menggabungkan 2 kolom atau lebih kalau di excel seperti merge cell. Kemudian beralih ke form input, untuk input type itu ada bermacam-macam seperti dibawah ini :
type="text" berarti inputan berupa text.
type="hidden" berarti bilah inputan tidak akan ditampilkan alias disembunyikan.
type="password" berarti inputan berupa password rahasia.
type="number" berarti inputan hanya nomor saja.
type="email" berarti inputan harus berformat email.
type="submit" berarti akan berfungsi untuk mengirimkan formulir yang kita isi.
type="reset" berarti akan berfungsi sebagai tombol untuk membatalkan isi formulir.
type="radio" berarti akan berfungsi untuk memunculkan option.
type="file" berarti akan berfungsi sebagai button untuk mengambil file dari komputer kita.
lalu berikutnya adalah textarea. Textarea ini berfungsi untuk memasukkan karakter yang jumlahnya banyak. Di dalam text area ini ada cols (untuk jumlah kolom) dan rows (untuk jumlah baris).
Kemudian select (combo box) ini berfungsi untuk memulai pilihan (option). Didalam combo box/select ini Anda bisa melakukan pengembangan isi dalam tag option.
Hasil dari coding diatas adalah dibawah ini
Setelah membuat file index.php sekarang silahkan Anda buat file baru untuk target kita dengan nama output.php. Kemudian ketikkan kode dibawah ini :
Hasilnya bisa Anda praktekkan sendiri. Selamat mencoba sampai disini dulu. Ketemu lagi di tutorial berikutnya menyimpan formulir ke dalam database.
Sekian, jangan lupa di share yah.