Blog Belajar HTML: html5

Showing posts with label html5. Show all posts

Wednesday, April 29, 2015

Atribut Placeholder Input Type HTML5

Atribut placeholder digunakan untuk menampilkan informasi singkat mengenai cara menangani bidang (field) yang disediakan. Dengan informasi ini, pengguna bisa memasukkan data seperti yang diharapkan pemilik situs, sehingga data valid.

Sebagai contoh untuk data kontak nomor ponsel. 4 angka pertama mencirikan provider, kemudian diikuti 8 angka dibelakangnya. Maka bisa dibuat contoh formatnya: (9999)-99999999. Dengan ini pengguna bisa paham seperti apa data yang harus dimasukkan.

Elemen yang didukung
Atribut placeholder mendukung elemen input type; text, search, tel, url dan email.

Penulisan sintak atribut placeholder
<input type="type" placeholder="info" />
-info diganti dengan informasi dimaksud.

Contoh: placeholder.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Atribut placeholder HTML5</title>
        </head>
    <body>
<form action="" method="POST">
<label>Nama Anda</label>
<input type="text" name="nama" placeholder="Nama Lengkap...." required />
<br />
<br />
<label>Alamat situs</label>
<input type="url" name="url" placeholder="http://example.com" required />
<br />
<br />
<label>Email</label>
<input type="email" name="email" placeholder="email@example.com" required />
<br />
<br />
<label>Nomor Telepon</label>
<input type="tel" pattern="$\d\d\d\d$-\d\d\d\d\d\d\d" name="telepon" placeholder="(999)-99999999" required />
<br />
<br />
<label>Nomor Ponsel</label>
<input type="tel" pattern="$\d\d\d\d$-\d\d\d\d\d\d\d\d" name="ponsel" placeholder="(9999)-999999999" required />
<br />
<br />
<label>Pencarian</label>
<input type="search" name="cari" placeholder="Kata kunci..." required />
<br />
<br />
        <button type="submit">Oke</button>
    </form>
    </body>
</html>

Tampilan di browser:

Tampilan di browser.

Referensi tulisan:

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

Sunday, April 19, 2015

Input type tel HTML5

Input type tel khusus digunakan untuk memasukkan data nomor telepon.

Deskripsi
Nomor telepon identik dengan kode area, misalnya untuk kota Padang menggunakan 0751, sedangkan di Jakarta menggunakan 021. Contoh lain nomor ponsel diawali dengan 4 angka menandakan kode kartu provider, misalnya 0853 untuk kartu AS, 0819 untuk kartu XL. Dengan ini ditarik kesimpulan nomor telepon dan ponsel memiliki format masing-masing.

Type tel
Untuk memvalidasi nomor telepon dan ponsel yang dimasukkan pengguna maka gunakanlah atribut tel. Anda dapat menentukan format sesuai keinginan.

Format
Dari penjelasan di awal kita menarik kesimpulan untuk nomor telepon formatnya: (9999)-9999999 sementara untuk nomor ponsel (9999)-9999999. Contohnya: (0751)-6294613, untuk nomor ponsel (0853)-56972846.

Sintak
<input type="tel" pattern="pattern" name="name" required />
pattern diganti dengan pattern menggunakan Regular Expresion (RegEx). Name merupakan nama variabel input type, misalnya telepon.

Pattern
Untuk nomor telepon dengan format (9999)-9999999 adalah: $\d\d\d\d$-\d\d\d\d\d\d\d, sedangkan untuk nomor ponsel dengan format (9999)-9999999 adalah: $\d\d\d\d$-\d\d\d\d\d\d\d\d. Huruf d artinya allow digit (hanya menerim angka).

Contoh: typetel.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type tel html5</title>
        </head>
    <body>
<form action="" method="POST">
<label>Nomor Telepon</label>
<input type="tel" pattern="\(\d\d\d\d\)-\d\d\d\d\d\d\d" name="telepon" placeholder="(999)-99999999" required />

<br /><br />
<label>Nomor Ponsel</label>
<input type="tel" pattern="\(\d\d\d\d\)-\d\d\d\d\d\d\d\d" name="ponsel" placeholder="(9999)-999999999" required />
        <button type="submit">Oke</button>
    </form>
    </body>
</html>

Tampilan di browser:

Nomor yang dimasukkan sesuai format.

Nomor belum memenuhi format.

Referensi tulisan:

How to validate phone number in Java (regular expression); ditulis oleh: Mkyong, mkyong.com, diakses 19 April 2015.
tel; ditulis oleh: Kontributor W3, docs.webplatform.org, diakses 18 April 2015. "Copyright © [2015-04] World Wide Web Consortium, (MIT, ERCIM, Keio, Beihang). http://www.w3.org/Consortium/Legal/2015/doc-license"

Monday, March 30, 2015

Minlength dan Maxlength Pada Elemen-Elemen HTML

Anda dapat menentukan jumlah minimal dan jumlah maksimal karakter yang harus dimasukkan pengguna pada atribut yang didukung maxlength dan minlength.

Atribut Minlength
Atribut minlength berfungsi untuk memberi batasan jumlah minimal karakter. Atribut input type yang didukung adalah atribut: text, email, search, password, tel dan url. Selain atribut ini, fungsi minlength diabaikan.

Atribut Maxlength
Atribut maxlength kebalikan dari minlength, memberi batasan maksimal karakter yang bisa dimasukkan pengguna. Berlaku untuk atribut: text, email, search, password, tel dan url. Selain atribut ini, fungsi maxlength diabaikan.

Atribut minlength dan maxlength merupakan atribut baru pada elemen input di HTML5.

Penulisan sintak
<input type="atribut" minlength="angka" maxlength="angka" />

Atribut
text : atribut untuk menampung teks, huruf – angka – tanda baca.
email : atribut untuk hanya menampung alamat email. Email harus valid dengan tanda @.
search : atribut untuk bidang pencarian data.
password : atribut untuk menampung password, karakter yang dimasukkan ditampilkan dalam bullet.
tel : atribut untuk menampung data telepon.
url : atribut untuk menampung alamat situs (url).

Contoh
Contoh ini menggunakan 2 file, file atribut.html dan file get.php. Dibutuhkan web server setidaknya lokal, seperti AppServ, Xampp atau Wamp. Letakkan kedua file di folder www atau htdocs. Eksekusi file dari: http://localhost/atribut.html

Skrip atribut.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Atribut minlength dan maxlength</title>
        </head>
    <body>

<form action="get.php" method="POST">
    <label>Password (min 6 max 10) :</label>
    <input type="password" name="pass" minlength="6" maxlength="10" required/>
        <button type="submit">Oke</button>
    </form>
    </body>
</html>

Skrip get.php


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

Tampilan di browser Google Chrome:

Minimal 6 karakter.

Referensi tulisan:

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

Friday, March 20, 2015

Atribut multiple Input Type Email HTML5

Atribut multiple mampu menampung email lebih dari satu.

Penampung email
Input type email merupakan atribut baru pada HTML5 untuk menerima data alamat email. Namun, tanpa atribut multiple Anda hanya diizinkan memasukkan satu alamat email. Di lain kebutuhan, Anda mungkin disuruh memberikan dua alamat email atau lebih.

Cara kerja
Atribut multiple mengenal satu alamat email dengan alamat email berikutnya dengan perantara koma (,). Formatnya; emailsatu@bla.com, emaildua@bla.com, emailtiga@bla.com dan seterusnya.

Sintak penulisan atribut multiple
Atribut multiple bernilai boolean, jika true berarti aktif. Jika tidak (false) berarti tidak aktif.
Penulisannya: <input type="email" name="emailku" multiple="true" required />

Catatan: atribut multiple juga berlaku untuk input type="file"

Ambil alamat email dengan PHP
Untuk mendapatkan dan menampilkan alamat email yang Anda masukkan butuh bantuan php, html murni tidak bisa. Untuk itu, Anda membutuhkan web server lokal dengan menginstal Wamp, Xampp, atau AppServ di perangkat Anda.

Letakkan file multiple.html dan get.php di folder www (AppServ, Wampp), atau htdocs (Xampp). Akses dari : http://localhost/multiple.html

multiple.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Atribut multiple input type email</title>
        </head>
    <body>

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

<label>Email-email:</label>

<input type="email" name="emailku" multiple="true" required/>
        <button type="submit">Oke</button>
    </form>
    </body>
</html>

get.php


<?php
$email_email=$_POST["emailku"];
echo $email_email;
?>

Uji coba di browser Google Chrome versi 41.0.2272.89 m, screenshot:

Tak menggunakan koma sebagai pembatas
email satu dengan email berikutnya.

Digunakan koma. Klik Oke.

Nama-nama email ditampilkan.

Referensi tulisan:

input; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 20 Maret 2015.

Thursday, March 12, 2015

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.

Friday, March 6, 2015

Input type range HTML5

Input type range merupakan atribut baru pada elemen input HTML5, sebuah kontrol untuk memasukkan angka yang lebih tepat dengan adanya batasan awal dan akhir angka. Pengguna hanya perlu menggeser ke arah kanan untuk angka lebih besar dan ke kiri untuk angka lebih kecil.

Atribut range memiliki nilai default jika programer tidak mendeklarasikannya:

min: angka minimal=0.
max: angka maksimal=100.
value: nilai (angka) yang didapatkan=min + (max-min)/2

Contoh: typerange.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type range HTML5</title>
        </head>
    <body>
        Level keahlian Anda (1-100): <input type="range" name="levelp" min="1" max="100" required/>
    </body>
</html>

Tampilan atribut range di Google Chrome:

Tampilan atribut range.

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

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

Level keahlian Anda (1-100): <input type="range" name="levelp" min="1" max="100" required/><br />
        <button type="submit">Ambil nilai range</button>
        </form>
    </body>
</html>

Skrip get.php


<?php

$range=$_POST["levelp"];

echo $range;

?>

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 - HTML; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 06 Maret 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

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.

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.

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.

Wednesday, January 28, 2015

Tag ol HTML5

Tag <ol> digunakan untuk membuat daftar berurutan, disebut juga ordered-list. Pada HTML5 tag <ol> mempunyai 2 atribut baru yaitu reversed dan start. Reversed menentukan urutan item-item dalam keadaan terbalik, urutan terakhir ada di urutan pertama. Atribut reversed bernilai boolean, true atau false. Sedangkan atribut start menentukan penomoran awal yang tidak biasa, misalnya mulai dari 2 atau 3.

Berlaku juga untuk penomoran huruf (A,B,C) dan angka Roman (I,II,III), tetapi ditampilkan dalam angka, artinya C sama dengan 3 atau III. Seperti diketahui, ol type ada 4 macam selain angka (type="1"), yaitu type="A", type="a", type="I", type="i". Nilai default adalah type="1", jika type lain tidak dideklarasikan.

Contoh atribut start : olstart.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ol reversed start</title>
        </head>
    <body>
        <p>Contoh atribut start angka.</p>
        <ol start="3">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
        
        <p>Contoh atribut start huruf.</p>
        <ol type="A" start="3">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
        
        <p>Contoh atribut start romawi.</p>
        <ol type="I" start="3">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
    </body>
</html>

Output:

Semua nomor awal setara 3.

Contoh ol reversed: olreversed.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag ol reversed start</title>
        </head>
    <body>
        <p>Contoh atribut start angka.</p>
        <ol start="3" reversed="true">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
        
        <p>Contoh atribut start huruf.</p>
        <ol type="A" start="3">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
        
        <p>Contoh atribut start romawi.</p>
        <ol type="I" start="3" reversed="true">
            <li>Pisang</li>
            <li>Jambu</li>
            <li>Terong</li>
        </ol>
    </body>
</html>

Output:

Penomoran jadi terbalik.

Referensi tulisan:

<ol>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 28 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Thursday, January 22, 2015

Tag button autofocus HTML5

Pada HTML5, tag <button> memiliki atribut autofocus. Saat Anda muat halaman dan ditampilkan, fokus kursor akan berada di button. Misalkan pada halaman ada text field, textarea, select maka akan tetap button yang menjadi fokus kursor. Hanya ada satu button yang bisa memakai atribut autofocus.

Atribut autofocus bernilai boolean, true jika autofocus dan false jika tidak.

Contoh: buttonfocus.html


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag buton autofocus</title>

        </head>

    <body>

        <input type="text" /><br />

        <textarea></textarea> <br />

        <select>

            <option>List 1</option>

            <option>List 2</option>

            <option>List 3</option>

        </select><br /><br />

        <button name="btn" autofocus="true">Go</button>

    </body>

</html>

Button dalam keadaan focus ditandai dengan timbulnya warna biru di sekitar pinggir button:

Output autofocus di Firefox 40.

Referensi tulisan:

<button>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 23 Januari 2015.blockquote>About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Thursday, January 15, 2015

Tag a ping HTML5

Di HTML5, tag <a> memiliki atirbut ping. Saat Anda mengklik link (url) yang disertai atribut ping, maka Anda telah mengakses 2 buah link, yaitu link (utama) dan juga link pada atribut ping. Contohnya penulisannya seprti berikut: aping.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag a download</title>
        </head>
    <body>
        <a href="http://tipspengetahuan.com/home.html" ping="http://tipspengetahuan.com/track.php">Link ke tipspengetahuan.com</a>
    </body>
</html>

Saat diklik Link ke tipspengetahuan.com maka Anda juga mengakses http://tipspengetahuan.com/track.php. Akses link yang ke-2 tanpa ditampilkan prosesnya ke Anda. Lalu bagaimana mengujinya? Berikut penulis jelaskan:

1. Penulis membuat tabel tb_stas dengan field berikut:

Tabel tb_stas.

2. Rekam (tracking) akses tipspengetahuan.com/home.html. Jika setiap kali diakses, maka tambah jumlah field count dengan 1.

3. Skrip php-nya seperti berikut: track.php


<?php

define('INCLUDE_CHECK',true);

require ('classgo.php');

$execnow=new tdpgo();

$execnow->conn();

mysql_query("UPDATE tb_stas SET count=count+1, wkt=CURRENT_TIMESTAMP WHERE kat='track'");

?>

4. Selesai.

Penulis kembali mengklik link Link ke tipspengetahuan.com pada contoh aping.html maka jumlah angka field count bertambah menjadi 3, begitu seterusnya. Uji coba ini dilakukan di browser Google Chrome.

Penambahan jumlah field count.

Referensi tulisan:

<a>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 15 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
APingAttribute; ditulis oleh: Kontributor Google Code, code.google.com, diakses 15 Januari 2015.

Monday, January 12, 2015

Tag a download HTML5

Pada tag <a> HTML5 terdapat atribut dowload yang berfungsi sebagai pemberian nama file saat file hendak di dowload. Seperti diketahui, umumnya apa nama file yang berada di server itulah nama file yang Anda download, tetapi dengan atribut download Anda bisa memodifikasinya.

Contohnya, mendownload file txt dari server tipspengetahuan.com bernama note.txt. Nama awal 'note' kita ganti dengan 'File note'. Maka penulisan kodenya seperti berikut:


<a href="note.txt" download="file note">Download note.</a>

Kode di atas hanya demo. Kode ini seharusnya dicoba di web server (seperti di hosting tipspengetahuan.com), yang perlu Anda pahami adalah konsepnya.

Demo
Untuk menguji efek kode di atas, silahkan akses link: http://www.tipspengetahuan.com/membuat-tag-posting-dengan-htaccess-php-mysql-web-591.html

Di bawah gambar ada tulisan Download note klik link tersebut di samping 'Ilustrasi tagging'. Nama awalnya note.txt berubah menjadi file note saat di download.

Link download note.

Nama file berubah menjadi file note.

Selamat mencoba!

Referensi tulisan:

<a>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 13 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
HTML5 download Attribute; ditulis oleh: David Walsh, davidwalsh.name, diakses 13 Januari 2015.

Sunday, January 11, 2015

Tag Iframe Sandbox HTML5

Pada tag <iframe> HTML5 terdapat atribut sandbox yang berfungsi untuk pembatasan izin skrip tambahan pada bingkai iframe, contohnya javascript. Jika atribut sandbox diaktifkan murni tanpa value yang terdaftar maka semua pembatasan skrip ekstra dilakukan.

Contoh sederhanya, tanpa atribut sandbox Anda dapat menggukan plugin Facebook atau Twitter share untuk membagikan artikel ke media sosial meskipun sebuah situs ditampilkan dalam iframe. Lihat perbedaan berikut:

tanpa atribut sandbox: nosanbox.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html"> </iframe>
    </body>
</html>

Tampilan seperti normal:

Tanpa atribut sandbox.

dengan atribut sandbox: withsandbox.html



    
        
            Contoh tag iframe sandbox


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html" sandbox> </iframe>
    </body>
</html>

Tampilan:

Skrip plugin media sosial tidak dizinkan.

Selain javascript beberapa skrip yang diblokir adalah pop ups, form, pointer lock dan top navigation. Untuk mengizinkannya satu per satu, Anda dapat mendeklarasikannya di atribut sandbox:

allow-same-origin: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.

allow-top-navigation: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.

allow-forms: Izinkan submit form (tag form) dalam iframe.
allow-popups: Izinkan window pop ups seperti dari window.open.
allow-scripts: Izinkan javasript di iframe.
allow-pointer-lock: Izinkan konteks browsing Pointer Lock API.
allow-same-origin: Izinkan konten di iframe seperti layaknya di situs asli.
allow-top-navigation: Bisa dibaca di sini.

Contoh penggunaan atribut, misalnya allow-same-origin allow scripts: sandboxproperti.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html" sandbox="allow-same-origin allow-scripts"> </iframe>
    </body>
</html>

Untuk atribut lain, contohnya ganti allow-scripts dengan allow-forms.

Referensi tulisan:

iframe; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 11 Desember 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
HTML <iframe> sandbox Attribute; ditulis oleh: w3schools.com, w3schools.com, diakses 11 Desember 2014

Thursday, January 8, 2015

Tag var HTML

Tag <var> atau variable digunakan untuk menuliskan suatu variabel, contohnya dalam perhitungan matematika. Contoh; rumus persamaan garis lurus: y = mx + c. Output tag <var> berupa tulisan miring.

Format penulisan: <var>...</var>.

Contoh skrip: var.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag var html</title>
        </head>
    <body>
        <p>Rumus persamaan garis lurus: <var>y</var> = <var>mx</var> + <var>c</var></p>
    </body>
</html>

Output:

Tampilan tag var di Firefox.

Referensi tulisan:

<var>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 09 Januari 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Sunday, January 4, 2015

Tag textarea HTML5

Tag <textarea> digunakan untuk menampung teks multi baris. Pada HTML5 <textarea> ditambahkan fitur-fitur di antaranya autofocus, maxlength dan minlength. Fitur-fitur ini membuat texarea tak hanya berfungsi sebagai media penampung teks saja tetapi sudah lebih interaktif.

Atribut dasar <textarea> adalah:

cols: lebar rata-rata karakter di dalam textarea, diisi dengan nilai integer. Nilai defaultnya 20.
rows: tinggi rata-rata karakter di dalam textarea.
name: nama variabel textarea.
disabled: textarea dinonaktifkan.
readonly: teks yang ada di dalam textarea tidak dapat diedit, hanya ditampilkan saja.

Contoh: textarea.html dengan name=deskripsi, cols=22, rows=10 dan disertai teks (bawaan), bisanya kosong.


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
    </body>
</html>

Output:

Output di Firefox.

Contoh 2: textarea2.html dengan atribut readonly.


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh tag textarea html</title>

            <style type="text/css">

            </style>

        </head>

    <body>

        <textarea name="deskripsi" cols="22" rows="10" readonly>Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>

    </body>

</html>

Untuk properti disabled sama seperti contoh di atas ganti readonly dengan disabled.

Textarea HTML5
Beberapa atribut textarea pada HTML5 adalah:

autofocus: posisi kursor fokus pada textarea padanya.
maxlength: membatasi (jumlah) karakter maksimal pada textarea, diisi dengan angka bulat (integer).
minlength: membatasi (jumlah) karakter minimal pada textarea,diisi dengan angka bulat (integer).
required: mengharuskan textarea harus diisi, tidak boleh kosong. Jika kosong timbul warna latar merah jambu sebagai tanda peringatan harus diisi.
placeholder: teks penanda sebagai informasi pengisian textarea. Teks placeholder akan hilang ketika user mengisi (mengetik) teks di textarea.

Catatan: atribut-atribut di atas tidak harus semua dideklarasikan, sesuaikan dengan kebutuhan saja.

Contoh: textarea3.html dengan atribut autofocus, minlength dan required.


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10">Ini teks di dalam textarea, jika tidak ada ini dikosongkan.</textarea>
        <textarea name="deskripsi" cols="22" rows="10" maxlength="200" autofocus required>Ini teks di dalam textarea kedua.</textarea>
    </body>
</html>

Untuk atribut minlength sama dengan maxlength, bila perlu tinggal ganti maxlength dengan minlength.

Contoh textarea4.html dengan atribut placeholder dengan pesan: "Isi dengan data sebenarnya" yang mengharuskan user mengisi dengan data valid (tidak asal isi).


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag textarea html</title>
            <style type="text/css">
            </style>
        </head>
    <body>
        <textarea name="deskripsi" cols="22" rows="10" maxlength="200" placeholder="Isi dengan data sebenarnya" required></textarea>
    </body>
</html>

Selesai. Selamat mencoba!

Referensi tulisan:

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