Membuat Form Komentar menggunakan HTML + CSS

Daftar Isi Konten

mengenal CSS
1. menggunakan warna CSS pada HTMl
2. cara Menggunakan Warna CSS pada tag HTML
Membuat Form Komentar menggunakan HTML + CSS
hasil akhir

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

mengenal CSS dan Fungsinya

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;

}