Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Beberapa Tipe Input Dalam HTML5

Pada HTML versi sebelumnya, paling yang kita tau ada tipe text, password, submit, dan sebagainya. Tapi dalam HTML5, ada tipe input terbaru lho. Tenaaaang, “Blog & Note of Nurul Imam” akan menjelaskan semua tipe input terbaru dalam html5. Ada apa aja sih ? Tipe input yang baru ini ada color, date, datetime, datetime-local, email, number, month, range, search, tel, time, url, dan week.

Demo Input Type HTML5

Lumayan banyak juga kan, tapi tenang “Blog & Note of Nurul Imam” akan menjelaskan semuanya meskipun dengan penjelasan yang singkat tapi padat. Silahkan lihat dalam contoh penulisan tagnya. Disitu dijelaskan fungsi tag tersebut satu persatu dalam komentarnya.

<!-- Tipe date, datetime, datetime-local, time, week yang digunakan untuk input waktu -->
<p><input type="date" name="ttl"></p>
<p><input type="datetime" name="bdaytime"></p>
<p><input type="datetime-local" name="bdaytime"></p>
<p><input type="time" name="usr_time"></p>
<p><input type="week" name="week_year"></p>

<!-- Tipe email yang mana akan melakukan validasi text berupa email atau bukan -->
<p><input type="email" name="email"></p>

<!-- Tipe month untuk menampilkan bulan -->
<p><input type="month" name="bdaymonth"></p>

<!-- Tipe number hanya membolehkan angka saja yang dimasukkan -->
<p><input type="number" name="quantity" min="1" max="5"></p>

<!--
    Atribut yang bisa dipakai diantaranya
    max - maksimum value
    min - minimum value
    step - interval
    value - default value
-->

<!-- Tipe range biasanya digunakan untuk kontrol slider dll -->
<p><input type="range" name="points" min="1" max="10"></p>

<!--
    Atribut yang bisa dipakai diantaranya
    max - maksimum value
    min - minimum value
    step - interval
    value - default value
-->

<!-- Tipe search digunakan untuk form pencarian mesin pencari -->
<p><input type="search" name="googlesearch"></p>

<!-- Tipe tel untuk memasukkan nomor telp -->
<p><input type="tel" name="usrtel"></p>

<!-- Tipe url untuk memasukkan alamat website -->
<p><input type="url" name="homepage"></p>

Oia, dalam tipe input diatas hanya bisa berjalan di Browser Google Chrome, Safari & Opera. Jadi yang pakai Mozilla Firefox dan lainnya pasti tidak melihat perubahan dalam melihat demonya.

22 Comments

  1. AgriReply

    walah masih terbatas ya utk tampilannya hmm..

    • Nurul ImamReply

      Iya cuma di beberapa browser doank yang bisa nampilin

  2. Index ApkReply

    pantesan, saya tadi lihat demonya kagak ada apa-apa..hehe
    ane pake firepok mas..

    • Nurul ImamReply

      Saya juga make Mozilla Firefox, tapi saya juga pake Safari yang memang bawaan Mac OS :D

  3. Intan SudibjoReply

    kasian yang pake mozilla :D gk bisa merasakan perbedaanya wkwk

    • Nurul ImamReply

      Download Google Chrome ama Opera lumayan gede, koneksi lelet, pasrah dah :D

  4. Mizz AizaReply

    melihat banyak code buatkan saya pening.. hehe..

    • Nurul ImamReply

      Tapi masih tetep setia berdiskusi disini kak :)

      • Mizz AizaReply

        walaupun tidak faham, sebenarnya banyak ilmu yang boleh saya pelajari di sini.. selamat tahun baru 2014.. :D

        • Nurul ImamReply

          Silahkan jika berminat :)

  5. RirinReply

    kalau ada input, pasti ada output ya mas hehe :D

    selamat tahun baru 2014 mas, semoga makin sukses aja ngeblog nya. dan bisa lebih baik dari tahun sebelum nya :)

    • Nurul ImamReply

      Iya nih mudah2an lancar terus ngeblognya ga melempem :D

  6. Index ApkReply

    dateng pagi mas…

    dan mau ngucapin happy new year 2014…hehe

    • Nurul ImamReply

      Selamat juga mas :D

  7. r10Reply

    seandainya bahasa html semudah membaca bahasa indonesia :D

    • Nurul ImamReply

      Seandainya bahasa inggris semudah html :D

  8. Rahasia Hidup SehatReply

    wah boleh juga nih belajar tipe input dalam html5, makasih yah mas tutorialnya sangat bermanfaat.
    Selamat Tahun Baru 2014 yah mas :)

    • Nurul ImamReply

      Iya sama-sama

  9. Indra Kusuma SejatiReply

    Mantap nih kalau di lihat dari Safari bisa.

    Salam,

    • Nurul ImamReply

      Yupsss… Ternyata ada juga yang make safari :D

  10. AlitReply

    bagaimana cara menambah time (waktu) di dalam canvas?

    • Nurul ImamReply

      Tinggal masukin fungsi JavaScriptnya aja mas

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>