Kreu Aŭtomaten Retpoŝton en Eniga Formo kun JQuery
Hai Ketemu lagi bersama saya pria tampan asli sunda hehe, tutorial kali ini adalah membuat autocomplete email di dalam sebuah form.
Terkadang ketika memasukan email di dalam sebuah Form Input harus ketik nama domain yang sama berkali-kali, ini sedikit menyita waktu kita untuk memasukan email, nah tutorial kali ini adalah solusi untuk memudahkan kita untuk pengetikan email dengan domain yang sama.
Pertama-tama kita buat file index.html baru, lalu kita masukan jquery.email-autocomplete.js dan fungsi jquery seperti contoh dibawah ini
</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.email-autocomplete.js"></script>
<script>
$( document ).ready(function() {
$("#emailaddress").emailautocomplete({
domains: ["andeznet.com","facebook.com","gmail.com","yahoo.co.id","ymail.com"] //Tambahkan domainya disini
});
});
</script>
</html>Perhatikan pada jquery dibawah ini
$( document ).ready(function() {
$("#emailaddress").emailautocomplete({
domains: ["andeznet.com","facebook.com","gmail.com","yahoo.co.id","ymail.com"] //Tambahkan domainya disini
});
});Pada bagian domain kita bisa memasukan domain yang kita inginkan seperti facebook.com, gmail.com, ymail.com dan lain-lain.
Sekarang kita buat form dan field baru untuk email nya seperti contoh script dibawah ini
<form class="form-horizontal" id="form-input" method="post" role="form" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-1 control-label no-padding-right" for="username"><b>Email : </b></label>
<div class="col-sm-1">
<input type="email" class="form-control emailaddress" id="emailaddress" placeholder="Masukan email anda">
</div>
</div>
</br>
<span class="help-block">Tekan tombol tabs untuk autocomplete email.</span>
</form>
Setelah kita buat field kita tambahkan sedikit css untuk memberi blur pada tulisan domain yang nanti akan muncul otomatis seperti dibawah ini
css nya seperti dibawah ini :
<style>
form { max-width: 600px; margin: 0 auto;}
input{
color:#333;
}
.eac-sugg{
color:#ccc;
}
</style>
Script lengkap bisa cek dibawah ini
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Autocomplete email di dalam sebuah form</title>
<!--Sisipkan Bootstrap serta JQuery yang diperlukan-->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<style>
form { max-width: 600px; margin: 0 auto;}
input{
color:#333;
}
.eac-sugg{
color:#ccc;
}
</style>
</head>
<body>
</br>
<center>
<form class="form-horizontal" id="form-input" method="post" role="form" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="username"><b>Email : </b></label>
<div class="col-sm-3">
<input type="email" class="form-control emailaddress" id="emailaddress" placeholder="Masukan email anda">
</div>
</div>
</br>
<span class="help-block">Tekan tombol tabs untuk autocomplete email.</span>
</form>
</center>
<!--Sisipkan File (Isi Modal) yang ada di Folder include-->
</body>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="js/jquery.email-autocomplete.js"></script>
<script>
$( document ).ready(function() {
$("#emailaddress").emailautocomplete({
domains: ["andeznet.com","facebook.com","gmail.com","yahoo.co.id","ymail.com"] //Tambahkan domainya disini
});
});
</script>
</html>
Nah sekian tutorial sederhana sana mudah-mudahan akan bermanfaat dan tunggu tutorial saya selanjutnya di andeznet.com
Download script nya DISINI
DEMO nya klik DISINI
Hatur Nuhun
