Blog Belajar HTML: March 2015

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.