Setelah sebelumnya kita belajar bagaimana caranya membuat form inputan dengan HTML, selanjutnya kita akan mencoba mengenal berbagai macam type yang ada pada tag inputan. Sebelumnya jika yang masih ingin mengulang kembali atau yang belum sempat baca postingan sebelumnya tentang bagaimana cara membuat form inputan dengan HTML bisa dilihat disini . Oke langsung saja dibawah ini akan saya paparkan beberapa type tag input dimulai dari Text, Multiple, Radio Button dan lain sebagainya.
a. Text
Type text menampilkan input data berupa kotak yang dapat diisi sebaris tulisan
Nama Barang<input type=”text” name=”nama” size=”30″ maxlength=”30″></td>Hasilnya :
Size digunakan untuk menentukan ukuran kotak isian
Maxlenght digunakan untuk menentukan jumlah maksimal karakter yang dapat dimasukkan
b. Multiple
Multiple digunakan untuk menampilkan lebih dari satu pilihan dari daftar tampilan.
Jenis Barang<select name=”jenis”><option value=0 selected> -Pilih Jenis- </option><option value=”elektronik”> elektronik </option><option value=”alattulis”> Alat Tulis </option><option value=”perabot”> Perabot </option></select>
Hasilnya :
c. Radio button
Jenis ini menghasilkan pilihan lebih dari satu , tapi hanya dapat memilih 1 saja.
Kondisi<input type=”radio” name=”kondisi” value=”bagus”> Bagus<input type=”radio” name=”kondisi” value=”agak_rusak”> Agak Rusak<input type=”radio” name=”kondisi” value=”rusak”> RusakHasilnya :
Name pada radio harus diberi nama yang sama, hal ini bertujuan agar form isisan hanya dapat dicentang 1 saja.
d. Textarea
Jenis ini sama seperti jenis text tetapi dapat diisi tulisan yang cukup banyak
Tempat<textarea name=”tempat” cols=”50″ rows=”5″></textarea>Hasilnya :
e. File
Jenis ini digunakan untuk mengupload file dari kamputer
Foto Barang<input type=’file’ name=’foto’/>Hasilnya :
f. Submit
Jenis submit digunakan untuk mengirim data yang sudah diinputkan user ke proses selanjutnya secara bersamaan.
<input type=”submit” name=”Submit” value=”Kirim”>Hasilnya :
g. Reset
Reset digunakan untuk mengosongkan kembalidata yang telah dituliskan oleh user
<input type=”reset” name=”reset” value=”Reset”>Itulah beberapa macam type tag input, semoga bisa menambah pengetahuan kita mengenai pembuatan tampilan pada sebuah halaman web dengan html. Terima kasih
Pada kesempatan kali ini saya akan memberikan pengetahuan tentang Mengenal macam-macam type pada tag input, dimana masing-masing type pada input ini menentukan hasil pada browser nya. Baik berikut ini saya akan memberikan nama-nama type yang akan nanti kita implementasikan diantaranya adalah input type
- text
- number
- button
- url
- radio
- checkbox
- submit
Beberapa macam type input diatas akan kita coba menuliskan script nya dan melihat masing-masing hasilnya, sangat penting untuk membuat sebuah form daftar seperti facebook, email, twitter dll. Nah langsung saja kita coba ketikkan script nya pada text editornya, lalu teman-teman ketikkan script seperti gambar di bawah ini
Kemudian save dan jalankan pada browser nya lalu isikan, maka hasilnya seperti gambar di bawah ini
Berikutnya saya akan menjelaskan Mengenal macam-macam type pada tag input dan masing-masing type yang sudah kita implementasikan
- type=”text” : untuk input angka ataupun huruf jika di input text atau huruf tidak akan merah input nya.
- type=”number” : input ini hanya khusus untuk input angka, jika di isikan huruf maka akan berwarna merah pertanda harus diisikan hanya angka saja.
- type=”email” : input ini hanya boleh di isikan khusus email saja, jika di inputkan selain email maka akan berwarna merah pertanda harus diisikan hanya email saja.
- type=”button” : input ini adalah button klik input, biasanya di pakai untuk kirim data.
- type=”url” : input ini khusus hanya inputan url saja atau halaman website dll, selain url maka akan berwarna merah pertanda harus diisikan hanya url saja.
- type=”radio” : input ini berbentuk bulat, biasanya di pakai untuk menentukan satu pilihan dari beberapa pilihan yang ada.
- type=”checkbox” : input ini sama seperti type=”radio” namun input ini bisa memilih banyak pilihan dari beberapa pilihan.
- type=”submit” : input ini sama dengan type=”button” untuk mengirim data.
Berikutnya kita akan isikan masing-masing input yang sudah kita buat, saya akan input secara asal terlebih dahulu supaya kita tahu input akan berwarna merah pertanda harus di isikan sesuai type nya.
Nah seperti kalian lihat pada gambar di atas ini, input akan berwarna merah jika tidak sesuai dengan input nya. Selanjutnya saya akan mengisi nya sesuai type nya
Bisa teman-teman lihat pada gambar di atas ini, ketika saya isikan sesuai type nya maka tidak akan berwarna merah, dan datanya pasti akan bisa langsung di proses beda halnya jika input berwarna merah data tidak di proses dan mengharuskan kita mengisikan sesuai yang di perintahkan.
Teman-teman juga bisa lihat demo nya disini
Sekian dulu pada tutorial Dumet School kali ini tentang Mengenal macam-macam type pada tag input, kita berjumpa lagi pada artikel berikutnya. Semoga bermanfaat, terimakasih dan sampai jumpa.