membuat Form dalam HTML biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web.
tapi dalam membuat form di html dengan tampilannya yang default akan terlihat hampa dan tidak akan terlihat indah dan rapi. oleh karena itu kita perlu memodifikasi atau mendesain form html tersebut dengan css.
Cara Memperindah Form Dengan CSS
- Buatlah Form pada HTML
- setelah form di buat, tambahkan kode berikut dalam tag Text Box
- sehingga Dalam tag Text Box akan Terlihat Seperti ini
- Sama Dengan text box tambahkan class pada tag button dengan nama yang berbeda, seperti
- setelah mensetting form, kita harus mendesainnya dengan css.
- pada css kita menambahkan .textfield dan .buttonform untuk mendesain form tersebut
- Setelah itu, tambahkan tampilan pada text box dan button tersebut, seperti
- jika ingin tampilan yang berbeda, kalian bisa mendesainnya dengan sendiri
class="textfield"
<input class="textfield" type="text" placeholder="ManDerser.Blogspot.Com" name="username"required="required" />
<input class="buttonform" type="submit" name="submit" value="Tombol" />
.textfield {
width: 300px;
height: 40px;
font-family: "Arial Black", Gadget, sans-serif;
color: #000;
border: 1px double #09F;
}
.textfield:hover {
width: 300px;
height: 40px;
font-family: "Arial Black", Gadget, sans-serif;
color: #000;
border: 1px double #09F;
background-color: #CCC;
}
.buttonform {
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;
background-color: #09F;
width: 150px;
height: 65px;
font-size: 18px;
}
.buttonform:hover {
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;
background-color: #333;
width: 150px;
height: 65px;
font-size: 18px;
border: 2px solid #09F;
}
</style>
width: 300px;
height: 40px;
font-family: "Arial Black", Gadget, sans-serif;
color: #000;
border: 1px double #09F;
}
.textfield:hover {
width: 300px;
height: 40px;
font-family: "Arial Black", Gadget, sans-serif;
color: #000;
border: 1px double #09F;
background-color: #CCC;
}
.buttonform {
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;
background-color: #09F;
width: 150px;
height: 65px;
font-size: 18px;
}
.buttonform:hover {
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;
background-color: #333;
width: 150px;
height: 65px;
font-size: 18px;
border: 2px solid #09F;
}
</style>
Jika ingin menambahkan input lainnya, kalian bisa menambahkan tag class yang berbeda
Lihat DEMO untuk Style CSS Form di atas
jika form tidak berubah pada saat sudah di masukan style, periksa kembali nama dari tag class input tersebut.
jika form tidak berubah pada saat sudah di masukan style, periksa kembali nama dari tag class input tersebut.
Semoga Bermanfaat
4 comments
Write commentsbikin tutorial tapi malah di matikan fungsi copynya.. sama aja gak berguna!
Replyuntuk codenya bisa di copy kok :D, klo untuk artikel, blog ini sudah pernah ada yang copy paste artikelnya jadi udah di disable, mohon maaf atas ketidaknyamanannya
Replyboleh juga nih gan dicoba teknik Desain Form Dengan CSSnya , untuk mempercantik Desain Form saya nantinya.
Replykunjungi juga website kampus saya http://www.atmaluhur.ac.id
dan website saya https://misri.mahasiswa.atmaluhur.ac.id
untuk memperindah desain Form dengan menggunakan CSS maka terlebih dahulu yang hrs kita lakukan adalah membuat form pda html dl ya, trmksh ilmunya gan....
ReplyKunjungi website sy ya: https://yuliyani.mahasiswa.atmaluhur.ac.id
Dan kunjungi website kmps sy: http://www.atmaluhur.ac.id
EmoticonEmoticon