Anasayfa / Web Tasarım / Html / Html Dersleri 6: Form Oluşturma
html nedir?

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.

html basit form oluşturma

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.

html gelişmiş form oluşturma

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.

İlginizi Çekebilir!

html nedir?

Html Dersleri 5: Listeleme Etiketleri

Html derslerimizin beşincisi olarak listeleme etiketlerini düşündüm. Listeleme etiketleri derken kelime işlemci programlarında aşina olduğunuz …


4 Yorumlar

  1. üstad derslerin devamı ne zaman gelir acaba?

  2. Sen Pi'yi 5 al

    Derslerin devamını sabırsızlıkla bekliyoruz…Gerçekten güzel anlatıyorsunuz her anlattığınızı tek tek yapıyorum.Bir tek kafama bir şey takıldı,Yazdığımız kodların hepsi index’imizin en soluna yapışıyor.Ortaları ve sağ tarafı boş. kodu sayesinde alta ine ine devam ediyorum ama yan tarafa doğru gidemiyorum.Bu konuya da açıklık getirirseniz sevinirim.

  3. Öğrenmeye Çalışıyorum

    Derslerin devamını da yazar mısınız?
    Sanırım artık bu anlattıklarınızı sayfanın içinde farklı yerlere yerleştirmek var sırada.
    Devamı gelirse güzel olur

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload the CAPTCHA.