Sol Reklam
Sağ Reklam

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

Sizce yararlı mı ?

  • Evet.Devamı gelmeli

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

    Oylar: 0 0,0%

  • Oy Verenler
    3

DissIyEr

Odunlara Vur Vur Vur!
Katılım
12 Şubat 2018
Mesajlar
27
Elmaslar
12
Puanlar
0
Yaş
20
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
 

Ekler

  • 1.png
    1.png
    261 bayt · Görünt.: 411
Son düzenleme:

SoulX

Vatan Sevdalısı

Discord:

SoulX#3935

Katılım
9 Ekim 2017
Mesajlar
1.833
Elmaslar
2.565
Puanlar
19.570
Yer
Antalya
Görüntü hatalı çıkmış. Düzeltirsen sevinirim. Konuyu baştan sona okudum gayet güzel kendini geliştirebilirsin.
 

DissIyEr

Odunlara Vur Vur Vur!
Katılım
12 Şubat 2018
Mesajlar
27
Elmaslar
12
Puanlar
0
Yaş
20
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
 

Irfan

Bir Kömür Göründü Kaptanım!

Discord:

Irfan#2591

Katılım
21 Aralık 2016
Mesajlar
143
Elmaslar
91
Puanlar
8.970
Yer
Offenburg
Minecraft
irfii01
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.
 

DissIyEr

Odunlara Vur Vur Vur!
Katılım
12 Şubat 2018
Mesajlar
27
Elmaslar
12
Puanlar
0
Yaş
20
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ı.
 
Neden altınlarını Discord sunucumuzda kazmıyorsun? TIKLA VE KATIL!
Yukarı