For Your Information: CSS : Membuat Form Dengan CSS

assalamualaikum wr. wb.
Pada kesempatan kali ini, saya akan membagikan tentang cara membuat form dengan CSS. Langsung saja.

Dalam form, ada beberapa elemen yang dapat digunakan.
1. Properti CSS Input
Untuk mengubah ukuran sebuah kolom input dapat digunakan sebuah properti width dalam CSS. Elemen input digunakan untuk memasukan data. Ada beberapa type tertentu dalam untuk elemen input, yaitu :

Input [type=text] - akan memilih kolom masukan bertipe teks saja
Input [type=password] - akan memilih kolom masukan bertipe password
Input [type=number] - akan memilih kolom masukan bertipe nomor

2. Memberikan Padding Pada Input
Properti padding digunakan untuk memberi ruang didalam kolom input.
Cara penulisan pada style CSSnya :

input [type=text] {
width: 100%;
padding: 20px 20px;

}

3. Memberikan Border Pada Kolom Input
Properti border dapat digunakan untuk menambah border pada kolom masukan. Dapat juga mengubah ukuran dan warna pada border. Sedangakan properti border-radius digunakan untuk menambah bulatan pada sudut-sudut kolom masukan.

input [type=text] {
border: 2px solid black;
border-radius: 5px;
}

Jika anda ingin border radius tidak sama untuk semua sudut, hanya sudut tertentu dapat digunakan kode berikut,

border-radius: 2px 3px 4px 5px;

Urutannya kiri-atas (2px), kanan-atas (3px), kanan-bawah (4px), dan kiri-bawah (5px).
Selanjutnya jika anda ingin menambah border di bagian bawah saja, dapat menggunakan properti border-bottom.

4. Memberi Warna Kolom Input
Properti background-color digunakan untuk menambah warna background pada kolom input.
Sedangkan properti color untuk mengubah warna teks dalam kolom input.

5. Fokus Pada Input
Fokus digunakan untuk tanda pada kolom masukan yang sedang diklik. Jadi saat kolom masukan diklik kita dapat merubah warna background maupun border. Dengan cara menambahkan selector :focus ,
Fokus dengan merubah warna background :

input [type=text]:focus {
background-color: red;
}

Fokus dengan merubah warna border :

input [type=text]:focus {
border: 2px solid red;
}

6. Menambah Button Input
Untuk menambahkan suatu gaya atau style pada button, dapat anda tambahkan properti background-color, border, color, padding, dll.

input [type=submit] {
    background-color: #003366;
    border: none;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}

Contoh kita akan membuat form dengan CSS seperti gambar dibawah.