İlk HTML formunuzu oluşturun

Bu kılavuz sayesinde, ilk basit HTML formunu nasıl oluşturacağını öğreneceksin. Formlar, web uygulamalarının vazgeçilmez bir parçasıdır ve kullanıcılara bilgi girmelerini ve bir sunucuya göndermelerini sağlar. Adım adım rehberimizde, HTML formunun temel yapısını öğrenecek ve farklı öğelerin bir araya gelerek veri iletimini nasıl gerçekleştirdiğini anlayacaksınız.

En Önemli Bulgular

• Bir HTML formu <form>-etiketi ile tanımlanır.
• action ve method öznitelikleri, verilerin nereye gönderileceğini ve hangi yöntemin kullanılacağını belirler.
• Form alanları genellikle <input>, <label> ve <button> ile tanımlanır.
• Veriler ya GET ya da POST ile sunucuya gönderilebilir.

Adım adım Kılavuzu

1. HTML Temel Yapısını Oluştur

İlk olarak, bir HTML belgesi oluşturmanız gereken temel yapıya ihtiyacınız var. HTML belgesinin temel yapısına sahip olduğunuzdan emin olun:

2. Form Etiketi Ekleyin

Sonraki adım, formu tanımlamaktır. -Etiketini ekleyerek formu tanımlarsınız ve action ve method özniteliklerine ihtiyaç duyarsınız. Action, verilerin gönderileceği URL'yi belirtirken method, verilerin URL üzerinden iletilmesi için GET olarak ayarlanmıştır.

3. Etiket ve Giriş Alanı Oluştur

Formda etiketlenmiş bir giriş alanı oluşturmak istersiniz. Bunun için etiketi etiketi için ve giriş alanı için etiketi kullanırsınız. Etiketin for özniteliğinin giriş alanının id'siyle eşleştiğinden emin olun.

4. Gönder Butonu Ekleyin

Formun verilerini göndermek için bir düğmeye ihtiyacınız vardır. Bu, -etiketi ile sağlanır ve formun tıklanınca gönderilmesini sağlamak için submit türünde olmalıdır.

5. Formun Test Edilmesi

Formu oluşturduktan sonra, tarayıcıda test etme zamanı geldi. Giriş alanına bir örnek girin ve Gönder'e tıklayın. Form gönderildiğinde, girdiğiniz verilerin belirtilen action'a URL üzerinden gönderildiğini görmelisiniz.

6. Giriş Özniteliklerinde Değişiklik Yapma

Giriş alanlarının nasıl değiştiğini görmek için -etiketlerinin özniteliklerini ayarlayabilirsiniz. Örneğin, iletilen verileri ayırt etmek için name özniteliğini değiştirin. Bir örnek, adı name'den first name'e değiştirmektir.

7. Veri Aktarımı ve İstek Türü

Daha fazla test yapmadan önce, GET yönteminin verileri URL üzerinden gönderdiğini, POST'un ise verileri HTTP İsteğinin Gövdesi'nde gönderdiğini bilmek önemlidir. İsteğin türünü -etiketinde method özniteliğini değiştirerek değiştirebilirsiniz.

8. Sunucu Tepkisi Simüle Edin

Formunuzu test ederken muhtemelen gerçek bir sunucunuz yoktur, bu yüzden action-URL'sini değiştirerek form gönderildikten sonra kullanıcıların yönlendirileceği başka bir HTML sayfasını simüle edebilirsiniz. Örneğin, teşekkür sayfasını içeren yeni bir HTML dosyası oluşturun.

9. Hata Ayıklama ve Hata Giderme

Form gönderirken hatalarla karşılaşırsanız, tarayıcının Ağ Araçları'nı kontrol edin. Buradan formun başarıyla gönderilip gönderilmediğini ve hangi verilerin iletilmekte olduğunu görebilirsiniz. Ayrıca, hedef URL'nin bulunamadığını gösteren olası 404 hatalarına dikkat edin.

10. Sonuç ve Bakış

Şimdi HTML formları oluşturma konusunda temel bir anlayışa sahip oldun. Bu tekniği, farklı giriş türlerini ve doğrulamaları içeren daha karmaşık formlar oluşturmak için genişletebilirsin. Bir sonraki öğreticide, form girişlerine JavaScript ile nasıl tepki verileceğini ve asenkron veri aktarımlarının nasıl gerçekleştirileceğini öğreneceksin.

Özet

Bu öğreticide ilk HTML formunun yapısını ve çalışma şeklini öğrendin. Artık giriş alanları, etiketler ve düğmeler nasıl oluşturulur ve gönderilen verilerin URL üzerinden mi yoksa bir POST isteğinin gövdesinde mi nasıl iletilir öğrendin.