HTML Form Oluşturma
<form> etiketi, gerçek formu oluşturmak için kullanılır – şuna benzer:
1 2 3 4 5 | <form> Input elemanları </form> |
<form> etiketi, formunuzun içeriğini içerir. Bu içeriğe form widget’ları, kontroller veya alanlar denir – hepsi aynı şeyi açıklar. Bu içerik çoğunlukla input alanlarının farklı türleridir (veya gerçekte kullanılacak doğru kelime olan durumlar) ve burada burada bir düğmedir. Şimdi sadece iki input alanı ve bir gönder butonu içeren çok basit bir forma bakalım:
1 2 3 4 5 6 7 | <form> Ad: <input type="text" name="ad" > <br /> Soyad: <input type="text" name="soyad" > <br /> <input type="submit" value="Kaydet" > </form> |
Gördüğünüz gibi, input alanları <input> öğesi tarafından tanımlanmıştır. input öğesi, kullanıcının düzenleyebileceği, yazılı bir veri alanını temsil eder. type niteliği, hangi girdi durumunu, bu durumda normal bir metin öğesini kullandığınızı tanımlar ve name niteliği, tek tek girdi alanlarını ifade eder. type niteliği, input öğesinin gerçekte ne olduğunu belirleyen ana anahtardır.
Button, <input> öğesi kullanılarak da tanımlanır, ancak type niteliğinin değeri, önceki iki alandaki “text” yerine “submit” dir ve bu, bunun bir gönder düğmesi olduğunu gösterir. Gönder düğmesinin value isimli ek bir özelliği, vardır. Value özniteliğinin değeri, butonun ne üzerinde ne yazacağını tanımlar ve bizim örneğimiz için “Kaydet” i seçiyorum.
Form Elemanları
Fieldset etiketi ile gruplama
Daha uzun bir formunuz varsa, farklı alan türlerini gruplamak çok kullanışlı olabilir. Bunu yapmak için <fieldset> öğesini kullanırsınız. Grubun adı, <fieldset> öğesinin alt öğesi olan ilk <legend> öğesi tarafından verilir. Buna vardığımızda, başka bir öğeyi, <label> ‘i tanıtmak istiyorum. Etiket, topladığınız her bir öğe parçasına bir başlık eklemek için kullanılır.
Şimdi bu yeni unsurları kullandığımız bir örnek verelim;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <form> <fieldset> <legend>İletişim Bilgileri</legend> <label for="ad">Adınız:</label> <input id="ad"><br /> <label for="tel">Telefon:</label> <input id="tel"><br /> <label for="eposta">Eposta:</label> <input id="eposta"> </fieldset> <fieldset> <legend>Kullanıcı Bilgileri</legend> <label for="kad">Kullanıcı Adı:</label> <input id="kad"><br /> <label for="sifre">Şifre:</label> <input id="sifre"><br /> </fieldset> <input type="submit" value="Formu Gönder" /> </form> |
Neden fieldset kullanmalı?
Bu forma bir şeyler eklemek istediğinizi hayal edin, belki de en sevdiğiniz yiyecekler. Daha sonra farklı türdeki yiyecekleri yeni bir fieldset gruplandırır ve formunuza netlik kazandırırsınız. Ayrıca input alanına id niteliğini ekledim. Bu, bu öğelerin benzersiz tanımlayıcısını tanımlar ve onu etiketler atarken kullanırız. for niteliğini kullanarak input alanını ve etiketi bağlarız.
Web formunuzda kullanabileceğiniz bazı farklı input alanı türlerini – metin alanı ve submit butonunu – zaten inceledik.
Bir metin alanı genellikle 20 karakter uzunluğundadır, ancak daha büyük bir metin alanına ihtiyacınız varsa, nedeni nedeniyle bu değiştirilebilir. Tek yapmanız gereken size özelliğini kullanmaktır;
1 2 3 | <input type="text" size="35" maxlength="140"> |
Form Verilerinin Gönderilmesi
Şimdiye kadar, kullanıcı tarafından girilen verilerin gerçekte nasıl gönderileceğini incelememiştik. E-posta adresinize, başka bir sayfaya ya da veritabanınıza gönderebilirsiniz.
Hangi seçeneği seçerseniz seçin, her zaman tarayıcının kullanıcı girdilerini nasıl işleyeceğini tanımlamanız gerekir. Bu, iki değerden birine (post veya get) sahip olabilen method özelliği aracılığıyla tanımlanır.
1 2 3 4 5 6 7 | <form action="verileri-isleyecek-sayfa" method="post"> .... </form> |
Get değeri, verilerin tarayıcı tarafından bir url’ye kodlanmasını sağlar ve gönderi, verilerin bir veritabanına veya e-postanıza gönderildiği anlamına gelir. Bu, genellikle form gönderimleri için kullanılan posta değerini kullanacağınız anlamına gelir.
Verilerinizi işlemenin en kolay yolu, verileri e-postanıza göndermektir. Tek yapmanız gereken action niteliğini form öğesine ve yöntem niteliğine eklemektir. Action niteliği, tarayıcıya formunuzun içeriğiyle ne yapacağını söyler ve method niteliği tarayıcıya bunun nasıl işleneceğini söyler. İşte bir örnek:
1 2 3 4 5 6 7 | <form action="sayfa.html" method="post"> Ad: <input type="text" name="ad" /> Soyad: <input type="text" name="soyad" /> <input type="submit" value="Formu Gönder" /> </form> |
Yorum Yap