Belajar CSS : Membuat Form

Hallo teman-teman.. Pada kesempatan kali ini saya akan memposting bagaimana cara membuat Form pada CSS. Berikut tutorialnya

Untuk membuat form log in seperti contoh diatas kita dapat menuliskan scriptnya seperti dibawah ini :

Keterangan :

Untuk elemen <input> sebenarnya ada beberapa jenisnya, seperti :

• input [type=text], yaitu hanya digunakan untuk field teks.
• input [type=password], yaitu hanya digunakan untuk field kata sandi.
• input [type=number], yaitu hanya digunakan untuk kolom nomor. dll.

Dari script juga menggunakan :

• Properti padding, yang digunakan untuk menambahkan ruang didalam kolom teks.

        input[type=text], selecet {
        width: 50%;
        padding: 10px 20px;
        box-sizing: border-box;
        margin: 8px 0;

        Properti box-sizing untuk border-box hal ini memastikan bahwa padding dan border   termasuk dalam total lebar dan tinggi dari elemen.

• Properti border-radius yaitu untuk menambahkan sudut yang dibulatkan.

        input[type=text], select {
        border :3px solid #0000ff;
        border-radius: 5px;

• Properti background-color untuk mengatur warna latar belakang.

        input[type=submit]{
        width: 50%;
        background-color: #000000;
        color: white;
        padding: 14px 20px;

• Properti margin untuk mangatur jarak ruang diluar.

        input[type=text], select {
        width: 50%;
        padding: 10px 20px;
        box-sizing: border-box;
        margin: 8px 0;


Referensi :
http://www.w3schools.com/css/css_form.asp

Sekian dan terimakasih