HTML 5 Ders-3 İnputlar Ve Örnek Kayıt Formu

  • Konuyu Başlatan Konuyu Başlatan DissIyEr
  • Başlangıç tarihi Başlangıç tarihi
  • Görüntüleme 1.266

Sizce yararlı mı ?

  • Evet.Devamı gelmeli

    Oy: 3 100,0%
  • Hayır.Bu kadarı yeter

    Oy: 0 0,0%

  • Kullanılan toplam oy
    3

DissIyEr

Odunlara Vur Vur Vur!
Katılım
12 Şubat 2018
Mesajlar
28
Elmaslar
12
Puan
0
Yaş
22
Merhaba arkadaşlar size dediğim gibi inputlar ve örnek kayıt formunu göstereceğim.
Öncelikle temel olarak başlıyalım örnek bir input kodu verelim mesela sizin yazı yazdığınız o kutular (kayıt formundaki)
HTML:
<input type="text">
type="text" kısmı bizim input etiketimizin tipini belirtir ve burada yazı olarak seçilmiştir.Ancak şuan sadece insanları yazı yazabildiği ve anlamsız bir yer oldu.

QVLg7v.png

Hadi şimdi bunun önüne Kullanıcı adı yazmaları gerektiğini belirtelim bunun için kodumuzu şu şekilde güncellememiz yeterlidir.
HTML:
<p>Kullanıcı Adınız:<input type="text"></p>
Buradaki p etiketi bunun bir satır olduğunu belirtir. Artık insanlar ne yazacaklarını gayet iyi biliyorlar.
YgQ5NA.png
Aynı şekilde böyle yazı boşluklarını ekliyerek e-posta yapalım.
HTML:
<p>E-Posta adresi:<input type="text"></p>

Sırada kişinin şifresini istemek var tabiki insanların görmemesi için bunu yazı değil şifre bölümü olduğunu belirtelim.
Kod:
<p>Şifreniz:<input type="password"></p>
Bu şekilde insanların şifre kısmına yazdıkları gözükmeyecektir.
gOrL9b.png
Şimdide sıra kişinin cinsiyet seçimine geldi ve burada kişiye 2 Seçenek suncacağız Erkek ve Kadın olmak üzere.Bu seçeneklerimiz input un radio tipine giriyor.Kodumuz;
HTML:
<p>Cinsiyetinizi belirtin;</p>
<p>Erkek:<input type="radio"> Kadın: <input type="radio"></p>
Kodumuz sitemizde böyle gözükecektir;
8YaEYk.png
Ancak şimdide kişi iki cinsiyeti birden seçebiliyor bunu önlemek için inputlarımızın ismini aynı yaparak aynı şeyi belirtiklerini göstermek.Kod;
HTML:
<p>Cinsiyetinizi belirtin;</p>
<p>Erkek:<input type="radio" name="cns"> Kadın: <input type="radio" name="cns"></p>
Artık sadece bir tane seçeneği işaretleyebiliyoruz. Oradaki name="cns" kısmındaki cns yi ben cinsiyetin kısaltması olarak kullandım isterseniz mc-tr bile olabilir yeterki adları aynı olsun.
Son olarak kaydet ve gönder tuşumuz kaldı bunu yapmak için de inputun submit tipini kullanacağız.Kod;
HTML:
<p> <input type="submit"> </p>
Sitede;
5DaRDl.png
Buradaki gönder yazısını değiştirmek için value yazısını kullanalım ve Kaydet Ve Gönder olarak düzenliyelim.
HTML:
<p> <input type="submit" value="Kaydet Ve Gönder"> </p>
Artık sitede gönder yerine kaydet ve gönder yazıcaktır.Sonraki rehberimde Listeleri anlatacağım.
Toplu haldeki kayıt formu kodları;
HTML:
    <p>KullanıcıAdı:<input type="text"> </p>
    <p> E-Posta:<input type="text"> </p>
    <p> Şifreniz:<input type="password"></p>
    <p>Cinsiyetiniz;</p>
    <p>Erkek:<input type="radio" name="cns"> Kadın:<input type="radio" name="cns"> </p>
    <p> <input type="submit" value="Kaydet Ve Gönder"> </p>
Sitedeki resmi;
1J6nEG.png
 

Ekli dosyalar

  • 1.png
    1.png
    261 bayt · Görüntüleme: 411
Son düzenleme:
Görüntü hatalı çıkmış. Düzeltirsen sevinirim. Konuyu baştan sona okudum gayet güzel kendini geliştirebilirsin.
 
Görüntü hatalı çıkmış. Düzeltirsen sevinirim. Konuyu baştan sona okudum gayet güzel kendini geliştirebilirsin.
Hemen ilgileniyorum[DOUBLEPOST=1519328267,1519327491][/DOUBLEPOST]
Görüntü hatalı çıkmış. Düzeltirsen sevinirim. Konuyu baştan sona okudum gayet güzel kendini geliştirebilirsin.
Şu anda düzelmiş olması gerekiyor
 
Güzel yazı tebrikler ilerde HTML i PHP ile birleştirmenizi öneririm. örneğin html ile form oluşturup php ile mysql'a atmak vb. vb.
 
Güzel yazı tebrikler ilerde HTML i PHP ile birleştirmenizi öneririm. örneğin html ile form oluşturup php ile mysql'a atmak vb. vb.
PHP değil de asp.net olabilir yeni gelişimi ile beraber asp.net te artık bir o kadar hızlı.
 

Hala Discord sunucumuza katılmadın mı?

Büyük bir topluluğun parçası ol, etkinliklere katıl ve özel hediyeler kazanma şansı yakala!

Şimdi Katıl
Üst