Textarea her yerde kullandığımız bir form elementi ve sınırlandırılmış bir metin girdisini düşünmüyorsak textarea içine girilecek yazı teknik olarak oldukça uzun veya kısa olabilir. Genellikle bu boyut (o metin kutusuna girilebilecek ortalama tahmini uzunlugu), o textarea'nin yükseklik değerini belirler görsel olarak.

Örnek veriyorum ortalama olarak 3 cümlelik bir metin girildiğini tahmini olarak belirliyorsak 3 satır sığacak şekilde bir textarea hazırlarız ekrana. Ama uzun bir metin giriliyorsa görsel olarak ve sayfadaki kullanıcı deneyimi açısında iç içe kaydırılabilir elementler olması güzel bir deneyim değildir. Sonuçta textarea'yi uzun da olsa bir metinin girildiği bir kutu olarak düşünürsek, o kutunun metinin uzunluğuna göre değişiyor olması güzel bir kullanıcı deneyimi sunacaktır.

Birkaç farklı jquery plugini bulabilirsiniz bunun için, ben şu an mfyz.com'un ön yüzünde değil ama admin panel'de uzun süredir kullanıyorum kendi yazdığım bir jquery kodunu. Birkaç ay önce bir plugin ile değiştirmiştim kendi kodumu fakat kısa zaman önce başka bir plugin ile tekrar değiştirdim. Size son kullandığım plugin üzerindne bunu nasıl yapabileceğinizi göstereceğim. Açıkcası çok derin açıklama yapmama da gerek yok, plugin sayfasına gidip indirip tek satırlık bir tanımlama ile varolan bir textarea'nizi otomatik genişleyen bir textarea'ya dönüştürebilirsiniz.

http://www.jacklmoore.com/autosize adresinden jquery autosize plugin'ini test edebilirsiniz, sayfayı ziyaret edin ve güncel sürümü indirin.

jquery.autosize-min.js dosyasını projenizin assetlerine kopyaladıktan sonra sayfanıza include edin. Örnegin sayfanızda "comment" kimliğine sahip bir textarea olduğunu varsayalım.
<textarea id="comment"></textarea>

<script type="text/javascript">
$(function(){
  $('#comment').autosize();
});
</script>
Bu kod comment kimlikli textarea'nizi otomatik genişleyen bir textarea'ya dönüştürecektir. Hepsi bu kadar...

Daha pratik ve genelleştirerek bir sınıf tanımlayıp o sınıftaki tüm textarea'lari otomatik olarak bu plugin ile otomatik-yukseklik-ayarlanan textarea'lara dönüştürebilirsiniz:
<textarea id="txt1" class="autosize"></textarea>
<textarea id="txt2" class="autosize"></textarea>

<script type="text/javascript">
$(function(){
	$('textarea.autosize').each(function(){
		$(this).autosize();
	});
});
</script>
Plugin adresi:http://www.jacklmoore.com/autosize

form

Form öğerleri kullanabilmek için öncelikle bir form belirlemeniz gerekir. Form öğerlerini bu etiketler arasına yazmalısınız. name ile formun adını, method ile gönderi metodunu (get veya post), action ile formun belirtilen metodla gönderileceği sayfayı belirleriz.
<form name="iletisim_formu" method="post" action="iletisim_formu_isle.php">
  <!-- FORM ELEMANLARI -->
</form>
name formun ismidir, javascript ile dom ağaç yapısından forma ve form elemanlarına ulaşmırken kullanırız. method formun postalama metodudur. GET ile url'den verileri açıkca gönderir, POST ile göstermeden postalar. Genelde POST metodunu kullanırız. action ise formun postalanacağı adrestir ve genellikle bir sunucu tabanlı dilin betik dosyası olur.

input

Her türlü bilgiyi input'lar sayesinde girdi aldırırız. name ile, formun action parametresinde belirtilen sayfaya postalanırken değişken adlarını, girilen değer belirler. value parametresi ise o öğe için geçerli değeri taşır. Bu geçerli değerler çıktısı verilecek input türüne göre değişkenlik gösterir. type parametresi ile de çıktısı verilecek form öğesinin türünü belirleriz. Bu öğeleri, türlerine göre ayrı ayrı inceleyelim ;


button : Çıktı olarak bir buton basılır. value değeri butonun üzerinde görüntülecek yazıyı belirler. Butonun geçerli olarak hiçbir fonksiyonu yoktur. onClick olayına atanan javascript ile bir fonksiyon kazandırılır.
<input type="button" value="Buraya Basabilirsiniz">
Çıktı :


submit : Çıktı olarak buton basılır. Ancak bu buton formu gönderme işine yarar. Geçerli olarak tarayıcının diline göre formu göndermeyi ifade eden bir kelime ile görüntülenir. value parametresi ile bunu Gönder, Devam gibi bir anlatım belirleyebilirsiniz.
<input type="submit" value="Gönder">
reset : Çıktı olarak yine buton basılır. Buton formdaki bütün öğelerin değerlerini, ilk değerlerine döndürür. Yani geçerli value değerlerine döner.
<input type="reset" value="Formu Sıfırla">
text : Tek satırlık bilgi giriş alanı basar.
<input type="text" name="bilgi_giris_alani" value="varsayılan değer">
Çıktı :


password : text ile aynıdır. Tek farkı yazılan bütün karakterlerin değerleri korunurken, gösterimde işletim sistemine göre bir şifreleme gösterimi basılır. Windows'da büyük nokta, bazı tarayıcılarda hala *, bazılarında ise hiçbirşey görüntülenmez.
<input type="password" name="sifre_giris_alani">
Çıktı :


checkbox : Seçim kutusu basılır. Eğer seçilmişse gönderilen sayfaya değeri on olarak, seçili değilse off olarak gider.
<input type="checkbox" name="onay"> Bisikletin var mı?
Çıktı : Bisikletin var mı?

Eğer "checked" argümanı verilirse ekrana varsayılan olarak seçili basılır. Örneğin:
<input type="checkbox" name="onay" checked> Bisikletin var mı?
Çıktı : Bisikletin var mı?


radio : Seçim butonları koyar. Kullanıcıya birden çok seçenek ve bunlardan birinin seçilmesi istenirse bunları kullanırız. Bir seçim gurubunda her seçenek için bir tane radio türünde input öğesi eklenir, name yani isim parametrelerine aynı değer verilir ve value parametresine verilen değerlerden, form gönderilirken seçilmiş olanının değeri o isim yani değişken ile gönderilecek sayfaya gönderilir.
Kaç tane bilgisayarın var?
<input type="radio" name="bilgisayar_sayisi" value="1"> 1 tane
<input type="radio" name="bilgisayar_sayisi" value="2" checked> 2 tane
<input type="radio" name="bilgisayar_sayisi" value="3"> 3 tane
<input type="radio" name="bilgisayar_sayisi" value="+"> 3'den fazla
Çıktı : Kaç tane bilgisayarın var?
1 tane
2 tane
3 tane
3'den fazla

Mesela "2 tane" seçeneğinin inputunda "checked" argümanı var. Onun için form ilk yüklendiğinde 2 seçeneği seçili oluyor.

label

label'dan hemen bahsetmek istiyorum çünkü genellikle checkbox ve radiobuttonlar için kullanılırlar. label adı üzerinde etikettir. Yani bir inputun aslında başlığıdır. Yani siz formda bir text input veya başka bir input basarken onun hemen öncesine bir açıklama ile o bilginin ne olduğunu girersiniz. Mesela;

E-Posta Adresiniz :

Buarda başlığa tıklamaya ihtiyaç yoktur. Yani kimse "E-Posta Adresiniz : " yazısına tıklayıp birşey yapmak istemez. Fakat checkbox ve radiobutton'larda böyle bir ihtiyaç hissedilir. Mesela:
<input type="checkbox"> Web standartlarını seviyor musun?
Web standartlarını seviyor musun?

Burada ise çıkan ufacık tik atma kutusuna tıklamaktansa yazıya tıklamayı tercih eder çoğu kullanıcı. Ve doğal olarak yazıya tıklanınca hiçbirşey olmaz :-) label aslında burada işimize yarıyor.
<input type="checkbox" id="wss">
<label for="wss">Web standartlarını seviyor musun?</label>


Gördüğünüz gibi yazıya tıklayınca da input tıklanmış oluyor. Unutmamanız gereken şey şu: label'a for argümanı ile hangi input'un label'i olduğunu belirtmek. Tabiki bunu da input'a verdiğiniz id ile yapıyoruz.

Aynı durum radiobuttonlarda da söz konusudur, "Kaç bilgisayarın var?" sorusuna cevap verirken yazılara tıklayarak seçim yaptırmak için her radiobutton'a bir id verilir, yazılar label ile işaretlenip for ile de her label'a kendi inputunun id'si verilir.

label etiketi aynı zamanda bir formu css ile şekillendirirken de işinize yarayacaktır.

textarea

Çok satırlık yazı alanı basar. rows parametresi ile kaç satırlık bir alan görüntüleneceği, cols parametresi ile de kaç satır genişliğinde görüntüleneceği ayarlanabilir. Ancak bu ayarlar sadece görünümü ayarlar. içine girilebilecek metin teorik olarak sonsuzdur. Metnin uzunluğu makinenizin limitlerine göre belirlenir. Geçerli değer açılış ve kapanış etiketleri arasına girilir.
<textarea rows="5" cols="50">5 satır, 50 karakter genişlikli metin girdi alanı</textarea>


select ve option

Seçim listesi basar. Geçerli olarak boş liste basılır. Açılış ve kapanış etiketleri arasındaki option etiketleri bu listeyi oluşturur. option etiketleri arasına yazılan şekilde görüntülenir ve seçilen seçenek, select'in name parametresinde belirlenen değişkene seçilen option etiketindeki value parametresinin değerini atar. option etiketleri selectsiz kullanıldığında bir işe yaramazlar.
Hangi ildesiniz? :
<select name="secilen_il">
  <option value="ankara">Ankara</option>
  <option value="istanbul">İstanbul</option>
  <option value="izmir">İzmir</option>
  <option value="diger">Diğer</option>
</select>
Hangi ildesiniz? :


Hazırlayan : Mehmet Fatih YILDIZ

Bu döküman 30.02.2008 tarihinde yeniden düzenlenmiştir.

Popüler Etiketler

screen konsol terminal twitter jquery javascript widget iOS webkit web app app music google code development apple windows ubuntu ntfs fstab portfolio doritos tytz html social integration api service network blog less css compile compiler macosx linux on-the-fly js rss xml export developer örnek kod www subdomain redirect crossdomain php coding facebook connect box auth http mootools form input textarea select htaccess apache route router mod_rewrite url tool search iphone ipad ipucu workspace mail newsletter subscription cache language html5 mobile ios app store store in-app purchase purchase verification storekit itunes connect itunes laptop notebook job mfyz spam meta wanda digital medya startups link plugin proje kampanya assets framework object internet oyun ruffles css3 browsers support gimp howto nasıl osx player sql query injection svn subversion regex ui ux icons media sosyal cms wordpress server pear mdb2 prepare execute mysql mssql pgsql license lisans wireless session cookie lifestream dokuman applications free design table chart share kontrol yapıları if switch ie browser parse opengraph optimization fql date tarih banner bootstrap logo calendar diff zaman optimizasyon nedir icon ikon grafik download firefox db generator editor sitemap seo imza signature open source phpstorm jetbrains ide login internet explorer git version control deployment istatistik insanlar graph database kitap ajax analyse procedure statistics xhtml tebrik xmlhttprequest radio style pharma hack while button kurulum