HTML Formu Nasıl Oluşturulur (Açıklanan Örnekler)

Formlar, iletişim bilgileri gibi kullanıcılardan veri toplamak veya kullanıcıların yorum yazmak veya arama yapmak gibi web sitesiyle etkileşime girmesine izin vermek için kullanılır. Bu yazıda, HTML kullanarak basit bir form oluşturmayı öğreneceğiz.

Bir HTML Formunun Yapısı

etiketi kullanılarak bir HTML formu oluşturulur.. Bu etiket içinde, metin alanları, düğmeler, onay kutuları, radyo düğmeleri ve daha fazlası gibi çeşitli farklı giriş öğelerine sahip olabilirsiniz.

giriş öğeleri buraya gelir

Giriş Elemanları

Metin Alanları

Metin alanları etiketi kullanılarak oluşturulur nitelik ile tip koydu metin. Örneğin:

İsim:




Telefon

eleman telefon numarası giriş alanları için kullanılır.

Telefon:


Tarih

eleman bir tarih seçmek için kullanılır.

Doğum günü:


Şifre

eleman şifre giriş alanları için kullanılır. Bu alana girilen metin, şifreyi gizlemek için noktalar olarak görüntülenir.

Şifre:


Arşiv

eleman kullanıcının yerel dosya sisteminden bir dosya seçmesine izin vermek için kullanılır.

Dosya yükleme:


Onay kutusu

eleman kullanıcının hiçbiri, bir veya birden çok seçeneği seçmesine izin veren giriş alanları için kullanılır.

Ben şartları ve koşulları kabul ediyorum

Radyo

eleman kullanıcının bir dizi seçenek arasından bir seçeneği seçmesine izin veren giriş alanları için kullanılır.

Cinsiyet:

Adam

Kadınlar

Sayı

eleman sayısal giriş alanları için kullanılır.

Miktar:


Menzil

eleman bir değer aralığından bir değer içermesi gereken giriş alanları için kullanılır.

Hacim:




düğmeler

Düğmeler etiketi kullanılarak oluşturulur nitelik ile tip koydu göndermek. Bu butona basıldığında form verilerini gönderecektir. Örneğin:

İsim:




Form Girişini İşleme

Gönder düğmesine basıldığında, form verileri işlenmek üzere gönderilir. Bu, iki yöntemden biriyle yapılır: öznitelik kullanılarak belirtilen GET veya POST yöntem etikette .

GET yöntemi

GET yöntemi, form verilerini URL'nin bir parçası olarak gönderir. Form verilerinin hassas olmadığı aramalar gibi şeyler için kullanışlıdır. Ancak, bu yöntemin gönderilebilecek veri uzunluğu açısından sınırlamaları vardır.

giriş öğeleri buraya gelir

POST yöntemi

POST yöntemi, form verilerini URL'den ayrı olarak gönderir. Bu daha güvenlidir ve çok daha büyük miktarda veriyi işleyebilir, bu nedenle iletişim veya oturum açma formu gönderimleri gibi şeyler için kullanılır.

giriş öğeleri buraya gelir

Her iki durumda da nitelik aksiyon form verilerini işleyecek sunucu tarafı komut dosyasının URL'sini belirtmek için kullanılır.

Tüm öğeleri içeren HTML form örneği 

İşte bu makalede incelediğimiz tüm unsurları kullanan bir form:

Kayıt formu

İsim:



Soy isim:



E-posta:



Telefon:



Doğum günü:



Şifre:



Dosya yükleme:



Ben şartları ve koşulları kabul ediyorum


Cinsiyet:

Adam

Kadınlar

Miktar:



Hacim:




Bu formda ad, soyad, e-posta, telefon, doğum tarihi, şifre alanları ve dosya yüklemek için bir alan vardır. dosya, şartlar ve koşullar için bir onay kutusu, cinsiyet seçmek için radyolar ve miktar ve hacim için sayı ve aralık alanları, sırasıyla.

Sondaki "Gönder" düğmesi, özellikte belirtilen URL'ye formu göndermekten sorumlu olan düğmedir. aksiyon etiketin şekil (bu durumda, "/submit_form"). Bu formun gerçek bir web sitesinde çalışabilmesi için, "/submit_form" yolunda bu formdan bilgi alacak ve işleyecek şekilde yapılandırılmış bir sunucunuz olması gerekir.