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

Array pada JS - P13

Di pembahasan kali ini akan membahas JS Array..Langsung simak aja guys... 1. Pengertian Array 2. Jenis jenis Array 3. Contoh contoh Array 1. Pengertian Array     Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dst.     Array di dalam JavaScript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat. Index array di dalam JavaScript juga tidak harus berurutan, JavaScript membolehkan elemen dari array ‘tidak terur...
Post a Comment
Read more

Profil PHP - P19

PROFIL SAYA 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <!DOCTYPE html> <html> <head> <title> DATA PRIBADI </title> <link rel="stylesheet" type="text/css" href="coba.css" > </head> <body> <section class="kotaknya" > <img src="FOTO.png" clas="image" width="300" height="450" /> </div> </section> <h1> Biografi pribadi </h1> <?php $nama_saya = "Muhamad Alfi Rizqi"; $kelas = "XI RPL 1"; $sekolah = "SMKN 4 Bandung"; $nis = "1718 117123"; $umur = "16 Tahun"; $berat_badan= "50 kg"; $hobi = "Bersepeda, Playing Games, mendaki"; $tinggi = "167 cm"; $alamat = ...
Post a Comment
Read more

Membuat Coding menjadi lebih bermakna dengan C++

Selamat beraktivitas dimanapun kalian berada... Kali ini saya akan menunjukan dengan Coding menjadi lebih bermakna untuk kalian semua... Misal dengan membuat Kalkulator simpel dengan C++ sangatlah mudah jika kalian ingin mempelajari ini terlebih dahulu.        Sebenarnya banyak bahasa pemrograman yang tentu saja memudahkan bagi kehidupan manusia,Contohnya Java,Phyton,C# dan masih banyak lagi Tapi,Saya akan menunjukan kepada kalian tentang bahasa program C++ dengan mencari tahu kalian tentu akan menjadi Programmer yang handal Dengan catatan ini adalah coding karya saya tentunya, Dan kalian hanya perlu memahami nya dan meniru nya dirumah.. saya hanya menunjukan berbagai cara saja dan sebenarnya C++ lebih dari ini.mungkin ini adalah Coding yang simple yang menurut kalian pasti hanya perlu waktu sebentar untuk memahaminya.. Sebelumya saya sudah menjelaskan di link saya tentang C++ dan tentunya dengan penjelasannya .Saya sarankan untuk membaca ARTIKEL ini...
Post a Comment
Read more