Bagaimana cara Membuat Hightlight pada Form HTML menggunakan CSS? - bagi sobat yang masih awam dengan dunia CSS seperti saya masih sangat butuh bimbingan, namun ketika yang membimbing tidak ada maka dengan terpaksa kita harus beelajar sendiri atau istilahnya belajar secara otodidak. Saat membuat form merasa bosan dengan tampilan yang itu-itu aja? tenang aja sob karena disini saya akan mengshare cara membuat form lebih berwarna. hehe
<form id="form1" name="form1" method="post" action="">
<input name="user" type="text" id="user" value="Username" />
<input name="password" type="password" id="password" value="Password" />
<input type="submit" name="login" id="login" value="Login" />
</form>
Gimana sob? Mudah kan. berikutnya kita akan menggunakan kode CSS yang sangat sederhana. Tujuannya yaitu biar agan-agan sekalian lebih paham. Ada pepatah mengatakan "sedikit demi sedikit lama-lama menjadi bukit", mungkin pepatah tersebut cocok untuk artikel ini. Oke sob langsung aja berikut kode cssnya yang saya gunakan pada gambar diatas, sobat bisa ubah sendiri sesuai selera.<input name="user" type="text" id="user" value="Username" />
<input name="password" type="password" id="password" value="Password" />
<input type="submit" name="login" id="login" value="Login" />
</form>
<style type="text/css">
form input[type=text]:focus, form input[type=password]:focus {
border: solid 1px #03F;
background: #0CF;}
</style>
form input[type=text]:focus, form input[type=password]:focus {
border: solid 1px #03F;
background: #0CF;}
</style>
Silahkan ubah sesuai selera anda, yang merah adalah kode warna dan yang hijau adalah lebar border form. Sehingga secara lengkap bisa kita tulis dengan kode kayak dibawah ini sob:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hightlight Form</title>
<style type="text/css">
form input[type=text]:focus, form input[type=password]:focus {
border: solid 1px #03F;
background: #0CF;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input name="user" type="text" id="user" value="Username" />
<input name="password" type="password" id="password" value="Password" />
<input type="submit" name="login" id="login" value="Login" />
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hightlight Form</title>
<style type="text/css">
form input[type=text]:focus, form input[type=password]:focus {
border: solid 1px #03F;
background: #0CF;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input name="user" type="text" id="user" value="Username" />
<input name="password" type="password" id="password" value="Password" />
<input type="submit" name="login" id="login" value="Login" />
</form>
</body>
</html>
Kemudian simpan dengan nama form_hightlight.html dan buka dengan browser firefox. Cukup sekian, terimakasih atas kunjungannya dan biasakan komen and share ya sob.
Sip. Thanks
BalasHapusrame Rame.. :p
BalasHapusmakasi :D .simple tp berhasil,hehehe
BalasHapushehe, makasih kunjungannya..
BalasHapus