Mengenal macam-macam type pada tag input

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
• email
• 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.