hallo kawan pada kali ini kita akan membuat kolom komentar menggunakan HTML dan CSS setelah sebelumnya telah kita bahas membuat Form login menggunakan Html dan CSS
mengenal CSS
lalu apa sih CSS itu untuk mengenal lebih jauh tentang CSS silahkan anda bisa melihat Thread saya saat membahas tentang CSS
Table Of Content [ Open ]
menggunakan warna CSS pada HTMl
sebelum lebih lanjut kita membuat form komentar silahkan anda bisa baca-baca terlebih dahulu tentang menggunakan CSS pada Html dan cara implementasinya.
cara Menggunakan Warna CSS pada tag HTML
Membuat Form Komentar menggunakan HTML + CSS
baik setelah anda mengenal tentang HTML dan CSS sekarang mari kita buat form atau kolom komentar menggunakan HTML dan CSS, mari siapkan kopi
- pertama, Silahkan anda gunakan TExt editor seperti SUBliME atau teks editor lainya kemudian membuat file baru bernama index.html kemudian pastekan kode berikut
<html> <head> </head> <body> <form id="formKomentar"> <div> <input type="text" name="nama" placeholder="Nama" /> </div> <div> <input type="text" name="email" placeholder="Email" /> </div> <div> <input type="text" name="website" placeholder="Website" /> </div> <div> <textarea name="komentar" rows="10" placeholder="Komentar"></textarea> </div> <div> <input type="submit" value="Tambahkan Komentar"/> </div> </form> </body> </html>
- kedua, Buka file index.html tadi pada browser dan berikut hasilnya.
- Tambahkan CSS styling untuk form pada bagian <head> sebelum </head> sebagai berikut
#formKomentar{ border: 5px solid #d1d1d1; width:500px; padding:10px; }
preview hasil pada borwser
- Bikin styling untuk element input dan textarea masih pada bagian <head> sebelum </head>
input, textarea{ padding: 10px; border:3px solid #e6e6e6; border-radius: 5px; margin-bottom: 15px; }
- buka kembali browser anda kemudian refresh untuk melihat hasilnya
- Setelah itu tambahkan juga styling ketika element input dan text area dalam kondisi focus, serta kita atur lebar dari textarea
input:focus, textarea:focus{ border:3px solid #5E4F4F; } textarea{ width:300px; }
Berikut preview hasilnya
- kemudian yang terakhir mencantikkan tombol komentar pada saat kondisi normal sekaligus pada saat kondisi kursor berada pada atas tombol
input[type="submit"]{ cursor: pointer; background: -webkit-linear-gradient(top, #efefef, #ddd); background: -moz-linear-gradient(top, #efefef, #ddd); background: -ms-linear-gradient(top, #efefef, #ddd); background: -o-linear-gradient(top, #efefef, #ddd); background: linear-gradient(top, #efefef, #ddd); color: #333; text-shadow: 0px 1px 1px rgba(255,255,255,1); border: 1px solid #ccc; } input[type="submit"]:hover { background: -webkit-linear-gradient(top, #eee, #ccc); background: -moz-linear-gradient(top, #eee, #ccc); background: -ms-linear-gradient(top, #eee, #ccc); background: -o-linear-gradient(top, #eee, #ccc); background: linear-gradient(top, #eee, #ccc); border: 1px solid #bbb; }
hasil akhir
- Dan berikut hasil akhirnya
