Membuat Form Komentar menggunakan HTML + CSS

  • 2 min read
  • Mar 13, 2020

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

preview hasil pada borwser

2

  • Bikin styling untuk element input dan textarea masih pada bagian <head> sebelum </head>
  • buka kembali browser anda kemudian refresh untuk melihat hasilnya

3

  • Setelah itu tambahkan juga styling ketika element input dan text area dalam kondisi focus, serta kita atur lebar dari textarea

Berikut preview hasilnya

4

  • kemudian yang terakhir  mencantikkan tombol komentar pada saat kondisi normal sekaligus pada saat kondisi kursor berada pada atas tombol

hasil akhir

  • Dan berikut hasil akhirnya

5

 

Related Post :

Leave a Reply

Your email address will not be published.