HTML Form Örnekleri

HTML Form Nedir?

HTML form, kısaca anlatacak olursak Web sitenizden bir veri tabanına, e-postanıza vb yerlere doldurulan veriyi ulaştırmak için kullanılır. Form Etiketi ayrıca birazdan aşağıda etiketini kullandığımız gibi açılmaktadır. İçerisine HTML form örnekleri ve bir çok öge yerleştirilebilir.

Html form Web sitesi içinde kullanıcıların sizinle iletişime geçmesi için bir alandır. Bu alanın kullanıcılardan hangi verileri istediğinize göre değiştirebilir ve farklı çeşitlerde kullanabilirsiniz. Genel olarak Html Formlar: İletişim formları, üyelik formları ve üye giriş formları olarak Web sitelerinde faaliyet göstermektedir.

Html formlar kullanıcılarınız ile iletişime geçmenizin en iyi yollarından biridir ve en etkili yol olarak tüm dünya çapında etkin olarak kullanılmaktadır.

Kullanılan bu form içerisinde bir çok öge barındırabilir.

  • Ad soyad verisi.
  • Telefon numarası.
  • Form konusu.
  • E-Posta verisi.
  • Kullanıcı adı.
  • Parola verisi.
  • Cinsiyet bilgisi.
  • Çoktan seçmeli veriler.
  • Tek seçim hakkınız  olan veriler.
  • Okul Seçme, Lokasyon Belirleme, Hobi Alanları Belirleme vb seçenekler..
  • Mesaj alanları.

Yukarıda belirttiğimiz alanları aşağıda kod olarak HTML Form Örnekleri şeklinde sizlere daha açıklayıcı olarak sunacağım. Form alanlarının neredeyse tümünü yukarıda listeler halinde sizlerle paylaştım ve aşağıdaki bölüm de form ögelerinin örneklerine göz atabilirsiniz.

HTML Form Türleri Nelerdir?

2 Adet HTML form türü vardır. Bunlar formdaki verilerin bir yerden bir yere nasıl gönderileceğini belirlerken kullanılan metotlardır. Aşağıda bu 2 metot (method) verip ne anlama geldiğinden bahsedeceğim. Form üzerinde aşağıdaki gönderme gibi 2 çeşit metot vardır.

  • POST : Bir formdan veriyi gönderirken güvenliği yüksek olarak adlandırılan ve bilgiyi url’e basmayan veri gönderme biçimidir.
  • GET : Formdan gönderilen veriler POST metot‘una göre daha güvensiz olan verileri url’e ekleyen bir form metot‘udur.

 

POST Method Kullanımı

Post metot kullanımı önerilen bir kullanımdır. Kullanım şeklinize göre ihtiyacınızı karşılaması konusunda söylenecek bir şey olmayabilir ama daha GET metot‘una göre daha güvenli olduğu söylenebilir.

GET Method Kullanımı

Get metot‘u url yapısına verileri ekleyerek sizi bir sayfaya gönderir. Bu sayfa içinde programlama bilgileriyle veriler alınır ve yerine göre işlenir.

 

HTML Form Elementleri

Html Formlarının bir çok ögesi vardır bunları sizlerle maddeler halinde açıklamalı olarak paylaşacağım.

  • input : input veri girişi almak için kullanılan elementtir.
  • textarea : Genellikle mesaj içerikli verileri göndermekte kullanılan elementtir.
  • label : Elementlerin başlıklarını belirlemek için kullanılır. Bir form yazı kutucuğu, şifre girme kutusu, yazı alanı ve diğer alanların isimleri belirlemek ve üzerinde tıkladıktan sonra ilgili elamanın üzerinde yazmaya hazır hale getiren form elemanıdır.
  • form : Veri göndermek ve form elemanlarını içine yazıp bir sayfaya o bilgileri gönderen Form HTML kodudur.
  • checkbox : Çoktan seçmeli veriler için uygundur.
  • radio : Tek seçim yapabileceğiniz verileri almada işinize yaramaktadır.
  • text : Yazı içerikli kısa bilgileri alabileceğiniz form elemanıdır.
  • password : Parola içeriği girilmesi için yapılan ve verileri yazarken nokta ile gizleyen form elemanıdır.

 

HTML Form Örnekleri

Sıra geldi HTML form örnekleri oluşturmaya. Aşağıdaki listede incelemeniz için örneklerini vereceğim formlar oluşturup kodlarını sizinle paylaşacağım.

  • Kullanıcı Giriş Formu Örneği
  • İletişim Formu Örneği
  • Üye Kayıt Formu Örneği

Kullanıcı Giriş Formu Örneği

Kullanıcı Giriş Formu Örneği
Kullanıcı Giriş Formu Örneği

Html Kod:

 

İletişim Formu Örneği

İletişim Formu Örneği
İletişim Formu Örneği

Html Kod:

Üye Kayıt Formu Örneği

Üye Kayıt Formu Örneği
Üye Kayıt Formu Örneği


Html Kod:

11 Yorum

  1. music management los angeles demiş ki:

    I’m curioᥙѕ to find out what blog platform you have been using?
    I’m having some minor security problemѕ with my latest site and I’d like to
    find something more risk-free. Dߋ you have any
    solutions?

    12 Ekim 2017
    Yanıtla
  2. متصفح فايرفوكس demiş ki:

    Appreciation to my father who informed me about this website, this weblog is actually awesome.

    14 Ekim 2017
    Yanıtla
  3. elmarundle demiş ki:

    Good waay of telling, and good piece of writing to get data concerning my presentation focus, which i am
    going to present in academy.

    21 Ekim 2017
    Yanıtla
  4. wyrob pieczatek demiş ki:

    Simply desire to say your article is as astonishing.
    The clearness to your put up is simply spectacular and that i can assume you’re
    an expert in this subject. Fine together with your permission let me to
    take hold of your RSS feed to keep up to date with coming near near
    post. Thanks 1,000,000 and please continue the rewarding work.

    25 Ekim 2017
    Yanıtla
  5. microsoft Windows 7 Operating system demiş ki:

    I definitely wanted to jot down a comment to be able
    to appreciate you for those awesome tips you are posting at this site.
    My prolonged internet investigation has finally been paid with
    sensible information to write about with my friends.
    I ‘d declare that we website visitors are truly endowed to be in a very good community with many wonderful professionals with
    interesting basics. I feel rather blessed to have come across the website and look forward to
    really more enjoyable minutes reading here. Thank you once again for everything.

    25 Ekim 2017
    Yanıtla
  6. ibrahim demiş ki:

    Web sitesi yaparken büyük yardımı oldu minnettarım.

    12 Aralık 2017
    Yanıtla
  7. Kepez demiş ki:

    Thanks for sharing such a fastidious opinion, piece of
    writing is pleasant, thaats why i haave read it fully

    4 Ocak 2018
    Yanıtla
  8. Situs Ceme demiş ki:

    Hello! Do you use Twitter? I’d like to follow you if that would be okay.
    I’m definitely enjoying your blog and look forward to new updates.

    4 Şubat 2018
    Yanıtla
  9. Madeline demiş ki:

    I have learn some just right stuff here. Certainly worth bookmarking for revisiting.
    I surprise how much effort you place to create this type of fantastic informative web
    site.

    23 Şubat 2018
    Yanıtla
  10. wyrob pieczatek demiş ki:

    Hi there! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any suggestions?

    28 Şubat 2018
    Yanıtla
  11. esra demiş ki:

    Merhabalar Web tasarım – Html Form tasarımı ile ilgili geniş bilgi elde ettim. Çok teşekkür ederim.

    8 Haziran 2018
    Yanıtla

Bir cevap yazın

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