Terdapat berbagai macam jenis elemen input di dalam form: Show
Dan beberapa tipe input baru pada HTML 5 yang masih belum seluruhnya didukung pada browser:
Atribut elemen input HTML secara umumSemua elemen input pada form bergantung dengan atribut name dalam pengiriman data. Saat data-data pada form dikirim ke server, nama yang tertera di dalam atribut name tersebut akan menjadi nama data yang dikirim. Selain atribut name, setiap elemen input juga dapat ditambahkan atribut readonly dan disabled. Atribut readonly akan menyebabkan input tidak dapat diedit, sedangkan atribut disabled menyebabkan input tidak interaktif dan datanya tidak dikirim, hanya ditampilkan saja. Input text pada HTMLDigunakan untuk menginput teks. Merupakan tipe default dari elemen input. <input type="text" name="telepon" value="021-2020505" />Output: Elemen input tipe teks ini dapat dipakai untuk berbagai macam tipe data. Dapat berupa teks, nama, alamat, tanggal, nomor hp, email dan sebagainya. Akan tetapi sebaiknya dipakai untuk tipe data teks saja. Atribut value dapat digunakan untuk menentukan nilai awal pada input. Input password pada HTMLInput ini sama dengan input tipe teks, hanya saja teksnya tersembunyi. <input type="password" name="password" />Output: Input tipe password juga dapat diberi nilai awal dengan atribut value. Tapi juga dapat dikosongkan seperti di atas. Input textarea pada HTMLTextarea dapat digunakan untuk input teks dengan banyak baris. <textarea name="alamat">Jl. Suka sama senang</textarea>Output: Tidak seperti elemen input, nilai awal pada elemen textarea tidak diletakkan di atribut value, tapi diletakkan di antara tag pembuka dan penutup textarea. Input select pada HTMLInput select digunakan untuk memilih di antara beberapa pilihan. <select name="hobi"> <option value="">--Pilih Hobi--</option> <option value="1">1. Komputer</option> <option value="2" selected>2. Otomotif</option> <option value="3">3. Memasak</option> <option value="4">4. Melukis</option> <option value="5">5. Bernyanyi</option> </select>Output: --Pilih Hobi--1. Komputer2. Otomotif3. Memasak4. Melukis5. Bernyanyi Pilihan di dalam elemen select dinyatakan dengan elemen option. Teks yang tampil diapit oleh tag option, sedangkan nilai yang dikirim ke server dinyatakan dalam atribut value pada elemen option. Kita juga dapat menentukan pilihan awal yang terpilih dengan atribut selected. Input select multiple pada HTMLDengan atribut multiple, elemen select akan berubah tampilannya dan dapat memilih lebih dari satu pilihan. <select name="hobi" multiple> <option value="">--Pilih Hobi--</option> <option value="1">1. Komputer</option> <option value="2">2. Otomotif</option> <option value="3">3. Memasak</option> <option value="4">4. Melukis</option> <option value="5">5. Bernyanyi</option> </select>Output: --Pilih Hobi--1. Komputer2. Otomotif3. Memasak4. Melukis5. Bernyanyi Input checkbox pada HTMLCheckbox pada HTML menggunakan elemen input juga, hanya typenya yang diganti menjadi checkbox. <input type="checkbox" name="hobi[]" value="1" checked/>1. Komputer<br /> <input type="checkbox" name="hobi[]" value="2"/>2. Otomotif<br /> <input type="checkbox" name="hobi[]" value="3"/>3. Memasak<br /> <input type="checkbox" name="hobi[]" value="4" checked/>4. Melukis<br /> <input type="checkbox" name="hobi[]" value="5"/>5. Bernyanyi<br />Output: Jika mengirim data ke server dengan bahasa PHP, atribut name pada checkbox perlu diberi tanda kurung siku seperti di atas agar data hobi menjadi suatu array. Nilai yang terkirim ke server adalah nilai di dalam atribut value. Sedangkan teks yang mendampingi checkbox dapat diketikkan setelah tag input checkbox. Jika diperlukan, dapat menambahkan atribut checked sehingga checkbox tertentu dapat tercentang dari awal. Input radiobutton pada HTMLTipe input radio memiliki fungsi yang sama dengan input select. Memilih satu di antara banyak. Saya lebih menganjurkan menggunakan select karena tampilannya lebih ringkas. <input type="radio" name="hobi" value="1"/>1. Komputer<br /> <input type="radio" name="hobi" value="2" checked/>2. Otomotif<br /> <input type="radio" name="hobi" value="3"/>3. Memasak<br /> <input type="radio" name="hobi" value="4"/>4. Melukis<br /> <input type="radio" name="hobi" value="5"/>5. Bernyanyi<br />Output: Karena radio button bersifat pilihan, tidak perlu menggunakan array pada atribut name. Dan sama seperti checkbox, atribut checked pada radio button menentukan opsi yang terpilih sejak awal. Input file pada HTMLInput file pada HTML berguna untuk memilih dan mengirimkan file.ke server. Agar dapat mengirimkan file, elemen form yang berisi input file harus ditambahkan atribut enctype="multipart/form-data". <form method="post" action="" enctype="multipart/form-data"> <input type="file" name="foto_narsis" /> </form>Output: Input file memiliki tampilan yang berbeda-beda pada setiap browser. Input submit pada HTMLInput submit berbentuk seperti tombol dan biasanya diletakkan di akhir form. Ketika diklik, input submit akan mengirimkan isi form ke server, ke alamat yang tertera pada atribut action pada elemen form. <input type="submit" value="Daftar"/>Output: Nilai pada atribut value akan menjadi tulisan yang tampil pada tombol submit. Input button pada HTMLInput button tampak sama seperti input submit. Akan tetapi input button lebih ditujukan untuk digunakan bersama-sama dengan javascript. Output: onclick adalah salah satu event pada javascript. Di dalam atribut / event onclick tersebut dapat dimasukkan kode ataupun fungsi javascript. Elemen button merupakan perkembangan pada HTML 5 yang memiliki tampilan dan fungsi yang sama dengan input button. Hanya penulisannya saja yang sedikit berbeda. Input hidden pada HTMLSeperti namanya, input hidden tidak tampil pada halaman HTML. Biasanya digunakan untuk meneruskan atau menyimpan variabel dari server pada halaman client. <input type="hidden" name="username" value="cecep" />Karena digunakan untuk menyimpan nilai, biasanya tipe input ini selalu disertai atribut name dan value. Akan tetapi dengan teknologi ajax dan json, tipe input ini sudah agak jarang dipakai. Tipe Input baru pada HTML 5Terdapat banyak tipe input baru yang distandarkan pada HTML 5. Karena masih baru, terkadang tipe-tipe ini masih belum didukung oleh beberapa browser. Berikut tipe-tipe input baru tersebut: Input email dan url pada HTML 5Tipe input ini pada dasarnya sama seperti input teks, terkecuali bila digabung dengan atribut required, browser langsung memvalidasi apakah input tersebut valid atau tidak valid. email: <input type="email" name="email" required /><br /> homepage: <input type="url" name="homepage" required />Output: Input number pada HTML 5Tipe number juga sama dengan input text, kecuali input number hanya dapat diisi dengan angka. <input type="number" name="qty" />Output: Input tanggal pada HTML 5Terdapat beberapa tipe input tanggal, antara lain: date, month, week dan time. Akan tetapi tipe input ini baru didukung oleh chrome saja. Tanggal: <input type="date" name="tanggal" /><br /> Bulan: <input type="month" name="bulan" /><br /> Minggu: <input type="week" name="minggu" /><br /> Waktu: <input type="time" name="jam" />Output: Input range pada HTML 5Input range digunakan untuk memilih angka dalam batasan nilai tertentu. Pilih angka: <input type="range" name="angka" min="0" max="10" value="3" />Output: Input color pada HTML 5 Input color digunakan untuk memilih warna. Pilih warna kesukaan: <input type="color" name="warna_favorit" value="#FFBB54" />Output: PenutupSampai di sini dulu pembahasan kali ini. Selanjutnya, untuk cara memproses data pada form dan input, dapat mempelajari bahasa pemrograman sisi server seperti PHP.
Dalam belajar HTML dasar, Form merupakan materi yang sangat penting untuk dipelajari. Form terdiri dari berbagai komponen / elemen. Elemen-elemen dalam sebuah form berfungsi untuk memasukan data dari user dan mengirimkannya ke server.
Sekarang mari kita bahas Jenis dan fungsi dari elemen form satu per satu : Elemen form yang digunakan untuk memasukan teks (huruf dan angka) dalam satu baris. Lebar karakter defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai keinginan kita.
<form name="form1"> nama Depan : <input type="text" name="nmdpn" maxlength="30" placeholder="nama depan anda"/><br/> nama Belakang :< input type="text" name="nmblk" maxlength="30" placeholder="nama belakang anda"/>hasilnya akan tampak seperti di bawah ini : Elemen form yang digunakan untuk memasukan angka. Lebar karakter defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai keinginan kita. Angka yang dimasukan bisa dibatasi dalam rentang tertentu. Jika nilai yang dimasukan di luar rentang yang ditentukan, maka akan muncul peringatan. Untuk menaikan dan menurunkan nilainya bisa menggunakan tombol naik dan tombol turun. Penulisan : <input type="number" /> Atribut :
<form name="form1"> Jumlah : <input type="number" name="angka" maxlength="10" min="1000" max="1000000" placeholder="Jumlah Hutang Anda"/>hasilnya akan tampak seperti di bawah ini :
Elemen form yang digunakan untuk memasukan tanggal. Kita tinggal memilih tanggal yang diinginkan dari kalender yang disediakan. Penulisan : <input type="date" /> Atribut :
<form name="form1"> Tanggal Lahir: <input type="date" name="tgllahir" />hasilnya akan tampak seperti di bawah ini :
Elemen form yang digunakan untuk memasukan nilai dalam rentang tertentu, nilai defaultnya 0 sampai dengan 100. disajikan dalam bentuk slider yang bisa digeser untuk menaikan dan menurunkan nilai. Penulisan : <input type="range" /> Atribut :
<form name="form1"> Volume : <input type="range" name="rgnilai" min="0" max="100" step="1" />hasilnya akan tampak seperti di bawah ini :
Elemen form yang digunakan untuk daftar / list dalam bentuk drop down. Ada 2 tag yang digunakan yaitu <select> untuk mendefinisilan drop down list dan <option> untuk mendefinisikan isinya. Penulisan : <select ><option> isi </option></select> Atribut :
<form name="form1">Jurusan : <select name="Jurusan" id="jurusan"> <option value="TKJ">Teknik Komputer Jaringan</option> <option value="TSM">Teknik Sepeda Motor</option> <option value="RPL">Rekayasa Perangkat Lunak</option> <option value="AP">Administrasi Perkantoran</option> </select>hasilnya akan tampak seperti di bawah ini : Elemen form yang digunakan untuk memasukan teks (huruf dan angka) lebih dari satu baris. Penulisan : <textarea> Atribut :
<textarea name="pesan" id="pesan" rows="4" cols="50"> Sesuatu yang paling pertama di hisab atas manusia adalah sholat. Jika sholatnya baik maka baik seluruh amalnya. Jika sholatnya buruk maka buruk seluruh amalnya. Bagaimana yang tidak permah sholat ????hasilnya akan tampak seperti di bawah ini :
Elemen form yang digunakan untuk menentukan satu pilihan di antara beberapa pilihan yang disediakan. Penulisan : <input type="radio"> Atribut :
<form name="form1">Jurusan yang dipilih :<br> <input type="radio" name="myRadio" id="myRadio" value="TKJ" checked="checked">Teknik Komputer Jaringan <br> <input type="radio" name="myRadio" id="myRadio" value="TSM">Teknik Sepeda Motor <br> <input type="radio" name="myRadio" id="myRadio" value="RPL">Rekayasa Perangkat Lunak <br> <input type="radio" name="myRadio" id="myRadio" value="AP">Administrasi Perkantoran <br>hasilnya akan tampak seperti di bawah ini :
Elemen form yang digunakan untuk menentukan beberapa pilihan atau semua di antara semua pilihan pilihan yang disediakan. Penulisan : <input type="checkbox"> Atribut :
<form name="form1">Mata Pelajaran :<br> <input type="checkbox" name="mp" id="mp" value="PW" checked="checked">Pemrograman Web <br> <input type="checkbox" name="mp" id="mp" value="JD">Jaringan Dasar <br> <input type="checkbox" name="mp" id="mp" value="SO">Sistem Operasi <br> <input type="checkbox" name="mp" id="mp" value="PK">Perakitan Komputer <br>hasilnya akan tampak seperti di bawah ini :
Penulisan : <input type="submit"> Atribut :
<form name="form1" action="proses.php"> <p align="center"> nama Sekolah: <br> <input type="text" name="nm" id="nm" value="SMK Al-Manshuriyah"><br> Aamat : <br> <input type="text" name="alm" id="alm" value="Nanggerang Salawu"><br>hasilnya akan tampak seperti di bawah ini :
Pada saat tombol proses diklik, maka data nama sekolah dan alamat akan dikirim ke proses.php untuk diolah di dalam proses tersebut. Elemen form yang berupa tombol, digunakan untuk membersihkan semua element form yang berupa isian. Penulisan : <input type="reset"> Atribut :
<form name="form1" action="proses.php"> <p align="center"> nama Sekolah: <br> <input type="text" name="nm" id="nm"><br> Aamat : <br> <input type="text" name="alm" id="alm" ><br><br>hasilnya akan tampak seperti di bawah ini :
Pada saat tombol Bersihkan Semua Data diklik, maka data nama sekolah dan alamat yang seudah diketik akan dikosongkan. Elemen form yang berfungsi untuk menampilkan hasil perhitungan matematika dari 2 atau lebih elemen form input text field, number field, atau range field . Rumus matematikanya sendiri di tulis di dalam tag <form> dengan menggunakan atribut oninput. Penulisan : <output name="x" id="x" for="a b"></output> Atribut :
<form action=""Apabila script di atas di jalankan di browser yang sudah mendukung HTM5, maka akan tampil seperti ini
Hasil dari tag <output> pada gambar di atas ditandai dengan warna kuning pada lingkaran biru. Jika angka ditulis pada number field maka atomatis hasilnya akan berubah. Itulah sedikit penjelasan mengenai beberapa element form dalam bahasa HTML. Pembahasan di atas belum selengkap yang sebenarnya, tapi untuk saya kira cukup untuk sebatas materi dasar. Mudah-mudahan tulisan ini bermanfaat !. |