Blog Belajar HTML: February 2015

Friday, February 27, 2015

Input type week HTML5

Input type week HTML5 digunakan untuk mendapatkan nilai minggu dan tahun. Perhitungannya dengan sistem minggu per tahun. Satu tahun terdiri dari 52 atau 53 Minggu. Jika tanggal sekarang adalah 28 Februari 2015, maka nilai week-nya: Minggu ke-9 di tahun 2015.

Tampilan atribut week di Google Chrome.

Jika memilih Minggu 09, 2015 seperti gambar di atas maka nilai (value) yang didapatkan adalah 2015-W09. Diawali tahun, tanda strip, kemudian W berarti week, 09 berarti minggu ke sembilan.

Secara sederhana penulisan atribut week. weekatribut.html


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Input type week HTML5</title>

        </head>

    <body>

        Pilih Minggu ke: <input type="week" name="minggu" required/>

    </body>

</html>

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

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type week HTML5</title>
        </head>
    <body>
        <form method="POST" action="get.php">
        Pilih Minggu ke: <input type="week" name="minggu" required/>
        <br />
        <button type="submit">Ambil nilai week</button>
        </form>
    </body>
</html>

Skrip get.php


<?php

$week=$_POST["minggu"];

echo $week;

?>

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 28 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Wednesday, February 25, 2015

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.

Saturday, February 21, 2015

Input type url HTML5

Atribut url di HTML5 merupakan atribut untuk validasi url (alamat situs web). Url akan dianggap valid jika terdapat http:// dan tidak terdapat spasi dalam url. Url belum valid meskipun telah terdapat www, jika belum tersedia http://.

Contoh penulisan: typeurl.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type url HTML5</title>
        </head>
    <body>
        <form method="POST" action="">
        Masukkan url: <input type="url" name="alamat_web" required/>
        <button type="submit">Test</button>
        </form>
    </body>
</html>

Output:


Url belum valid karena tidak terdapat http://.

Url juga belum valid karena terdapat spasi.

Url telah valid.

Untuk menghindari url yang terlalu panjang Anda dapat menambahkan atribut maxlength. Misalnya, Anda hanya membolehkan panjarang url sebanyak 50 karakter. Maka ditulis:


<input type="url" name="alamat_web" maxlength="50" required/>

Referensi tulisan:

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

Tuesday, February 17, 2015

Input type color HTML5

Atribut color di HTML5 digunakan untuk menampilkan color picker, memudahkan dalam memilih warna dengan tampilan GUI. Atribut color ditampilkan mirip button, di area tengahnya ditampilkan warna terpilih, default-nya warna hitam.

Tampilan atribut color di Google Chrome:

Tampilan atribut color di Google Chrome.

Jika disubmit data lewat form (dengan bantuan skrip php) maka nilai yang disimpan dari warna yang Anda pilih adalah kode warna tersebut dalam bilangan hexa. Misalnya Anda pilih warna pink maka kode warna hexanya adalah: #ef4769

Warna pink setara dengan #ef4769.

Penulisan umum atribut color HTML5: atributcolor.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Penulisan atribut color HTML5</title>
        </head>
    <body>
        <input type="color" name="warna" />
    </body>
</html>

Ambil kode warna 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 atributcolor.html: atributcolor2.html


<!DOCTYPE HTML>

    <html>

        <head>

<title>Penulisan atribut color HTML5</title>

        </head>

  <body>

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

    Pilih warna: <input type="color" name="warna"/>

    <br />

    <button type="submit">Ambil Kode Warna</button>

    </form>

</body>

</html>

Skrip get.php


<?php

$color=$_POST["warna"];

echo $color;

?>

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 18 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

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:

<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.

Thursday, February 12, 2015

Input type date HTML5

Input type date digunakan untuk memformat bidang isian sesuai format tanggal. Misalnya dimulai dengan hari kemudian bulan setelahnya tahun. Di Google Chrome bahasa Indonesia atribut date ditampilkan seperti berikut:

Tampilan atribut date di Google Chrome.

Atribut date hanya didukung HTML5. Data yang disimpan dari tampilan di atas adalah 1995-02-01. Artinya, formatnya diawali tahun, bulan kemudian hari. Berikut skrip dari gambar di atas.

dateinput.html


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag input type date</title>

        </head>

  <body>

    <form action="">

    Tanggal: <input type="date" name="tgl"/>

    <button type="submit">Test</button>

    </form>

</body>

</html>

Atribut date hanya menyediakan format tanggal tanpa jam dan menit dan detik. Jika ingin pakai jam, menit dan detik gunakan atribut datetime.

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


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag input type date</title>

        </head>

  <body>

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

    Tanggal: <input type="date" name="tgl"/>

    <br />

    <button type="submit">Ambil Nilai Date</button>

    </form>

</body>

</html>

Skrip get.php

<?php
$date=$_POST["tgl"];
echo $date;
?>

Catatan: Untuk mengeksekusi file dateinput2.html dan get.php 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 12 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Saturday, February 7, 2015

Input type email HTML5

Pada HTML elemen <input> type terdapat atribut baru yaitu email. Bidang input yang hanya menerima email. Ini sangat penting untuk memastikan yang diinput harus benar-benar email. Contohnya saat validasi pendaftaran online yang memerlukan data email.

Seperti diketahui salah satu atribut yang harus ada pada alamat email adalah tanda '@' setelah nama email, tanda dot (.) setelah penyedia layanan email, kemudian teks setelahnya, misalnya com, org, net. Inilah yang dibaca oleh atribut HTML5 ini, harus ada.

Contoh: typeemail.html


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag input type email</title>

        </head>

  <body>

    <form action="">

    Email Anda: <input type="email" name="email" required/>

    <button type="submit">Test</button>

    </form>

</body>

</html>

Output:

Pastikan yang diinput harus email.

Note: Atribut required memastikan bidang harus diisi, tidak boleh kosong.

Referensi tulisan:

Easy form validation with HTML5; ditulis oleh: Danny Markov, demo.tutorialzine.com, diakses 06 Februari 2015.

Thursday, February 5, 2015

Input type number HTML5

Pada HTML5, tag <input> memiliki atribut type baru yaitu number. Atribut number digunakan untuk memastikan inputan user hanya berupa angka, tidak diizinkan karakter lain. Atribut ini sangat penting saat validasi data, misalnya data umur. Umur bernilai angka, maka tidak menerima karakter string.

Contoh penggunaan: typeatribut.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag type atribut number</title>
        </head>
    <body>
    Masukkan umur: <input type="number" name="umur" required/>
    </body>
</html>

Output:

Tampilan di Firefox 35.01.

Anda dapat mengetik langsung angka ke dalamnya atau mengklik tanda panah atas dan panah bawah di samping kanan bidang. Arah atas untuk angka menaik, arah bawah untuk menurun.

Klik arah atas atau bawah.

Jika seandainya user memasukkan bukan angka dan mengklik sembarang di area kosong (fokus kursor berpindah dari bidang) maka timbul warna latar merah muda sebagai peringatan bahwa harus diisi dengan angka dan tidak boleh kosong.

Tidak boleh kosong dan harus diisi dengan angka.

Referensi tulisan:

Easy form validation with HTML5; ditulis oleh: Danny Markov, demo.tutorialzine.com, diakses 06 Februari 2015.

Sunday, February 1, 2015

Tag meta charset HTML5

Di HTML5, tag <meta> memiliki atribut baru yaitu charset. Charset digunakan pengkodean karakter yang digunakan dalam halaman web. Di HTML 4, charset sama dengan http-equiv content. Lihat perbedaan penulisannya di HTML5 dan HTML 4:

metahtml4.html


<!DOCTYPE HTML>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <head>
            <title>Ini judul halaman web</title>
        </head>
    <body>
        ini bagian konten..
    </body>
</html>

metahtml5.html


<!DOCTYPE HTML>

    <html>

    <meta charset="utf-8">

        <head>

            <title>Di sini judul halaman web</title>

        </head>

    <body>

        di sini bagian konten..

    </body>

</html>

Pengkodean karakter paling populer adalah utf-8 dan sangat dirokemandasikan karena keamanannya menjanjikan dan populer. Utf-8 juga mendukung tulisan arab, jadi jika halaman web halaman Anda berisi seputar artikel agama yang memerlukan dalil Al-Qur'an dan hadits, maka utf-8 menjadi pilihan utama.

Referensi tulisan:

<meta>; ditulis oleh: Kontibutor MDN, developer.mozilla.org, diakses 01 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.