Pengertian Placeholder adalah salah satu fitur baru di HTML5 . placeholder sudah banyak di gunakan di hampir semua desaign webside di tahun 2016 . sudah dari beberapa tahun lalu sebenarnya placeholder di gunakan namun di tahun 2016 ini semakin banyak menggunakan placeholder untuk memberikan penanaman pada form . ketika mendapatkan beberapa project membuat aplikasi , saya sendiri terkadang sering menggunakan placeholder pada form.
Pengertian Placeholder
akan saya jelaskan juga pegertian palceholder dan cara menggunakan placeholder pada form , karena mumgkin ada teman - teman yang baru mulai belajar dan baru mengetahui placheholder ini .
Placeholder adalah fitur dari HTML5 . Placeholder berguna untuk membuat semacam penamaan pada form , biasanya di gunakan untuk memberikan nama pada form . tetapi letaknya berada di dalam form .
dan tulisan nya pun tidak akan berpengaruh atau menggangu saat di submit.
Cara Membuat Dan Menggunakan Placeholder
Untuk membuat placeholder pada form kita tinggal menambahkan atribut "placeholder" dan isi kan value nya dengan text yang ingin di tampilan pada form .contohnya :
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Dan Mengganti Warna Placeholder | www.bimablctelkom.com</title>
</head>
<body>
<h1>Cara Membuat Dan Mengganti Warna Placeholder <br/> www.bimablctelkom.com</h1>
<input type="text" placeholder="Masukkan text di sini">
</body>
</html>
seperti pada gambar di atas . itulah fungsi dari placeholder di dalam input. untuk membuat tulisan dengan tujuan memberikan penanaman pada form . nah sampai di sini kita sudah bisa membuat placeholder . lalu langkah selanjutnya bagaimana cara merybah warna tulisan palceholder ? agar lebih menarik . langsung kita buat file css nya .
style.css
body{
background: #35A9DB;
font-family: roboto;
text-align: center;
}
h1{
color: #fff;
}
/*contoh1*/
/*support google chrome*/
.contoh1::-webkit-input-placeholder{
color: red;
}
/*support mozilla*/
.contoh1:-moz-input-placeholder{
color: red;
}
/*support internet explorer*/
.contoh1:-ms-input-placeholder{
color: red;
}
/*contoh2*/
/*support google chrome*/
.contoh2{
margin: 10px;
font-size: 12pt;
padding: 10px;
}
.contoh2::-webkit-input-placeholder{
color: blue;
}
/*support mozilla*/
.contoh2:-moz-input-placeholder{
color: blue;
}
/*support internet explorer*/
.contoh2:-ms-input-placeholder{
color: blue;
}
/*contoh3*/
/*support google chrome*/
.contoh3{
margin: 10px;
font-size: 13pt;
padding: 10px; background: transparent;
color: #fff;
border-top: none;
border-right: none;
border-left: none;
}
.contoh3:focus{
outline: none;
width: 300px;
}
.contoh3::-webkit-input-placeholder{
color: white;
}
/*support mozilla*/
.contoh3:-moz-input-placeholder{
color: white;
}
/*support internet explorer*/
.contoh3:-ms-input-placeholder{
color: white;
}
Jika sudah kita akan membuat file inputanya . di sini saya berinama dengan placeholder.php .
placeholder.php
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Dan Mengganti Warna Placeholder</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Membuat Dan Mengganti Warna Placeholder</h1>
<!-- contoh 1 -->
<input class="contoh1" type="text" placeholder="Masukkan text di sini">
<br/>
<!-- contoh 2 -->
<input class="contoh2" type="text" placeholder="Masukkan text di sini">
<br/>
<!-- contoh 3 -->
<input class="contoh3" type="text" placeholder="Masukkan text di sini">
</body>
</html>
jika sudah jalankan file placeholder.php , maka tampilanya akan seperti di bawah ini :
Kesimpulan :
Placeholder berada di dalam inputan dan jika di klik input text itu maka placeholder akan mengilang , dan jika kalian membuat sebuah website , contoh : PPDB_Online pasti di situ akan mendapat inputan banyak dan jika inputan itu berasal dari html saja , kelihatanya kurang menarik unutk di lihat .
No comments:
Post a Comment