Blog Belajar HTML: Input type search HTML5

Atribut search adalah atribut baru pada input type HTML5 untuk membuat bidang (masukan) pencarian yang menampung data string (huruf dan angka).

Tampilan di Google Chrome:

Tampilan atribut search HTML5.

Atribut "search" berbeda dengan "text" (input type=text), search (seperti tampilan di atas) lebih user friendly. Bidang pencarian dilengkapi tanda silang (x) di pinggir kanan bidang. Jika Anda klik, kata kunci yang diketik akan dibersihkan. Menekan tombol tombol Esc pada keyboard akan sama hasilnya.

Sintak sederhana: typesearch.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type search HTML5</title>
        </head>
    <body>
        Kata kunci: <input type="search" name="cari" required/>
    </body>
</html>

Ambil nilai search dengan PHP
Dengan bantuan php, Anda dapat mendapatkan kata pencarian. Misalnya menggunakan metode POST. File aksi diarahkan ke get.php. Langkah pertama, modifikasi typesearch.html: typesearch2.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type search HTML5</title>
        </head>
    <body>
        <form method="POST" action="get.php">

Kata kunci: <input type="search" name="cari" required/>


        <button type="submit">Oke</button>
        </form>
    </body>
</html>

Skrip get.php


<?php

$search=$_POST["cari"];

echo $

search;

?>

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 13 Maret 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
input type; ditulis oleh: Anggota Forum Stackoverflow, stackoverflow.com, diakses 13 Maret 2015.

Thursday, March 12, 2015

Input type search HTML5

No comments:

Post a Comment