hai semua, kali ini saya akan membahas materi tentang HTML input types , apa itu input types?? input yang artinya masukan atau data yang masuk , types artinya tipe atau bagian ,nah apa saja tipe input ? banyak sekali , tapi kali ini yang saya kan bahas adalah tipe input yang biasa di gunakan oleh beberapa situs web
- Input type text
tipe ini adalah tipe masukan untuk memasukan suatu text berupa tulisan, angka, simbol,dll. contohnya seperti ini :
nah jadi jika buat seperti contoh diatas, tipe text ,dan nama dari input itu di beri belajar, makan hasilnya :
2. Input type Submit/Button
tipe ini adalah tipe masukan tombol, nah jadi ketika kita menekan tombol ini apa yang akan terjadi , simpelnya seperti ini :
nah, jadi jika dijelaskam , masukan tipe submit, kemudian nama dari tombol itu adalah "itu" dan pada saat di tekan , makan akan menjalankan fungsi "a" isi dari fungsi a
nah ini hasilnya sebelum di tekan , saat kita menekan tombol Daftar, maka yang terjadi adalah :
3.Input type Color
sepertinya namanya , tipe ini adalah untuk memasukan data berupa warna , bisa berupa warna favorit, warna gambar, dll. jadi contohnya :
value disini artinya adalah isi/dalam dari input terserbut, nam arti dari #234567 itu menunjukan warna biru tua , bisa di ganti dengan angka lain
4. Input type Radio/Checkbox
tipe ini adalah tipe yang merupakan yang serting digunakan, contoh nya saat kita mendaftarkan diri untuk mengikuti lomba, pasti ada radio button, yang biasanya disikan untuk jenis kelamin, dan ada juga checkbox yang biasa nya juga saat mendaftarkan ke sekolah , contohnya :
nah, ini adalah contoh penggunaan checkbox dan radio button, perbedaan antara checkbox dan radio button adalah radio button biasanya hanya digunakan untuk memilih satu bagian atau harus memilih salah satu. gak mungkin dong jenis kelaminnya ada dua, maka dari itu, sedangkan checkbox kita bisa memilih 1 atau lebih sesuai yang tertera , pasti dong hobi bisa lebih dari 1 . tapi kegunaannya sama, yaitu masukan yang memilih. sebenarnnya radio button bisa memilih 2 , atau lebih , tapi kelihatan tidak cocok menggunakan radio button, misal radio button nya diisi dengan hobby, kan jadi sedikit agak aneh. nah codingan nya seperti ini :
5. Input type Password
jika dilihat kita sudah tau tipe ini , ya tipe adalah tipe masukan untuk password, biasa nya kita akan menjumpainya ketika kita ingin membuat facebook, BBM, dll. contoh hasilnya :
seperti itulah contohnya , codingannya :
Kemudian setelah kita memahami input types di atas, kita bisa menambahkan attribute atau pelengkap, jadi contoh attribute yang sering di gunakan adalah placeholder, autofocus, maxlength, size, dan readonly. nah mari kita bahas
yang pertama, kita membahas placeholder, apa itu placeholder?? gimana cara meambahkan attribute nya ?? cara sangat simple , hanya masukan attribute apa yang coock atau yang diinginkan ketika attribute tersebut di dalam inputen tersebut . placeholder ini seperti penggati dari text, seperti text yang diluar dimasukan ke dalam text, placeholder hanya bisa di gunakan di Input type TEXT. jadi hasil contohnya :
gambar 1.0
nah contohnya seperti diatas, jadi sebelumnya seperti ini :
gambar1.1
biasa nya hal seperti ini biasa di temukan di beberapa website. yang pasti ini lebih efektif dan tidak memboros tempat. kemudian ada Autofocus, nah ini juga sama hal nya seperti gambar di atas (gambar 1.1) jadi keuntungannya itu adalah kita tidak perlu mengarahkan kursor kita mengclick text tersebut, jadi kita hanaya perlu tambahkan attribute autofocus agar lebih simple.
kemudian ada attribute readonly, maxlength, dan size , readonly, dari artinya kita sudah tahu, bahwa readonly hanya menbaca, tidak bisa diclick di edit atau di ubah, kemudian ada max length yaitu maksimal kita memasukan huruf atau angka dan simbol, dan size ukurun panjang text yang kita inginkan contoh hasilnya :
codingan nya :
ya , cukup sekian pembelajaran kita, sebenarnya masih banyak lagi materi yang belum kita bahas, masih ada input type reset, date, select, email, dan masih bnyak juga attribute yang tidak bisa di bahas satu per satu karena keterbatasan waktu, dll. nah itu semua kalian bisa mencari nya atau browsing di internet, hanya kalian harus mencoba agar mudah memahami. sekian dulu dari saya, tunggu upload pembelajaran dari kami , dan jangan lupa belajar. sekian, terima kasih :)