Blog Belajar HTML: 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.

Tuesday, February 17, 2015

Input type color HTML5

No comments:

Post a Comment