Mengenal macam-macam type pada tag input

Di kesempatan kali ini saya akan memberikan pengetahuan mengenai Mengenal macam-macam type pada tag input, dimana masing-masing type di input ini menentukan hasil di browser nya. Bagus berikut ini saya akan memberikan nama-nama type yang akan nanti kita implementasikan diantaranya yaitu 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, betul-betul urgen bagi membangun sebuah form daftar seperti facebook, email, twitter dll. Nah seketika saja kita coba ketikkan script nya di text editornya, lalu teman-teman ketikkan script seperti gambar di bawah ini



Pada



Kemudian save dan jalankan di browser nya lalu isikan, karenanya hasilnya seperti gambar di bawah ini



Pada



Berikutnya saya akan menjelaskan Mengenal macam-macam type pada tag input dan masing-masing type yang telah kita implementasikan




  • type=”text” : bagi input angka ataupun huruf apabila di input text atau huruf tak akan merah input nya.


  • type=”number” : input ini hanya khusus bagi input angka, apabila di isikan huruf karenanya akan berwarna merah pertanda mesti diisikan hanya angka saja.


  • type=”email” : input ini hanya boleh di isikan khusus email saja, apabila di inputkan selain email karenanya akan berwarna merah pertanda mesti diisikan hanya email saja.


  • type=”button” : input ini yaitu button klik input, biasanya di gunakan bagi kirim data.


  • type=”url” : input ini khusus hanya inputan url saja atau halaman blog dll, selain url karenanya akan berwarna merah pertanda mesti diisikan hanya url saja.


  • type=”radio” : input ini berbentuk bulat, biasanya di gunakan bagi menentukan satu alternatif dari beberapa alternatif yang terdapat.


  • type=”checkbox” : input ini sama seperti type=”radio” namun input ini dapat memilih banyak alternatif dari beberapa alternatif.


  • type=”submit” : input ini sama dengan type=”button” bagi mengirim data.



Berikutnya kita akan isikan masing-masing input yang telah kita bikin, saya akan input secara asal terlebih dahulu supaya kita tahu input akan berwarna merah pertanda mesti di isikan sesuai type nya.



Pada



Nah seperti kalian lihat di gambar di atas ini, input akan berwarna merah apabila tak sesuai dengan input nya. Berikutnya saya akan mengisi nya sesuai type nya



Pada



Dapat teman-teman lihat di gambar di atas ini, ketika saya isikan sesuai type nya karenanya tak akan berwarna merah, dan datanya pasti akan dapat seketika di proses beda halnya apabila input berwarna merah data tak di proses dan mengharuskan kita mengisikan sesuai yang di perintahkan.



Teman-teman pun dapat lihat demo nya disini



Demikian dulu di panduan Source Code Aplikasi kali ini mengenai Mengenal macam-macam type pada tag input, kita berjumpa lagi di artikel berikutnya. Semoga bermanfaat, terimakasih dan hingga jumpa.




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS