Html Dersleri 6: Form Oluşturma

Html derslerimizin altıncısı olan form oluşturma işlemleri ile devam ediyoruz. Eğer önceki dersleri takip etmek istiyorsanız html dersleri linkinden faydalanabilirsiniz. Formlar kullanıcının web sitesiyle etkileşime girmesi açısından önemlidir. Etkileşime girmek derken site içerisinde arama yapma, yazılara yorum ekleme, kullanıcı girişi yapma, resim veya dosya ekleme gibi işlemlere diyoruz. Formlar olmasaydı sayfalar sadece statik öğelerden oluşmuş olacaktı, formlar ile sayfalarımız artık dinamik bir yapıya kavuşacak. Tabi şunu belirtmekte fayda var sadece html form öğelerini bilmek bu yukarıdaki saydığımız işlemleri gerçekleştirmek için yeterli olmayacak.

Basit bir form oluşturma

Bütün form öğeleri mutlaka <form> ….</form> öğeleri arasına yazılır. Aşağıdaki örnekte bir text kutusu ve bir butondan oluşan basit bir form tasarlanmıştır.

Dikkat ettiyseniz form öğesinin 2 adet parametre aldığı görülüyor. Bunlar action ve method parametreleri.

1. Action parametresi: form öğesinin olmazsa olmaz parametrelerinden biridir. Kullanıcının girdiği verilerin hangi sayfada işleneceğini gösterir. Örneğin çift tırnak arasına kayit.php yazılırsa girilen veriler bu sayfada işlenmek için oraya postalanır.
2. Method parametresi: Verilerin postalanma biçimini belirtmek için kullanılır. Genellikle get veya post parametreleri kullanılır. Örneğin get ile bir arama yaptığınızda adres çubuğunda aramanızla ilgili bilgilerin yer aldığını görürsünüz. Bu nedenle şifre gibi gizli bilgiler bu metotla kullanılmaz. Post ise daha güvenli bir veri gönderim tekniğidir.

Şimdide <form> etiketleri içerisindeki öğeleri inceleyelim.

1-Input Text: Bu klasik içerisine bir şeyler yazmamızı sağlayan dikdörtgen şeklindeki form öğesidir. Metin kutusu, textbox veya textfield diye adlandırabiliriz.

2-Input Submit: Bu kontrol öğesi girilen verileri form action ve post öğesinde belirtilen yere göndermeye yarar.

3-Input Password: Şifrelerinizi girerken bunları gizleyerek ekrana bakan kişilerden gizleyen, text öğesinin benzeri bir kontroldür.

Gelişmiş Formlar Oluşturma

Şimdide biraz daha kompleks formlar oluşturalım. Aşağıdaki örnekte diğer form öğelerinin de yer aldığı basit bir üye kayıt formu yer alıyor.

Formu oluşturmak için gerekli kodlar.

4-Input radio: Radio öğesi birden fazla seçenek arasından bir tanesini seçmek için kullanılır. Dikkat etmeniz gereken kısım ilişkili radio öğelerinin adları aynı olmalıdır.

5-Input Checkbox: Checkbox birden fazla seçenek arasından bir veya daha fazlasını seçmek için kullanılır. Örnek olarak dilleri verdim. Bir kişi birden fazla dil bilebilir.

6-Select: Önceden tanımlanmış seçenekler arasından bir tanesini seçmek için kullanılır. Örnek olarak yaşadığınız il güzel bir örnek.

7- Textarea: Text kutusunun daha büyük ve çok satırlı biçimidir. Satır ve sütün sayısı değiştirilerek büyüklüğü ayarlanabilir.

8-Input reset: Bu kontrol ise formu göndermek için değil içerisindeki verileri temizlemek için kullanılır.

En çok gereksinim duyulan form öğelerini basit şekilde anlatmaya çalıştım. Daha farklı form kontrolleri ve bunların değişik parametreleri de mevcut fakat başlangıç aşaması için yukarıdaki öğeler size yeterde artar bile. Html ile form oluşturma dersim burada sona eriyor, bir sonraki derste buluşmak üzere kolay gelsin.