Pemrograman Web ~ CSS #2

Assalamualaikum Warohmatulahi Wabarokatu

Halloo semunanya balik lagi sama saya kali ini saya akan melanjutkan materi CSS sebelemunya . Pada Artikel ini kita akan membahas tentang Penggunaan CSS untuk pemformatan Form.

Pada Artikel - artikel sebelumnya kita sudah pernah membahas materi mengenai pembuatan Form pada Html. Kali ini saya akan memberikkan materi mengenai CSS yang digunakkan untuk pemformatan Form.

Perubahan tampilan form  menggunkan CSS  dilakukkan dengan memanfaatkan banyak properti yang telah dipelajari pada artikel sebelumnya. tetapi pemilihan elemen untuk diubah tampilannya sendiri dapat dilakukan dengan beberapa selector yang belum dipelajari

Contoh Codingan 1 :

See the Pen extcssform1 by taufik (@fikmr) on CodePen.
Pada Contoh diatas kita dapat mengubah halaman form jadi penuh dengan warna , dan juga kita dapat mengatur formnya sesuai keinginan , selain dapat menambah kan border dengan menggunakan atribut border.

Contoh Codingan 2 :
See the Pen extcssonform2 by taufik (@fikmr) on CodePen.
Kita juga dapat mengubah font dan warna pada textarea dengan menggunakan atribut font-family.

Contoh Codingan 3 :
See the Pen extcssonform3 by taufik (@fikmr) on CodePen.
Seperti contoh codingan diatas kita dapat membuat formnya jadi seperti ini dengan menabahkan border disetiap sisi dan juga mengubah warna fontnya.

Selain Penggunaan CSS pada Atribut TextArea kita juga dapat menggunakannya pada type form lain seperti berikut :

Contoh pertama :
See the Pen cssonbutton by taufik (@fikmr) on CodePen.
Pada contoh pertama ini kita mengubah style pada input type button dengan menubah warnnya menjadi gold dan menambahkan warna bordernya .

Contoh kedua:

See the Pen csonbuttonhover by taufik (@fikmr) on CodePen.
Pada contoh Codingan ini kita dapat menambahkan atribut hover , Jadi pada saat mouse mendekati button yang diberikan hover button tersebut akan berubah warna atau backgroundnya . hover ini juga dapat berfungsi pada atribut link.

Contoh ketiga :

See the Pen cssonRadio by taufik (@fikmr) on CodePen.
Pada contoh ini penggunaan css digunakan pada atribut form type radio.

Setelah mengetahui beberapa atribut diatas dan penggunaan CSS pada tampilan form ,kita dapat membuat halaman Form yang menggunakan CSS agar tampilanya menjadi lebih menarik. Saya sudah membuat contoh penggunaan CSS pada halaman Form :

See the Pen Latquiz11 by taufik (@fikmr) on CodePen.

Nahh segitu saja materi kali ini maaf bila materinya kurang banyak tidak seperti artikel sebelumnya .ini juga menjadi artikel terakhir mengenai CSS . Bilaanda ingin mempelajari lebih lanjut kalian bisa mengunjungi web w3school.com atau yg lainnya .

Wassalamualaikum warohmatullahi wabarokatu

Comments

Popular Posts