Skip to main content

Format Tampilan Form pada CSS - P11

Contoh CSS untuk memformat Tampilan Form

Pada bagian sebelumnya, kita telah mempelajari cara-cara untuk membuat elemen-elemen dari form. Bagian ini akan menjelaskan bagaimana mengubah tampilan form agar menjadi menarik, menggunakan CSS. Perubahan tampilan form menggunakan CSS dilakukan dengan memanfaatkan banyak properti-properti yang telah dipelajari pada bagian-bagian sebelumnya, tetapi pemilihan elemen untuk diubah tampilannya sendiri dapat dilakukan dengan beberapa selector yang belum dipelajari.
Untuk lebih jelasnya, kita dapat langsung melihat contoh-contoh kode untuk perubahan tampilan form.

Memilih Elemen Berdasarkan Atribut pada CSS

Elemen-elemen masukan pada form banyak yang menggunakan atribut yang sama, dengan sedikit perbedaan pada bagian atribut type yang digunakan elemen tersebut. Misalnya, elemen masukan email dan text secara tampilan sama, tetapi memiliki atribut type yang berbeda:
<input type="text">
<input type="email">
Kemudian juga terdapat elemen submit dan reset yang ditampilkan dalam bentuk tombol, tetapi masih tetap menggunakan elemen input:
<input type="submit">
<input type="reset">
Jika kita hanya ingin memberikan properti CSS untuk elemen submit, bagaimanakah kita menetapkan selector yang benar?
Untungnya, CSS menyediakan selector khusus untuk memilih elemen HTML berdasarkan atribut yang ada pada elemen tersebut. Fitur ini dikenal dengan nama Attribute Selector, yang dapat dituliskan sebagai berikut:
input[attribute=value]
Sehingga jika kita ingin memberikan properti CSS tertentu untuk elemen submit saja maka kita dapat menggunakan selector seperti berikut:
input[type=submit] {
    /* properti CSS */
}

Memilih Elemen Berdasarkan Atribut pada CSS

Elemen-elemen masukan pada form banyak yang menggunakan atribut yang sama, dengan sedikit perbedaan pada bagian atribut type yang digunakan elemen tersebut. Misalnya, elemen masukan email dan text secara tampilan sama, tetapi memiliki atribut type yang berbeda:
<input type="text">
<input type="email">
Kemudian juga terdapat elemen submit dan reset yang ditampilkan dalam bentuk tombol, tetapi masih tetap menggunakan elemen input:
<input type="submit">
<input type="reset">
Jika kita hanya ingin memberikan properti CSS untuk elemen submit, bagaimanakah kita menetapkan selector yang benar?
Untungnya, CSS menyediakan selector khusus untuk memilih elemen HTML berdasarkan atribut yang ada pada elemen tersebut. Fitur ini dikenal dengan nama Attribute Selector, yang dapat dituliskan sebagai berikut:
input[attribute=value]
Sehingga jika kita ingin memberikan properti CSS tertentu untuk elemen submit saja maka kita dapat menggunakan selector seperti berikut:
input[type=submit] {
    /* properti CSS */
}
Inilah beberapa Contoh Codingan CSS:

1. External CSS on Form 1

See the Pen Ext CSS on Button by Muhamad Alfi (@AlviRizqi) on CodePen.

2. External CSS on Form 2

See the Pen External CSS on Form 2 by Muhamad Alfi (@AlviRizqi) on CodePen.

3. External CSS on Form 3


See the Pen External on Form 3 by Muhamad Alfi (@AlviRizqi) on CodePen.

4. External CSS on Button Hover


See the Pen Ext CSS on Button Hover by Muhamad Alfi (@AlviRizqi) on CodePen.

5. External CSS on Radio Button


See the Pen Ext CSS on Radio Button by Muhamad Alfi (@AlviRizqi) on CodePen.

6. Quiz

See the Pen Tugas by Muhamad Alfi (@AlviRizqi) on CodePen.


Comments

Post a Comment

Popular posts from this blog

Algoritma C++ Konversi dan Menukar Bilangan dari User

MENJADIKAN CODING C++ BERMANFAAT UNTUK USER Selamat beraktivitas bagi pembaca sekalian dimanapun kalian berada.. Kali ini saya akan menunjukan kepada kalian coding sederhana dengan C++ sesuai dengan judulnya  Yang saya bahas kali ini adalah  -PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -PERTUKARAN NILAI TANPA MENGGUNAKAN VARIABEL BANTU -BILANGAN POSITIF & NEGATIF dan -KONVERSI WAKTU DARI DETIK KE JAM, MENIT, dan DETIK Langsung saja ke pembahasan di bawah ini. 1. PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -Kita menginisialisasikan terlebih dahulu variabelnya x, y, z dengan tipe data Integer sebenarnya variabel z hanya variabel pembantu saja -Lalu untuk pengulangannya saya memakai do while  dengan menginisialisasikan pilih dengan tipe data char -Lalu pengulangannya saya tulis do{ -Saya outputkan dengan  cout << "Masukan Nilai X : " ; dan input dengan cin >> a ; -Untuk proses saya masukan z = x ; x = y ; y = z ; ...
Post a Comment
Read more

Komponen Audio,Video & Flash - P7

Menyediakan komponen, Audio, Video & Flash Format Tampilan Video Kita dapat menampilkan format audio pada halaman web, untuk menampilkannya dapat digunakan format seperti ini  Hasilnya: Source Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> cek video </title> </head> <body> <video width= "999" height= "540" controls poster= "gambarku/cute-030.jpg" > <source src= "This Is Me.mkv" type= "video/mp4" > browser anda tidak mendukung format video ini </video> </body> </html> Format Tampilan Audio  Hasilnya: Format Tampilan Flash 1 2 3 4 5 6 7 8 <html> <head> <title> Animasi </title> </head> <body> <embed src= "media/Strong.swf" > </body> </html> Hasilnya: Aud...
4 comments
Read more

Fungsi dan Objek pada Javascript - P16

Dalam PBO kita akan banyak menggunakan Fungsi jadi saya sarankan untuk membaca Artikel sebelumnya tentang Fungsi pada JavaScript Definisi PBO Apa itu PBO? PBO (Pemrograman berbasis Objek) atau bahasa keren nya OOP (Object Oriented Programming) adalah cara ngoding yang berfokus pada Objek. Terus kalau Objek apa? Objek itu sendiri adalah sekumpulan Variabel , Fungsi , dan Prosedur, yang disatukan dalam 1 Class lalu diperlakukan layaknya Objek di dunia Nyata. Misalnya kita mau buat Objek Nyamuk. Kita tentuin Sifat dari Nyamuk itu apa aja terus jadiin jadi Variabel. Lalu setelahnya, kita tentuin Tindakan yang bisa dilakukan nyamuk itu apa aja terus jadiin Fungsi atau Prosedur. Misalnya gini nih: Objek : Nyamuk  Variabel: - Usia - Kecepatan Terbang - Darah yang dihisap Fungsi / Prosedur: - Terbang -  Menghisap Darah PBO dalam JavaScript Barusan itu sedikit gambaran tentang PBO. Tapi, sebenarnya ada sedikit perbedaan Konsep PBO dalam JavaSc...
Post a Comment
Read more