Saturday, February 14, 2015

Input type month HTML5

Satu lagi atribut baru HTML5 pada input type adalah month. Atribut month menampilkan 2 data sekaligus yaitu bulan dan tahun, meskipun namanya dalam bahasa Indonesia (month) artinya bulan.

Tampilan atribut month di Google Chrome (bahasa Indonesia) seperti berikut:

Tampilan atribut month di Google Chrome.
Seperti yang Anda lihat, data bulan dan tahun ditampilkan dalam bentuk kalender. Anda dengan mudahnya bisa memilih bulan dan tahun secara mudah.

Contoh di atas adalah bulan Februari 2015. Saat dihubungkan dengan php contohnya submit data lewat form, data dari bulan dan tahun di atas bukan Februari 2015 melainkan 2015-02. Artinya, formatnya tahun dahulu kemudian baru bulan.

Berikut adalah skrip dari gambar di atas: typemonth.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag input type month</title>
        </head>
   <body>
    <form action="" method="POST">
    Tanggal: <input type="month" name="bln"/>
    <button type="submit">Test</button>
    </form>

   </body>
 </html>

Ambil nilai month dengan PHP
Dengan bantuan php, Anda dapat mendapatkan nilai month dengan mudah. Misalnya menggunakan metode POST. File aksi diarahkan ke get.php. Langkah pertama, modifikasi typemonth.html: typemonth2.html

<!DOCTYPE HTML>
    <html>
        <head>
          <title>Contoh tag input type month</title> 
        </head>
  <body>
    <form method="POST" action="get.php">
    Tanggal: <input type="month" name="bln"/>

    <br />
    <button type="submit">Ambil Nilai Month</button>
    </form>

  </body> 
</html>

Skrip get.php

<?php
$month=$_POST["bln"];
echo $month;
?>


Catatan: Untuk mengeksekusi kedua file dibutuhkan web server lokal seperti wamp, xamp atau appverserv. Letakkan kedua file di folder htdocs atau www. Selamat mencoba!

Referensi tulisan:
  1. <input>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 14 Februari 2015.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

No comments:

Post a Comment