4 Ağustos 2016 Perşembe

Bootstrap Kullanarak Form Oluşturmak

Herkese merhaba, web kütüphanelerinden biri olan Bootstrap ile girilen bir json formatını kullanarak form oluşturmaktan bahsedeceğim.

Öncelikle Bootstrap'in ne olduğu hakkında bir şeyler söyleyecek olursam;

Bootstrap; HTML, CSS ve JS'i bir arada bulunduran ve bunları kullanarak web arayüzü geliştirebildiğimiz bir kütüphanedir.
CSS'e ek olarak CSS önişlemcisi olan Less ve Sass'ı kullanır.

Bootstrap açık kaynaklı bir kütüphanedir. Github projesine buradan bakabilirsiniz.

Bootstrap sayfasında birçok uygulayabileceğimiz örnekler bulunmaktadır.

Şimdi bir json girdisine karşılık gelen formumuzu oluşturalım.

1-) İlk adım olarak formumuzda hangi alanların oluşmasını istiyorsak o alanları json formatında javascript kodumuzun içerisinde belirtiyoruz.
var fields, form;

fields = [ 
    {
        name: 'username',
        label: 'Username',
        type: 'text'
    }, {
        name: 'password',
        label: 'Password',
        type: 'password'
    }, {
        name: 'fruit',
        label: 'Fruit',
        choices: [
            ['apple', 'Apple'],
            ['pear', 'Pear'],
            ['orange', 'Orange']
        ],
        type: 'selectmultiple2' 
     }, {
        label: 'Submit',
        type: 'submit',
        class: 'btn-danger',
        icon: 'ok'
    }];

2-) Daha sonra bu json girdisini alıp alanlarıyla form oluşturabileceğimiz formata çeviriyoruz.

fields = JSON.stringify(fields);
        fields = formatter.formatjson(fields);
        demoInput = $('#form-demo-input');
        demoInput.val(fields);
          
        outputForm = $('#form-demo-output');
        outputForm.submit(function() {return false});
Bu işlemleri gerçekleştirdiğimizde formumuz şekildeki gibi oluşur;


Kodun tamamı ve uyguladığım örneğe linkten ulaşabilirsiniz.
İyi çalışmalar ve kolaylıklar dilerim.

Hiç yorum yok:

Yorum Gönder