form

Formlarınızla Etkileşimli Dinamik Arkaplanlar

Vatanay Özbeyli Yorum yazın CSS3, jQuery

Günümüz tasarımlarında uzun formlar wizardlar sayesinde adımlara bölünüyor, kendi içerisinde kategorize ediliyor ve basitleştiriliyor. Ancak wizard mantığı kullanım kolaylığı sunuyor gibi gözükse de aslında süreyi uzatıyor. Burada anahtar kelime ve çıkış noktası “dikkati yönetmek” olarak gösterilebilir. Öyleyse kullanıcıya uzun formların her bir inputuyla etkileşime geçen tasarımlar sunmak işe yarayabilir.

Bu makalemizde her form öğesiyle birlikte renk değiştiren arkaplan hazırlayacağız. Renklerimizi de Google‘ın yeni ve popüler tasarım trendi Material Design‘dan seçeceğiz.

CSS ile Form Tasarımı

Vatanay Özbeyli 4 Yorum CSS3, Öne Çıkanlar

Kullanıcı arayüzü ve deneyimi söz konusuyken, form öğelerinin dizilişi ve tasarımı büyük önem taşımakta. Özellikle uzun yapıdaki formlar kesinlikle tekrar elden geçirilmeli, gerekirse tasarımla basitleştirilmeli ve adımlara bölünmeli. Hazırlayacağımız örnek yapı sayesinde varolan bir form yapısının HTML kodlarına hiç dokunmadan yepyeni bir tasarım oluşturacağız.

Bu makalemizde sadece CSS kodlarıyla bir form öğesini tüm iç detaylarıyla şekillendireceğiz. Üzerinde oynayacağımız form yapıları şöyle : Form, legend, label, input, fieldset, select, textarea, checkbox.

Örneği görüntüleyerek başlayabilirsiniz.

HTML5 ile Ne Değişti?

Vatanay Özbeyli Yorum yazın HTML5, Tasarım Unsurları

HTML5‘in ayak sesleri duyulduğunda çok sert bir geçiş sürecinin bizi beklediğiniz düşünmüştük. Fakat korkulan olmadı. Eski elemanlara sağlanan destek yavaşça kesildi ve HTML5’in yenilikleri yerlerini teker teker aldı.

Bu makalemizde HTML5’in beraberinde getirdiği elemanları ve tarihin tozlu sayfalarına gömülecek olan eski kod birimlerini konuşacağız.

İşte karşınızda ilk ve tek tam liste! (daha&helliip;)

jQuery ile Minimum ve Maksimum Karakter Limitli Form Oluşturalım

Vatanay Özbeyli 2 Yorum HTML5, jQuery, Tasarım Unsurları

Merhaba arkadaşlar.

Bu makalemde içerisinde maksimum ve minimum karakter limiti barındıran bir form öğesi hazırlayacağız. Böylece oluşturduğumuz form alanlarına ziyaretçilerin minimum ve maksimum kaç karakter girebileceğini belirleyebileceğiz.

Bu işlem için jQuery desteği almamız gerekecek. Çünkü anlık olarak yazılan karakter sayısını belirtmemiz gerekiyor. Ben jQuery.min.js kullanacağım. Versiyon olarak ise 1.5.1 ve daha günceli yeterli olacaktır. Şimdi arkanıza yaslanın ve formumuzu hazırlamaya başlayalım.

HTML5 ile Ziyaretçilerinize Değiştirilebilir İçerikler Sunun

Vatanay Özbeyli Yorum yazın HTML5, Tasarım Unsurları

Merhaba arkadaşlar. HTML5 ‘in getirdiği avantajlı yenilikleri konuşmaya devam ediyoruz. Bu makalemde ise “contenteditable” özelliği ile düzenlenebilir içerikler hazırlayacağız.

HTML5 öncesinde Ajax ve form öğeleri desteğiyle benzeri içerikler hazırlamak mümkündü. Fakat bu işlem için bile kırk takla atmamız gerekiyordu. HTML5 desteği ile bu işlemi yapmak saniyeler sürüyor. Şimdi konuyu biraz genişletelim, sonrasında ise sizler için hazırladığım örnek ile devam edelim.
(daha&helliip;)

2012 Yılının En Popüler WordPress Eklentileri

Vatanay Özbeyli 2 Yorum Eklentiler, Öne Çıkanlar, WordPress

Henüz ekim ayının ortalarında 2012 yılını üst sıralarda bitirecek eklentiler kendini belli etmeye başladı. Listenin en tepesinde pek eski olmayan bir isim bulunuyor.

Eklentiler popülerlik oranlarına göre, 15.10.2012 13:00 tarihinde sıralanmıştır.

CSS ile Formlarımızı Renklendirelim

Egemen Özbeyli 8 Yorum CSS3

Merhaba arkadaşlar,

Bu paylaşımımda sizlere form elementlerimizi css ile nasıl renklendirip,kullanıcıların ilgilerini çekebilecek bir hale getireceğimizi anlatacağım.Eğer tasarım sitelerini takip ediyorsanız bu konuyla ilgili açılmış bir çok paylaşıma rastalayabilirsiniz,Özellikle dünyadan seçme olarak listelenmiş iletişim formları son zamanlarda çok ilgi görmekte.Ben bu paylaşımımda sizlere form elementlerini renklendirmek için temel bilgileri vereceğim,tabi ondan sonra farklılıklar yaratmak sizin yaratıcılığınıza kalmış.Lafı fazla uzatmadan paylaşıma geçelim,

1 – İlk olarak aşağıdaki kodlarla temel form elementlerimizi oluşturalım.


<form action="" method="get">
 <p>
 <label>Adınız<br />
 <input type="text" name="name" id="name" />
 </label>
 </p>
 <p>
 <label>Email Adresiniz<br />
 <input type="text" name="email" id="email" />
 </label>
 </p>
 <p>
 <label>Web Siteniz<br />
 <input type="text" name="website" id="website" />
 </label>
 </p>
 <p>
 <label>Yorum Yap<br />
 <textarea name="message" id="message" cols="45" rows="5"></textarea>
 </label>
 </p>
 </form>