Bootstrap Statik Kontrol ve Input Fokus Özelliği

STATIK KONTROL

Statik kontrol sayesinde formda yer alan herhangi bir öğeyi sabit yapabilirsiniz. Örneğin; bir şifre kısmı var ve bunun kullanıcı tarafından girişini önlemek istiyorsanız bu şekilde kontrol edebilirsiniz.

Statik kontrol ile istediğiniz öğelerin ekranda veri girişi yapılmasını engelleyebilir ve varsayılan olarak girildiğini gösterebilirsiniz. Statik kontrol sayesinde kolayca öğe kilitleme işlemlerinizi yapabilirsiniz.
Gerekli olan kodlarımız aşağıdaki gibidir :

<div class="container">
    <form class="form-horizontal" role="form">

        <div class="form-group">
            <label class="col-sm-3 control-label">URL Adresi</label>
            <div class="col-sm-3">
                <p class="form-control-static">http://google.com/</p>
            </div>
        </div>

        <div class="form-group">
            <label for="inputPassword" class="col-sm-3 control-label">Şifre</label>
            <div class="col-sm-3">
                <input type="password" class="form-control" id="inputPassword" placeholder="Şifre giriniz.">
            </div>
        </div>

    </form>
</div>

Yukarıda yer alan kodların zaten hepsini öğrenmiştik. Burda bizim için önemli olan kısım yukarıda vurgulamış olduğum "p" etiketine sınıf verdiğimiz yerdir. Statik sınıfını vererek öğenin kilitlenmesini sağladık.

Burada bir hatırlatma yapalım, boyutlandırma için "-sm" değerleri ile oynayabilirsiniz.
Kodumuzun çıktısı ise aşağıdaki gibidir :

Görüldüğü gibi "URL Adresi" olarak yazdığımız kısım kilitli olarak gözükmektedir. Diğer kısım ise varsayılan olarak açık gözükmektedir.

INPUT FOCUS ÖZELLIĞI

Input Focus özelliği aslında basit bir özelliktir. Input Focus özelliğini şu şekilde açıklayabiliriz. Örneğin; normalde bir form kutucuğuna tıkladığımızda mavi oluyor, işte "Input Focus" özelliği, bu rengi değiştirmeyi sağlıyor. Aslında HTML tarafında basit görünse de CSS tarafında değiştirmeniz gereken kodlar yer alıyor.

Kısacası "Input" yani tıklama renklerini CSS dosyası ile değiştirebilirsiniz. ilerleyen bölümlerde farklı renkleri olan formlara değ ineceğiz.
Oluşturulacak CSS dosyası için gerekli kodlarımız:

textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {   
    border-color: rgba(229, 103, 23, 0.8);
    box-shadow: 0 1px 1px rgba(150, 80, 2, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
    outline: 0 none;
}

Vurguladığım gibi bu kısımda "RGBA" kodlarını değiştirerek kolayca farklı renkler elde edebilirsiniz. Zaten kodlardan anlaşıldığı üzere virgül ile toplu kullanım yapılarak tüm focuslara aynı anda renk verilmiştir.

Ben "box-shadow" değerini kırmızımsı bir renk ile yukarıda görüldüğü gibi değiştirdim.

Kodları herhangi bir CSS dosyası oluşturup ekleyebiliriz. Ben projenin olduğu ana dizinde "stil.css" adında bir dosya oluşturdum ve projeme dahil ettim. Kodları yazdıktan sonra dosyayı projemize dahil etmeyi unutmayalım. Aksi taktirde değişiklikler gözükmeyecektir.
HTML için gerekli olan bir diğer kodumuz aşağıdaki gibidir :

<input class="form-control" id="focusedInput" type="text" value="Deneme">

Bu kod şu zamana kadar öğrendiğimiz kodlardan biraz farklıdır. Bu kod "Input Focus" yapısıdır ve bu kodda kutuya yazdığımız metin yani "value" kısmında yer alan metin ile birleşir. Kısacası açıklama kısmı ile girilen yazı birleşik bir yazı oluşturur. "Placeholder" komutunda olduğu gibi açıklama yazısı kaybolmaz.

Renk değişiminde diğer öğrendiğimiz kodları da rahatlıkla kullanabilirsiniz, herhangi bir hata teşkil etmeyecektir.
Kodumuzun çıktısı aşağıdaki gibi olacaktır :

Görüldüğü gibi tıklandığı zaman kırmızımsı bir tonda renk elde ettik. Ayrıca tıkladığımda "Yazısı gitmeyen." adlı eklediğim yazı, forum kutucuğundan kaybolmadı.
Normal şekilde kullanımı ise aşağıdaki gibi yapabilirsiniz :

<input type="text" class="form-control" id="inputPassword" placeholder="Gitmeyen Yazımız...">

Görüldüğü gibi ben burada en temel etiketlerden biri olan "text" kullanarak bir "input" oluşturdum.
Normal kullanımın çıktısı ise aşağıdaki gibi olacaktır :

Görüldüğü gibi "Gitmeyen Yazımız..." adlı yazımız daha açık bir renkle yazılmıştır.
Kutuya birşey yazıldığında ise çıktı aşağıdaki gibi olacaktır :

Görüldüğü gibi yazı yazdığımızda açıklama metni olan "Gitmeyen Yazımız..." ekrandan gitmiştir.

Özetleyecek olursak kolayca CSS dosyası oluşturarak, kolayca rengi değiştirdik. Mavi renk her tasarıma uymayabilir, bu yol ile tasarıma uygun renkte "focus" rengi seçebilirsiniz.

INPUT ÖĞELERİNİ DEVRE DIŞI BIRAKMA

Daha önce "RadioButton" ve "CheckBox" butonlarını nasıl devre dışı bırakabiliriz bunu öğrenmiştik. Şimdi ise formlarda yer alan "input" kutucuklarını nasıl devre dışı bırakabiliriz bundan bahsedeceğiz.

Özellikle "check" kelimesi gündelik hayatta bazı sitelerde karşılaştığımız bir terimdir. Onaylamak anlamına gelmektedir, zaten bizde bu amaç için kullanacağız.

Disabled yapısı hem görsel açıdan, hem de kullanıcıya sağladığı deneyim açısından, sayfamızın daha düzgün olmasını sağlıyor.
Örnek kullanım için gerekli kodlarımız aşağıdaki gibidir :

<div class="container">
    <input class="form-control" id="disabledInput" type="url" placeholder="http://google.com/" disabled>
</div>

Görüldüğü gibi "id" kısmına ve son kısma "disabled" ekledik.
Kodumuzun çıktısı ise sağdaki gibi olacaktır :

Fare imlecinde yuvarlak blok işareti gözükecektir. Bu işaret yalnızca kutunun üzerine gelindiği zaman belirmektedir. Bu sayede kutu, kullanıcının ilgisini daha çok çekecektir ve herhangi bir ek açıklama olmasa bile tek seferde o kısmın kullanılamaz olduğunu anlayacaktır.

SELECTS ÖĞESİNİ DEVRE DIŞI BIRAKMA

seletcs öğelerini görmüştük, kısaca hatırlamak gerekirse veriler arasında seçim yapmayı sağlıyordu. Şimdi ise bu kodun "disabled" durumunu ele alacağız.
Disabled sayesinde kullanıcıya öğenin kullanılamaz olduğunu kolayca bildirebilirsiniz.
Disabled işlemi için gerekli kodlarımız aşağıdaki gibidir :

<div class="container">
    <form role="form">
        <fieldset disabled>
            <div class="form-group">
                <label for="disabledSelect">Devre Dışı Öğe</label>
                <select id="disabledSelect" class="form-control">
                    <option>Deneme Yazısı</option>
                </select>
            </div>
        </fieldset>
    </form>
</div>

Görüldüğü üzere diğer kodlardan farklı olarak ekledik bununla beraber "for" ve "id" değerlerinde "disabled" kullandık, bu sayede öğelerin devre dışı olduğunu belirtmiş olduk.
Kodların çıktısı ise aşağıdaki gibi olacaktır :

Görüldüğü gibi devre dışı olan "Merhaba" yazısı daha kapalı bir renkle ekranda belirmiştir. Üzerine gelindiği zaman imleç blok işaretine dönüşmektedir.
Ayrıca sağ menü ikonları disabled olsa bile gözüküyor, ancak kullanılamıyor :

Resimde göründüğü gibi seçim butonu gözükmektedir fakat hiçbir işlevi yoktur.

SADECE TIKLAMA İZİNLİ INPUT ÖĞELERİ

Bu kullanım tarzında ise form kutumuz diğer "disabled" kısmında olduğu gibi kapalı renkte olacak, fakat diğer "input" etiketlerinde olduğu gibi üzerine tıkladığımızda "focus" efektini elde edebileceğiz. Sadece yazı ekleme özelliği devre dışı kalmış olacak.

Gerekli olan kodlarımız ise aşağıdaki gibidir :

<div class="container">
    <form role="form">
        <input class="form-control" type="text" placeholder="Bootstrap" readonly> 
    </form>
</div>

Görüldüğü gibi herşeyi standart bir şekilde yazdık. Sadece "placeholder" bittikten sonra "readonly" yazdık bu sayede sadece okuma izni ve tıklama izni olmasını sağladık.

Kodumuzun çıktısı ise sağdaki gibi olacaktır :

Çıktıda görüldüğü gibi mavi "focus" efektimiz geldi. Bununla beraber kilitli olduğu için ok işaretiyle belirttiğim gibi fare imleci değişti ve ufak bir detay olan yazma belirtisi "|" işareti "Bootstrap" yazısında belirmedi. En son kısımda "readonly" kullandık, bunu tüm "input" etiketlerinde rahatlıkla kullanabilirsiniz. Readonly evrensel olarak çalışmaktadır.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---