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:
  1. input; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 20 Maret 2015.

1 comment:

  1. Terimakasih buat artikel ataupun informasinya sob.. mantab..

    http://obattraditional.com/obat-tradisional-nyeri-haid/

    ReplyDelete