Macam macam input type HTML 5

input type html 5 dalam pembuatan html form kita selalu menggunakan tag input di dalam nya, tag yang membentuk field-fiel untuk mengisi data dari form itu sendiri, ada beberapa type input yang bisa kita gunakan untuk membuat field-field sesuai dengan yang kita butuhkan. berikut macam-macam input type yang bisa kita gunakan untuk membuat sebuah form.

1. Input Type: text
adalah sebuah field untuk input text normal, input type ini biasa di gunakan untuk pengisian nama, user name pada sebuah form. sedangkan untuk penulisan htmlnya adalah dengan code berikut.

tampilan dalam browser   [text][/text]

2. Input type: password
dari namanya sudah jelas input dengan type password dapat kita aplikasikan untuk membuat field pengisian password dalam sebuah form. Karakter dalam field password akan ditampilkan sebagai tanda bintang atau lingkaran.
sedang untuk penulisan htmlnya adalah dengan code sebagai berikut.

tampilan di browser [text][/text]

3. Input Type: submit
adalah sebuah input mendefinisikan tombol untuk mengirimkan data formulir masukan ke form-handler.form-handler itu sendiri ditentukan dalam atribut form yang membungkusnya. untuk menuliskan input type submit dalam format HTML dapat di tulis dengan code sebagai berikut.

Tampilan di browser [text][/text]

4. Input Type: radio
input type radio adalah sebuah field yang di gunakan untuk membatasi user memilih satu pilihan saja dari beberapa options yang disediakan. untuk penulisan htmlnya bisa di tulis seperti code di bawah ini.

tanpilan di browser:
[text] rambutan
Jeruk
lain-lain[/text]

5. Input Type: checkbox
input type checkbox hampir sama dengan input type radio namun pada type checkbox user bisa memilih lebih dari satu options yang tersedia dalam sebuah form. untuk penulisan code html nya bisa anda lihat seperti di bawah ini.

Tampilan di browser :
[text] Motor
Mobil [/text]

6. Input Type: button
biasa di gunakan untuk menampilkan allert atau sejenisnya. code penulisan nya seperti ini.

Tampilan di browser : [text][/text]

7. Input Type: number
digunakan untuk membentuk field yang berisi nilai numerik. dalam input type number juga bisa di atur pembatasan angka yang bisa di tampilakan (tergantung dari browser)
misalkan kita akan membuat fiel angka dengan batasan 1 sampai 5 untuk html codenya seperti ini.

Tampilan di browser : [text][/text]

8. Input Type: date
adalah sebuah field yang akan menampilkan tabel kalender seperti date picker dari jquery.cara penulisan code htmlnya sama dengan input type yang lain.

Tampilan dalam Browser : [text][/text]

9. Input Type: color
adalah field yang akan menampilkan color panel namun untuk input type ini masih ada beberapa browser yang belum mendukung jadi input type color tidak akan bekerja ketika browser yang di gunakan oleh user tidak suport.
untuk penulisan code html nya adalah sebagai berikut.

Tampilan dalam browser : [text][/text]

10. Input Type: range
Input yang di gunakan untuk menentukan nominal dalam sebuah jangkauan tertentu, atau yang biasa kita kenal dengan sebutan “slider”.
untuk membuat input type slider bisa di tulis dengan code sebagai berikut.

Tampilan pada browser : [text][/text]

11. Input Type: url
input type url akan otomatis memvalidasi carakter yang di masukkan di dalam nya dimana karakter tersebut harus sebuah format url yang benar
untuk membuatnya tuliskan code html seperti berikut

tampilan pada browser : [text][/text]

12 Input Type: tel
digunakan untuk input nomor telepon. input type tel saat ini hanya bisa bekerja di browser Safari 8.
code penulisan nya seperti di bawah ini

Tampilan Pada Browser : [text][/text]

13. Input Type: search
di gunakan untuk kolom pencarian. input type search pada dasarnya atau fungsinya sama seperti input type text. untuk membuat input type text bisa di tulis dengan code seperti di bawah ini.

Tampilan pada browser : [text][/text]

14. Input Type: email
field yang di gunakan unutk mengisikan alamat email. Tergantung pada dukungan browser, alamat e-mail dapat secara otomatis divalidasi ketika disampaikan.
untuk penulisan code htmlnya adalah sebagai berikut

Tampilan pada browser : [text][/text]

15. Input Type: datetime-local
memungkinkan pengguna untuk memilih tanggal dan waktu local, bukan time zone

Penampakan pada browser : [text][/text]

16. Input Type: datetime
memberikan pilihan kepada user untuk menentukan tanggal dan waktu berdasarkan time zone.

Penampakan nya :[text][/text]

17. Input Type: time
memberikan pilihan kepada user untuk menentukan waktu tanpa menggunakan time zone.

Penampakan : [text][/text]

18. Input Type: week
memberikan pilihan kepada user untuk menentukan minggu dan tahun.

Penampakan : [text][/text]

19. Input Type: month
memberikan pilihan kepada user untuk menentukan bulan dan tahun.

Penampakan : [text][/text]

di atas adalah contoh penulisan input type yang berlaku pada HTML 5 berikut contoh result ketika di buka di browser, ada beberapa input type yang hanya bekerja pada browser-browser tertentu harap untuk di perhatikan, secara garis besar penulisan tag “<input>” untuk setiap type adalah sama hanya attribut “type” yang menentukan jenis input tersebut.

selamat mencoba.
salam programer autis, disini bebas copas


Bagaimana Tanggapan Anda Tentang Artikel Macam macam input type HTML 5 Ini ?..

Suka Suka

Tidak Suka

Membosankan

This post was written by...

– has written 107 posts on Ari Warna.

seorang programer sudah barang tentu tahu dan jago tentang code php, css, html, javascript dan temen-temennya, namun tidak semua programer tahu dan handal tentang kode yang di berikan oleh makluk yang paling misterius yaitu WANITA. di sini ada sisi lain tentang curahan hati canda dan tangis programer autis. ariwarnadotcom [programer juga manusia]

Contact the author

Silence is gold, but talk about a good thing is a pearl.
lets say something about the article in a comment below, or just to saying hello

Leave a Reply