Blog Belajar HTML: Input type time HTML5

Input type time HTML5 adalah sebuah kontrol untuk memasukkan nilai jam dan menit tanpa zona waktu. Format jam menit berupa: 17:22, 10:39, 01:22 atau lainnya.

Berikut tampilan atribut time di Google Chrome:

Tampilan atribut time.

Untuk mengisi jam menit dengan mengklik angka jam atau menit dan mengetiknya dari keyboard atau mengklik panah atas untuk angka menaik atau panah bawah untuk angka menurun.

Saat dihubungkan dengan php dengan motode submit form dengan action POST maka nilai yang diambil dari variabel (name) atribut time adalah persis seperti tampilan, diawali jam kemudian menit, 22:03.

Secara sederhana atribut time ditulis dengan file html: typetime.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type time HTML5</title>
        </head>
    <body>
        Masukkan waktu (jam:menit): <input type="time" name="jam" required/>
        </form>
    </body>
</html>

Ambil nilai time dengan PHP
Dengan bantuan php, Anda dapat mendapatkan kode warna dengan mudah. Misalnya menggunakan metode POST. File aksi diarahkan ke get.php. Langkah pertama, modifikasi typetime.html: typetime2.html


<!DOCTYPE HTML>

    <html>

        <head>

<title>

Input type time HTML5</title></head>

  <body>

    <form method="POST" action="get.php">

Masukkan waktu (jam:menit): <input type="time" name="jam" required/>

    <br />

    <button type="submit">Ambil nilai jam dan menit</button>

    </form>

</body>

</html>

Skrip get.php


<?php

$time=$_POST["jam"];

echo $time;

?>

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

Referensi tulisan:

input; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 26 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Wednesday, February 25, 2015

Input type time HTML5

No comments:

Post a Comment