HTML Formlar

Sayfa içeriği

Form kavramı

Form genellikle, kullanıcının sayfaya veri girmesini sağlamak amacıyla sayfaya yerleştirilen bir dizi öğedir.
Formlarla ilgilendiğimiz yaygın örnekler, giriş sayfaları, yeni hesap oluşturma sayfaları, yorum ekleme, gönderi ekleme vb.

Formun kendisi sayfada görüntülenen bir şey değil, içine koyduğumuz etiketler için bir kapsayıcıdır.
Formun temel fikri, içine yerleştirilen öğelerde kullanıcı tarafından girilen bilgileri toplamak ve bir kerede kaydedeceğimiz yere göndermektir.

Bu derste, forma yerleştirilebilecek özellikleri ve her birinin rolünü öğreneceksin.

Teknik bilgi

Kullanıcının bilgileri bir forma doldurmasını istediğimiz öğeleri düzenlemenin, gelecekte JavaScript dilini öğrendiğinde öğreneceğin birçok faydası vardır.
Tarayıcının, forma girilen tüm bilgileri kaydedileceği yere göndermeden önce kontrol etmesi gibi fayda olur.
Basit bir örnek olarak, yeni bir hesap oluşturmaya çalışan kullanıcıya, yalnızca 5 karakter girdiğini tespit edersen girdiği şifrenin kabul edilemez olduğunu ve en az 8 karakter olması gerektiğini söylersin.

Sayfaya bir form eklemek

Genellikle sayfaya form eklemek için aşağıdaki gibi <form> etiketini kullanırız.

<form>
    <!-- Burada formun tüm bağımlı öğelerini eklemelisin -->
</form>

Aşağıdaki örnekte, kullanıcı adı girmek için bir metin kutusu, şifre girmek için bir metin kutusu ve siteye girilen bilgileri göndermek için bir buton içeren bir form ekledim.
Not: Bu sadece seni form içindeki öğeleri nasıl düzenleyeceğin konusunda genel bir fikir vermeyi amaçlayan bir tasarımdır.

<form>
    Kullanıcı adı<br>
    <input type="text"><br><br>
    şifre<br>
    <input type="password"><br><br>
    <input type="button" value="Login">
</form>

kod dene

Form içeriğini göndermek için düğme eklemek

Oluşturduğun her form, tarayıcıya bu düğmenin forma girilen verileri siteye göndermek için olduğunu söylemek için submit türünde <input type="submit"> şeklinde tek bir düğme içermelidir.

Teknik Bilgi

Varsayılan olarak, sumbit türünde bir düğme tıklandığında, tarayıcı, forma iletilen verilere göre kullanıcıya yeni bir sayfanın görüntülenmesini bekler.
Kullanıcının aktarılacağı sayfa belirtilmemişse tarayıcı, formun bulunduğu sayfada mevcut sayfayı tekrar açacaktır.

Verilerin gönderileceği sayfanın nasıl belirleneceğini biraz sonra öğreneceğiz, ancak şimdilik yalnızca içerik göndermek için düğme fikrine odaklanmalısın.

Aşağıdaki örnekte, üzerinde Giriş kelimesini gösterdiğimizi belirten form verilerini göndermek için bir buton ekledim.

Not: Giriş düğmesine tıkladığında, form verilerini gönderirken gitmek istediğimiz sayfayı belirtmediğimiz için tarayıcının mevcut sayfanın göründüğü tüm sayfayı yeniden görüntüleyeceğini fark edeceksin.

<form>
    Kullanıcı adı<br>
    <input type="text"><br><br>
    şifre<br>
    <input type="password"><br><br>
    <input type="submit" value="Login">
</form>

kod dene

Form verilerini gönderme yöntemini belirtmek

Form verileri gönderilirken veri aktarımı için kullanılacak yöntem belirtilmelidir.
post ve get olmak üzere iki ana yöntem vardır.

Formda veri gönderme yöntemini belirtmek için method özelliğini ekliyoruz ve aşağıdaki gibi get değeri veya post değeri iletiyoruz.

<!-- get yöntemini kullanacaksak. -->
<form method="get">
<!-- post yöntemini kullanacaksak. -->
<form method="post">

get yöntemi hakkında bilgiler.

Forma girilen veriler, gönderileceği sayfanın bağlantısına eklenir.
Bağlantı boyutu 2048 karakteri aşamadığından, sayfa bağlantısı karakter sayısıyla sınırlıdır.
Gönderilen tüm veriler bağlantıda göründüğünden, gönderilen veriler kullanıcı şifresi gibi hassas ise bu yöntem geçerli değildir.
Sayfa kaydetmeyi (bookmark) etkinleştirmek istiyorsan bu yöntem mükemmeldir.

post yöntemi hakkında bilgiler.

Forma girilen veriler normal bir kullanıcının göremeyeceği şekilde gönderilir.
Gönderilecek veri miktarı konusunda endişelenmeden sınırsız sayıda mektup gönderebilirsin.
Bu yöntem, gönderilen verilerin kullanıcının şifresi veya kredi kartı bilgileri gibi hassas olması durumunda iyidir.
Sayfa kaydetmeyi (bookmark) etkinleştirmek istiyorsan bu yöntem kullanışlı değildir.

Not: Bir sayfa tasarımcısı olarak (web designer), veri gönderme yöntemleri arasındaki farkı hiç umursamıyorsun çünkü bu, onu programlamaktan sorumlu olan site geliştiricisi (Web Developer)'nin sorumluluğundadır ve elbette bunu anlayacaksın.
Gelecekte siteleri programlamayı öğrenmeye başladığında daha doğru bir şekilde anlarsın.

Forma yerleştirilen etiketlere isim vermek

Kullanıcının verilerini girebilmesi veya içinden verilerini seçebilmesi için forma yerleştirilen herhangi bir etiketin name niteliğine sahip olması gerekir, her etikete aşağıdaki gibi name niteliği için farklı bir değer verilmesi gerektiğine dikkat edilmelidir.

<form>
    <!-- Bu etikette name niteliğini ekledim ve ona "username" değerini verdim. -->
    <input type="text" name="username">
    <!-- Bu etikette name niteliğini ekledim ve ona "password" değerini verdim. -->
    <input type="password" name="password">
    <!-- Bu etiketin name özelliğini içermesine gerek yoktur çünkü içine bir değer girmeyeceğiz. -->
    <input type="submit">
</form>

Etiketlere verilen name kelimesi kullanıcının önüne görüntülenmez, ancak kullanıcının ilk kutucuğa yazdıklarını username ikinci kutuya yazdıklarını password olarak tarayıcıya kaydetmesini sağlar, böylece girilen her bilginin onu diğerlerinden ayıran bir değeri olur.

Burada kullanıcının ilk metin kutusuna "k-kudo" değerini ve ikinci kutuya "ens" değerini girdiğini varsayarsak, değerleri bu basit formda programlı olarak saklayacaktır.

[
    username: "k−kudo",
    password: "ens"
]

Etikete name özelliği ile bir isim verildiğinde, doldurduğunda tarayıcı seni önerilerde bulunabilmektedir.
Basit bir örnek olarak, bulduğun herhangi bir siteye giriş yapmaya çalıştığında, kendisini seçmek istemeni durumunda, giriş yapmak için kullandığın önceki bilgileri seni gösterecektir.

Form içeriğinin nereye gönderileceğini belirtmek

submit tipi ile bir butona tıklandığında form içeriğinin nereye gönderileceğini belirtmek için action özelliğini ekliyoruz ve ondan veri alacak sitenin URL'sini geçiyoruz.

Teknik bilgi

Site, verileri başka bir sayfada olduğu gibi görüntüleyebilir ve üzerinde değişiklik yapabilir ve bir veritabanına kaydedebilir vb.
Bunları, şu anda yalnızca sayfa tasarımı bölümünü öğrendiğin için şimdi değil, eksiksiz bir web sitesi geliştirmeyi öğrendiğinde öğreneceksin.

Aşağıdaki örnekte, kullanıcı verilerini post stilinde almak için önceden hazırladığımız k-html sitesinde form verilerinin başka bir sayfaya gönderileceğini ve ardından olduğu gibi görüntüleneceğini belirtiyoruz.

<form action="./submit−account.php" method="post">
     Username<br>
    <input type="text" name="username"><br><br>
    Password<br>
    <input type="password" name="password"><br><br>
    <input type="submit" value="Login">
</form>

kod dene

Formda otomatik tamamlamayı eklemek

Eğer formun içine yerleştirilen metin kutularını doldururken formun kullanıcıya öneriler göstermesini istiyorsan, autocomplete özelliğini <form> etiketine ekleyip öneri gösterip vermek istiyorsan on değerini verebilirsin, ve öneri göstermek istemiyorsan off değerini verebilirsin.

Varsayılan olarak, otomatik tamamlama varsayılan olarak etkindir, yani kendini belirtmesen bile <form autocomplete="on"> olarak belirtilir.

Aşağıdaki örnekte, formda otomatik tamamlamayı etkinleştirdim.
Yani burada, formu doldururken, tarayıcının metin kutularına daha önce girdiğin bilgileri seçmeni önereceğini fark edeceksin.

<form autocomplete="on">
   ...
</form>

kod dene

Aşağıdaki örnekte formda otomatik tamamlamayı kapattım.

Yani burada formu doldururken, tarayıcının daha önce girdiğin hiçbir bilgiyi seçmeni önermediğini fark edeceksin.
Bunun bazı tarayıcılarda farklılık gösterdiğini unutma.

<form autocomplete="off">
   ...
</form>

kod dene

Forma girilen değerlerin kontrolü kaldırmak

Varsayılan olarak, form, kullanıcı göndermeden önce gönder düğmesini tıkladığında girilen değer türlerini kontrol eder.
Doğru bulursa gönderir ve değilse, verileri gönderebilmesi için düzeltmeni gereken hataları bildiren bir mesaj gösterir.

Şimdi, forma girilen değerleri göndermeden önce tarayıcının otomatik doğrulamasını iptal etmek istersen, <form> etiketinin novalidate özelliğini <form novalidate> olarak ekleyebilirsin.

Not: Novalidate özelliği Safari dışındaki en popüler tarayıcılarda çalışıyor.

Aşağıdaki örnekte, forma girilen değerler üzerinde otomatik kontrolü iptal ettim.
Burada tarayıcının girilen e-postanın geçerli olup olmadığına bakmaması için novalidate özelliğini <form> etiketine ekledim.

<form novalidate>
   ...
</form>

kod dene

Form verilerini alan sayfanın nerede açılacağını belirtmek

Varsayılan olarak data gönder butonuna tıkladığında o anki sayfanın yerine datayı alan sayfa açılacaktır daha ne demek istediğimi anlamak için önceki örneklerdeki target="preview" özelliğini sil ve kodu dene.

Verileri alan sayfanın nerede açılacağını belirtmek istiyorsan, <form> etiketine target özelliğini eklemeli ve ona aşağıdaki değerlerden birini vermelisin:

_self: Açık olan sayfanın yerine yeni sayfanın açılmasını istiyorsan kullanırsın. (bu varsayılan seçenektir)

_blank: Tarayıcıda yeni bir sekme açmak ve sayfayı açmak istiyorsan kullanırsın.

_top: Yeni sayfanın mevcut sayfa ile aynı sayfada açılmasını ve içine yerleştirilmiş olan örtüşen sayfaları kaldırmanı istiyorsan kullanırsın.

_parent: Mevcut sayfanın bulunduğu sayfanın yerine yeni sayfanın açılmasını istiyorsan kullanırsın.

framename: Yeni sayfanın aynı sayfada bir çerçeve ( <iframe> ) içinde açılmasını istiyorsan kullanırsın.

Aşağıdaki örnekte, başka bir sayfaya veri gönderirken ikinci sayfayı yeni bir sekmede açan bir form ekledim.

<form target="_blank">
   ...
</form>

kod dene

Aşağıdaki örnekte, başka bir sayfaya veri gönderirken, aynı sayfaya yerleştirilmiş bir çerçeve içinde ikinci sayfayı açan my_iframe adlı bir form ekledim.

<form target="my_iframe">
    ...
</form>
<iframe name="my_iframe"></iframe>

kod dene

Formla birlikte kullanılan en önemli etiketler

Kullanıcının kendisinden istediğin bilgileri girmesini sağlamak veya onun için önceden hazırlamış olduğun bilgilerden birini seçmesini sağlamak için formlara eklenebilecek birçok etiket bulunmaktadır. Ileride hazır ürünler hakkında bilgi edineceksin. formlara eklenebilecek harika etiketler elde etmek için kullanabileceğin kütüphaneler var.

Işte bilmeni gereken en önemli etiketler:

<label>: Form içerisine yerleştirilen elemana özel bir isim vermek için kullanılır.

<button>: Bir düğme için kullanılır.

<textarea>: Birden fazla satırdan oluşan bir metin kutusu almak için kullanılır.

<select>: Değerlerinden birinin seçilmesi gereken bir açılır liste almak için kullanılır.

<datalist>: Birinin seçilebileceği bir açılır liste almak için kullanılır.

<fieldset>: Modele bordür eklemek için kullanılır, bu da daha güzel görünmesini sağlar.

<input>: Birçok form elde etmek için kullanılabileceği için en önemli etiketlerden biri olarak kabul edilir.

<input> etiketinin type özelliği

Bu etiket ile elde edilebilecek şekiller için, buna type özelliğini eklemeli ve almak istediğin şekli belirtmek için önceden tanımlanmış değerlerden birini vermelisin. Bunlar, tüm tarayıcılarda çalıştıkları için elde edilebilecek en önemli biçimlerdir:

<input type="text">: Düz metin kutusu için bu, varsayılan türüdür.

<input type="password">: Özel bir parola girişi metin kutusu için kullanılır.

<input type="number">: Sayıları girmek için özel bir metin kutusu için kullanılır.

<input type="email">: Bir e-posta girmek için özel bir metin kutusu için kullanılır.

<input type="button">: Normal bir düğme için kullanılır.

<input type="submit">: Form verilerini göndermek için özel bir düğme için kullanılır.

<input type="reset">: Formun tüm öğelerinin ilk değerlerini döndürmek için özel bir düğme için kullanılır.

<input type="file">: Kullanıcının cihazdan bir dosya seçmesini sağlamak için özel bir düğme için kullanılır.

<input type="range">: Bir tamsayı değeri seçmek için hareket ettirilebilen bir çubuğa sahip olmak için kullanılır.

<input type="checkbox">: Kare düğme için seçilebilir veya seçimi kaldırılabilmek için kullanılır.

<input type="radio">: Dairesel düğme için seçilebilir veya seçimi kaldırılabilmek için kullanılır.

Tüm özellikleri dene

Not: Bu özelliklerin nasıl kullanılacağını sonraki derslerde detaylı olarak öğreneceksin.

önceki ders sonraki ders