Html, form elemanları
7699 1

Html, Form Elemanları

Form elemanlarını kullanıcılardan bazı bilgiler istediğimizde kullanırız. Kullanıcı hazırladığımız formu doldurur ve bilgileri bize gönderir. Şimdi bu form elemanlarını birlikte tek tek ele alalım.

Form Nesnesi

Bu eleman tüm form elemanlarını kapsayacak şekilde yerleştirilmelidir ve bu çok önemlidir. Aksi halde yani kapsamazsa bazı bilgiler form ile gönderilmeyebilir.

<form action="" name="form1" method="post">
	<!--Buraya diğer form elemanları gelecektir-->
</form>

Form Nesnesinin Özellikleri

Özellik Açıklama Aldığı Değerler
action Formda girilen bilgilerin gönderileceği adres yazılır. Eğer boş bırakılırsa mevcut sayfaya gönderilir. Ör: "index.php"
name Her form elemanının kendine has bir ismi olmak zorunda Ör: "form1"
method Formdan gelen verilerin gizli yada açık olarak gönderileceğini  belirtir. Post gizli, Get(Adres çubuğu) açık yoldur. POST | GET
enctype Formdan bir dosya gönderilecekse eklenir. "multipart/form-data"

Metin Kutusu

Formlarda en çok kullanılan nesnelerdir. Herhangi bir metin veya sayısal giriş işleminde kullanılır.

<input type="text" name="adi" maxlength="15" value="Adınız" size="30"/>

Metin Kutusu

Yazım şekli yukarıdaki gibidir. Boş ve satır düzeyinde bir elementttir. 

Metin Kutusu Özellikleri

Özellik Açıklama Aldığı Değerler
value Metin kutusunun içerisindeki değeri değiştirir. Karakter
name Her form elemanının kendine has bir ismi olmak zorunda Karakter
maxlength Metin kutusuna yazılacak karakterleri sınırlandırmak için kullanılır. Yukarıda 15 karakter ile sınırlandırılmış. Sayısak değer
size Metin kutusuna karakter cinsinden bir genişlik vermek için kullanılır. Yukarıdaki mrtin kutusu 30 karakter genişliğe sahip. Sayısal değer
type Tüm input elementlerinde olması gereken ve o nesnenin tipini belirten özellik. Yukarıda metin kutusu için aldığı değer "text" dir. "text"
autocomplete Html5 ile gelen bir özellik, önceden kayıtlı verilerin çıkmasını engeller. Siz bir metin kutusuna bir şeyler yazmaya başladığınızda daha önceden benzer bir şeyler yazılmışsa otomatik olarak tarayıcı bunları çıkarır, bu durumu engellemek için değeri "off" yapılmalıdır. on | off
autofocus Html5 ile gelen bir özellik, sayfa yüklendiğinde otomatik olarak odaklanılmasını istediğiniz input elemanına yazabilirsiniz. autofocus
placeholder Html5 ile gelen bir özellik, başlangıçta metin kutusu içerisinde görünmesini istediğiniz metni yazabilirsiniz. Tıklanıp yeni bir metin yazılmaya başlandığında kaybolacaktır. Karakter
required Bir input alanının boş bırakılmasını istemiyorsanız zorunlu hale getirmek için kullanılır. required
pattern Html5 ile gelen bir özellik, regexp yazım formatı ile kullanıcıyı istediğiniz formata uygun veri girişine zorlamanız mümkün.  Regexp
disabled Metin kutusunu pasif duruma getirir, veri girişine izin verilmez. disabled

Bundan sonraki her elemanda standart olan özelliklerin tanımlamaları yapılmayacak, örneğin value, name v.s. gibi.

Submit ve Reset Butonlar

Bu butonlar özel butonlardır. Submit buton ile form verilerini formun "action" özelliğinde bulunan adrese gönderebilir, reset buton ile form verilerini temizleyebilirsiniz. Yazım şekilleri ve görünümleri;

<input type="submit" name="gonder" value="Gönder"/>
<input type="reset" name="temizle" value="Temizle"/>

Submit ve Reset Butonlar

Şifre (Password) Kutuları

Adından da anlaşılacağı üzere şifre girişlerinde kullanılan elementtir. Karakterler yazılmaya başlandığında kutu içerisinde sadece yuvarlaklar yada yıldız karakterleri görünür. Kullanımı ve özellikleri metin kutusu ile aynıdır. Tek fark "type" özelliği için "password" değeri verilmesidir.

<input type="password" name="sifre" value="deneme"/>

Şifre Kutusu

Onay (Checkbox) Kutuları

Kullanıcıya birden fazla seçim hakkı sunulacak veriler için kullanılır. Örneğin hobiler, sevdiğiniz renkler v.s. gibi

Hobileriniz; <br/>
Kitap Okumak<input type="checkbox" name="kitap" value="1"/>
Spor Yapmak<input type="checkbox" name="spor" value="1"/>
Müzik Dinlemek<input type="checkbox" name="muzik" value="1"/>

Checkbox 1

Bu kullanımda "value" özelliklerini "1" yaptık çünkü içeriğinin çok ta bir önemi yok. Form gönderildiğinde checkbox tiklenmiş ise checkbox'ın adında bir değişken oluşur, aksi halde oluşmaz. Yani biz kullanıcının bir seçeneği işaretleyip işaretlemediğini o değişkenin oluşup oluşmadığından anlarız, değeri önemli değildir.

Yada aşağıdaki gibi farklı bir kullanımıda değerlendirebilirsiniz. Dizi şeklinde kullanarak bir döngü yardımı ile tüm checkbox'ları çekmeniz mümkün. Bu kullanımda checkbox'ların value değerlerine ne yazdığınız önemli!

Hobileriniz; <br/>
Kitap Okumak<input type="checkbox" name="hobiler[]" value="kitap"/>
Spor Yapmak<input type="checkbox" name="hobiler[]" value="spor"/>
Müzik Dinlemek<input type="checkbox" name="hobiler[]" value="muzik"/>

Checkbox Özellikleri

Özellik Açıklama Aldığı Değerler
checked Onay kutusunu seçili hale getirir. checked

Radio Butonlar

Radio butonlar checkbox'lardan farklı olarak, kullanıcıya çoklu seçenek içerisinden yalnızca birinin seçilmesi gerektiği durumlarda yöneltilir. Örneğin cinsiyet, tuttuğunuz takım v.s. gibi.

Cinsiyet; <br/>
Erkek<input type="radio" name="cinsiyet" value="erkek"/> <br/>
Bayan<input type="radio" name="cinsiyet" value="bayan"/>

Radio Button

Burada ilk olarak şuna dikkat edelim. Bir form içerisinde aynı "name"e sahip 1 eleman olabilir demiştik. Fakat burada iki radio butonun ismi de aynı, bu durum bir çelişki değil tabii ki. Radi butonlardan yalnızca seçilecek olan gönderileceğinden zaten bu sıkıntı olmaktan çıkıyor. Hangisi seçilmiş ise onun value değerindeki değer gönderilir. Yine başlangıçta seçili olmasını istediğiniz radio buton varsa checbox'larda kullandığımız "checked" özelliğini kullanabilirsiniz.

Çok Satırlı Metin Alanı (Textarea)

Metin kutusunun çok satırlı olanı diyebiliriz. Birçok özelliği de aynıdır. Örneğin adres bilgisi gibi uzun bilgilerin alınması için kullanılabilir.

Adres: <br/>
<textarea name="adres" id="adres" cols="30" rows="10"></textarea>

Textarea Nesnesi

Textarea Nesnesi Özellikleri

Özellik Açıklama Aldığı Değerler
cols Textarea'nın kaç sütunluk(karakter) genişliğe sahip olacağını belirtir.  Sayısal Değerler
rows Textarea'nın kaç satıra sahip olacağını belirtir.  Sayısal Değerler

Button (Düğme) Elemanı

Görünüm olarak submit ve reset butonlara benzer düğmeler oluşturur fakat işlev olarak form nesnesine bağlı değildir. Tıklandığında javascript kodları çalıştırmak isterseniz button nesneleri bu işlem için uygundur. Eğer istenirse type özelliği ile submit veya reset buton haline getirilebilir.

<button name="gonder" type="button">Buraya Tıkla!</button>
<button name="formGonder" type="submit">Formu Gönder</button>
<button name="formSifirla" type="reset">Formu Sıfırla</button>

Button Elementi

Button Elementi Özellikleri

Özellik Açıklama Aldığı Değerler
type Butonun ne amaçla kullanılacağını belirtir. button, submit, reset

Seçim Kutuları (Liste ve Açılır Kutular)

Seçim kutuları, birden fazla seçenek arasından tek seçim yapma yada birden fazla seçim yapma işlemleri için kullanılabilir. En basit yazım şekli ve oluşan görüntü aşağıdaki gibidir.

<select name="uyruk" id="uyruk">
	<option value="0">Bir Seçim Yapınız</option>
	<option value="tc">T.C.</option>
	<option value="diger">Diğer</option>
</select>

Seçim Kutusu

Yukarıda gördüğünüz gibi "select" etiketleri arasına "option" etiketleri yerleştiriliyor. Herbir "option" etiketi açılır kutudaki bir elemanı temsil ediyor. Burada dikkat edilmesi gereken şey "value" özelliği içerisinde programsal değer, "option" etiketleri arasında ise görünecek metin yani etiket değeri belirtilmektedir. Sonuç olarak formdan "select" etiketinin name ifadesi içerisinde "option" etiketinin "value" değeri gönderilir. Yukarıdaki gösterimde şu an uyruk değişkeni içerisinde "0" değeri gönderiliyor. 

Eğer başlangıçta seçili olarak gelmesini istediğiniz değer farklı bir sıradaysa, bu durumda şöyle bir ekleme yapabilirsiniz. Aşağıda başlangıçta "T.C." ifadesinin seçili olarak gelmesini isterseniz;

<select name="uyruk" id="uyruk">
	<option value="0">Bir Seçim Yapınız</option>
	<option value="tc" selected="selected">T.C.</option>
	<option value="diger">Diğer</option>
</select>

Seçim Kutusu 2

Eğer göstermek istediğiniz açılır kutu değil de bir liste kutusu ise "size" özelliği işinizi görür. Belirtilen değer kaç satırdan oluşacağıdır.

<select name="uyruk" id="uyruk" size="3">
	<option value="0">Bir Seçim Yapınız</option>
	<option value="tc" selected="selected">T.C.</option>
	<option value="diger">Diğer</option>
</select>

Seçim Kutusu 3

Liste kutusu içerisinde çoklu seçim yapmak isterseniz "multiple" özelliğini kullanmalısınız. Kullandığınız takdirde "ctrl" düğmesi ile birlikte çoklu seçim yapabilirsiniz.

<select name="uyruk" id="uyruk" size="3" multiple="multiple">
	<option value="0">Bir Seçim Yapınız</option>
	<option value="tc" selected="selected">T.C.</option>
	<option value="diger">Diğer</option>
</select>

Seçim Kutusu 4

Select (Seçim Kutusu) Elementi Özellikleri

Özellik Açıklama Aldığı Değerler
selected Hangi seçeneğin aktif(Seçili) olarak geleceğini belirler. selected
size Açılır kutuyu liste kutusuna çevirir. Verilen değer kadar satır sayısına sahip olur. Sayısal Değer
multiple Çoklu seçim yapılmasına olanak sağlar. multiple

 

Yorumlar
Coder 3 yıl önce dedi ki;
süper bir paylaşım hocam.rabbim yardımcınız olsun Cevapla
^
X