HTML Dersleri [Ders no: 8]
HTML Form Elemanları

Ne kadar güzel bir gün değil mi? Tam da yeni bir derse açıktığınız bir gün. Web yazılım uzmanı olacak olan sizlerin duyduğu bu öğrenme açlığını bu ders giderecek. Hadi başlayalım!

Web sayfalarının işaretleme dili ile hazırlandığını biliyorsunuz. İnternetten bilgi alışverişlerini form ile sağlarız. HTML form hakkında bir önceki dersimizden iki bilgi çerçeveleyip verelim ve ondan sonra yeni derse geçelim:

[1]
[2]

Peki bu HTML dersimizin konusu nedir? Bu dersin konusu form elemanları. Bu dersi oluşturan etiketleri iyi anlamalısınız! Bu HTML etiketleri neden form elemanları ismini almıştır? Kabuk etiketi form olduğundan dolayı bu adı alırlar. Bu elemanların barındırdığı bilgiler <form></form> etiketinin çevrelediği alanda olmakla submit yapılabilirler.

Submit dediğimiz nedir? Ziyaretçi sitedeki form olan sayfayı ziyaret eder; Forma bilgiler girer ve sunucuya bunların gitmesini ister. İşte tarayıcıdaki bu bilgilerin gönderilmesi işlemine submit denir.

Bütün HTML etiketlerinde aynı yazım kuralları (W3C) geçerlidir. Nedir bu HTML yazım kuralları? HTML dersleri boyunca ele almakta olduğumuz bu kuralların birini burada zikredelim.

Önce dede etiket açılır; Sonra oğul ve torun etiket açılır. Dede etiketini kapatmadan önce torun; sonra oğul etiketi kapatılır. Oğul dünyaya gelmeden torun dünyaya gelmemesi gibidir. Bir de şunun gibidir; kapsayan şey her ne ise o dışarıda kalır. Kat kat ve iç içe olma durumu...

Bu form elemanları nereye yazılır? Web tasarımcı olarak nereye yazılacaklarını bizler belirleriz. Ama nerede olmaması gerektiğini HTML 5 kuralları belirlemektedir. Bu HTML elemanları sayfanın en başındaki resimde görüldüğü gibi form etiketi açılmadan yazılmaz ve kapatılmadan önce yazılması gerekir.

Form elemanlarının bir kısmı formun yani bilgi alma sürecinin yönetiminde vazife alır. Bir kısmı da sunuculara bilgi taşıyan uçlardır.

Önceleri bilgi alan form elemanları üç beş tane idi. HTML 5 ile sayıları epey arttı. En yaygın olan ve eskiden beri var olanı type=text olan form elemanıdır.

Bu type=text ile telefon numarası da alırsınız; email adresi de alabilirsiniz; şifre de alırsınız vs.. Ama her bilgi türü için bu etiketi kullanan web tasarımcısı bu etikete girilen bilginin format uyumunu kontrol etmelidir. Kontrol için elle kod yazmak bitmesi uzun süren proje demektir.

Bu nedenler ile bir tek satır üzerinden bilgi girişine imkan tanıyan type=text etiketi yetmez; size de yetmesin. Neredeyse her bigli formatına HTML 5 ile gelen form elemanlarının hepsini öğrenin ve yeri geldikçe kullanın. Peki form elemanları kaç tanedir? Gelin birlikte sayalım.

[1]
<input type=password>
Password tipindeki elemana girilen bilgiler * ile maskelenir. Klavyeden girilen her bir tuş ekranda * ile gösterilir. Action daki yazılı sayfaya giden şey klavyeden ne girildiyse odur. Ekrana bakan gözlerden klavyeden girilen karakterleri bu eleman ile saklarız.

[2]
<input type=checkbox>
Ziyaretçiden onay kutusu ile bilgi almayı sağlar. İşaretleme kutucuğu gözükür; birinci tıklamada kutucuk seçili hale geçer ikinci tıklamada ise seçililik kalkar.

[3]
<input type=text>
Tek satırlık bilgi almayı sağlar. İstenirse maxlength özelliği (attribute) ile girilebilecek karakter sayısı sınırlandırılabilir.

[4]
<input type=color>
Kullanıcıdan renk bilgisi almayı sağlar. Kullanıcının seçtiği renk RGB denilen renk kodu ile sunucuya iletilir. Eğer value parametresine bir değer verildiyse ilk değer olarak o gözükür. Örneğin value="#00FF00" şeklinde değer verildiğinde kutucuk yeşil renk ile belirir.

[5]
<input type=date>
Tarih bilgisi almak için kullanılır. min ve max değerleri ile kısıtlama getirilebilir. Tarih bilgisi formatı YY-AA-GG şeklinde çalışır. Buradaki kısaltmaların açılımı şöyledir:
YY:yıl
AA:ay
GG:gün.
Value parametresi girilerek ilk değer verilebilir. Tarayıcıda kişinin cihazındaki ayarlara göre gösterim yapılır.

[6]
<input type=datetime-local>
Tarih ve saat bilgisi almak için kullanılır. Bazı tarayıcılarda sorun çıkartabilir. type=date deki gibi cihazın yerel ayarlarına göre gösterim olur.

[7]
<input type=email>
type=email olan bir form elemanına girilen bigli formata uygun mu bu kontrol yapılır. E-mail adres formatında bilgi girilmediyse uyarı yapılır. E-posta adresi gerçekmi sahte mi buna bakılmaz. Bakılan tek şey @ işareti ve @ işaretinin öncesiyle sonrasında birşeyler yazılı mı o kontrol edilir.

[8]
<input type=file>
Dosya göndermek için dosya seçimine yardımcı olur. Sunucuya gönderilecek dosya herhangi bir dosya olabilir. Eğer dosya uzantı ve tipine göre süzgeçleme yapılacaksa accept parametresine değer eşitlemesi yapılır.

Örneğin: .jpg, .pdf, or .doc

audio/* anlamı "herhangi ses dosyası"
video/* anlamı "herhangi video dosyası"
image/* anlamı "herhangi resim dosyası"

Birden fazla dosya türü yada tür grubu belirtilecekse virgül ile accept ataması yapılır.

[10]
<input type=image>
Form submit butonu gibi fonksiyonu vardır. SRC parametresi ile verilen resim gözükür. Gözüken resme tıklandığında formun submit değerine girilen bilgiler gönderilir.

[11]
<input type=month>
Kullanızı (ziyaretçi) size falan yılın ayını belirtecekse bu input (giriş) elemanı kullanılabilir. min ve max parametresi verilebilir.

[12]
<input type=number>
Form elemanlarından number ile sayı alınır. Bu alana focus olunduğunda klavyedeki harfler tuşlanırsa bu tuşlama yok sayılır. virgül ve nokta aynı zamanda + ve eksi tuşlamaya izin verildiği olur.

[13]
<input type=radio>
Name değeri aynı olan type=radio dan sadece birisi seçilebilir. Radio'nun yanındaki yazı sunucuya gitmez. Yanındaki yazı ziyaretçinin seçim yapabilmesi için bilgilendirmedir. value değeri sunucuya submit edilir.

[14]
<input type=range>
Radyonun ses ayarı gibi bir görüntü oluşturur. Bu görüntü üzerinden kullanıcı bir değer girişi yapar. max ve min değer ataması yapılabilir. Submit (gönderme) yapılan değer şekil ile seçilmiş sayıdır.

[15]
<input type=reset>
Sayfayı yeniden istemenin etkisi gibi bir etki oluşturur. Bu reset butonuna tıklandığında ilgili formdaki ziyaretçinin giriş yaptığı bilgiler sıfırlanır. Value değerindeki kelime ziyaretçiye gözükür. Örneğin "formu sıfırla" değerini value'ya atayabiliriz.

[16]
<input type=tel>
Tarayıcı bu türü desteklemiyorsa bildiğiniz text tipinde bir davranış oluşur. pattern parametresi ile değer verilerek klavye kısıtlaması yapılabilir.

[17]
<input type=week>
Hafta seçimi yapılır.

[18]
<input type=time>
Saat seçimi yapılır.

[19]
<input type=url>
Tarayıcının adres çubuğundaki internet yol bilgisine URL denir. Bu tarz bir URL bilgisi alımında kullanılabilir.

[20]
<input type=submit>
Formun sunucuya gönderilme işlemini tetikleyen butondur.

[21]
<select> <option></option> </select>
Aşağı açılır seçimlik bir menü oluşturur. Menünün elemanları option etiketi içinde yer alır. option alt etiketinin value değeri seçim ile elde edilen bilgidir. Yani sunucuya gönderilen değer option etiketinin value parametresidir.

[22]
<textarea> </textarea>
Çoklu satır yazı alışverişini sağlar. cols ve rows parametreleri ile satır ve sutun sayısı verilir.

[23]
<input type=button>
Reset gibi submit gibi form yönetimi için kullanılan form elemanları arasındadır. Buton görüntüsü sağlar. Javascript ile bu butonun onclick olayına kod yazılabilir.

---