Halo gan. Sebelumnya saya sudah membuat Tutorial HTML 5 tentang drag and drop, dan kali ini saya akan memberi tahu anda, beberapa input type yang spesial, atau kita bisa katakan khusus hanya da pada HTML 5. Tidak semua code ini support dengan Web Browser, maka dari itu, saya juga akan memberikan nama nama web browser yang Mensupport Codingan Ini. Input Type: Color Fitur ini dapat digunakan a...

Jenis Jenis Input Type Yang Hanya Ada di HTML 5

Halo gan. Sebelumnya saya sudah membuat Tutorial HTML 5 tentang drag and drop, dan kali ini saya akan memberi tahu anda, beberapa input type yang spesial, atau kita bisa katakan khusus hanya da pada HTML 5. Tidak semua code ini support dengan Web Browser, maka dari itu, saya juga akan memberikan nama nama web browser yang Mensupport Codingan Ini.


Input Type: Color
Fitur ini dapat digunakan agar pengguna memilih warna.

Hanya Berlaku Pada Web Browser / Web Browser Support: Google Chrome, Opera
Codenya:

Pilih Warna Favorit Anda: <input type="color" name="favcolor">


Maka akan jadi seperti ini

Pilih Warna Favorit Anda:

 


Input Type: Date
Fitur ini dapat digunakan agar pengguna Tanggal.

Hanya Berlaku Pada Web Browser / Web Browser Support: Google Chrome, Opera, Safari
Codenya:

Birthday: <input type="date" name="bday">


Maka akan jadi seperti ini

Birthday:

 


Input Type: Datetime
Fitur ini dapat digunakan agar pengguna Tanggal dan Bagian Waktu.

Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari
Codenya:

Birthday: <input type="date" name="bday">


Maka akan jadi seperti ini

Birthday (date and time):

 


Input Type: Datetime Local
Fitur ini dapat digunakan agar pengguna Tanggal dan Bagian Waktu. Tidak menggunakan Zona Waktu.

Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari
Codenya:

Birthday (date and time): <input type="datetime-local" name="bdaytime">


Maka akan jadi seperti ini

Birthday (date and time):

 


Input Type: Email
Fitur ini dapat digunakan agar pengguna Dapat memasukan email, tanpa di verifikasi email check

Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Mozilla Firefox, Google Chrome
Codenya:

E-mail: <input type="email" name="usremail">


Maka akan jadi seperti ini

E-mail:


Input Type: Month
Fitur ini dapat digunakan agar pengguna Dapat memilih Bulan

Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari, Google Chrome
Codenya:

Birthday (month and year): <input type="month" name="bdaymonth">


Maka akan jadi seperti ini

Birthday (month and year):


Input Type: Number
Fitur ini dapat membuat pengguna memilih angka

Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari, Google Chrome
Codenya:

Total: <input type="number" name="quantity" min="1" max="5">


Maka akan jadi seperti ini

Total:


Input Type: Range
Fitur ini dapat membuat pengguna memilih sebuah angka rata rata

Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari, Google Chrome
Codenya:

<input type="range" name="points" min="1" max="10">


Maka akan jadi seperti ini


Input Type: Search
Fitur ini dapat membuat kotak search dengan program sederhana

Hanya Berlaku Pada Web Browser / Web Browser Support: Safari, Google Chrome
Codenya:

Search Google: <input type="search" name="googlesearch">


Maka akan jadi seperti ini

Search Google:


Input Type: Tel
Fitur ini dapat membuat telephone input

Hanya Berlaku Pada Web Browser / Web Browser Support: Belum saya ketahui
Codenya:

Telephone: <input type="tel" name="usrtel">


Maka akan jadi seperti ini

Telephone:


Input Type: Time
Fitur ini dapat membuat time input

Hanya Berlaku Pada Web Browser / Web Browser Support: Google chorme, opera, safari
Codenya:

Select a time: <input type="time" name="usr_time">


Maka akan jadi seperti ini

Select a time:


Input Type: URL
Fitur ini dapat membuat URL Input

Hanya Berlaku Pada Web Browser / Web Browser Support: Google chorme, opera, Mozilla Firefox
Codenya:

Add your homepage: <input type="url" name="homepage">


Maka akan jadi seperti ini

Add your homepage:


Input Type: Week
Fitur ini dapat membuat visitor memilih bulan pada form yang ada

Hanya Berlaku Pada Web Browser / Web Browser Support: Google chorme, opera, Safari
Codenya:

Select a week: <input type="week" name="week_year">


Maka akan jadi seperti ini

Select a week:


About Author

Yudhistira Bayu W

Seorang pelajar tampan dan rupawan yang mencoba belajar coding.


Comment & Discussions

  • terima kasih info nya. namun, sepertinya google chrome sekarang jauh labeih baik untuk HTML5 ketimbang Mozzila Firefox.

    • Yudhistira Bayu W

      iya bro. Sekarang google chrome banyak support code di HTML5 juga.


  • Meyta
    wah keren juga nih :D , saya biasanya harus download js dulu buat nampilin datepicker dll. tapi sayangnya web aplikasi yg saya buat harus lolos uji diminimal 5 browser termasuk firefox, gimana ya? ada solusi?

  • keren nih input type yg date,gag usah ribet coding2 pake javascript
    thanks bro

  • Please LOGIN before if you want to give the comment.