Ve tekrar hoş geldiniz.
Biraz daha gelişmiş etiketlere gireceğiz ve muhtemelen şimdiye kadar ele aldıklarımız dışında kullanacağınız
en önemli etiket, form oluşturmak için ihtiyaç duyduğumuz etiketlerdir.
Bildiğiniz gibi, web sitelerine girdiğinizde, genellikle bir tür oturum açma veya kayıt formu vardır.
Bu yüzden bugün bunu inşa edeceğiz.
Başlamak için burada yeni bir dosya oluşturalım.
Bunu kaydedeceğiz ve masaüstümüzde kayıtlı HTML olarak adlandıracağız.
Mükemmel ve bir HTML istediğimizi biliyoruz, bu yüzden küçük kısayolumuzu kullanacağız ve register olarak adlandırıp kaydedeceğiz.
Şimdi indekslenmiş HTML dosyasına başka bir bağlantı ekleyelim.
Bu referanslar.
Kayıt olun.
HTML.
Ve ben sadece, burada, kayıt olun diyeceğim.
Tamam.
Bu iki dosyayı da kaydedelim ve yenileyelim.
Kayıtlarımız var.
Kaydol'a tıklayın.
Henüz elimizde bir şey yok ama işe yarıyor gibi görünüyor.
Bunu yeni bir satıra ekleyelim çünkü bu şekilde daha güzel görünüyor.
Bunu yapmak için, hatırlarsanız, bir ara etiketi ekleyeceğiz.
O zaman tazeleyelim.
Al bakalım.
Yeni sayfamız ve kaydımız var.
Şimdi bu formu oluşturalım.
Eğer kayıt noktası html'e girersek.
HTML'de formları yazarken, uygun bir şekilde bir form etiketi vardır.
Tamam.
Ancak bu form etiketinin içinde gerçek formun olması gerekir.
Peki ne tür form öğelerimiz var?
Eski dostumuz W3C'yi tekrar hatırlarsak, formları yazalım.
Ve burada HTML formlarımız olduğunu görebiliyoruz.
Ve tazele.
Bunu tam ekran yapacağız.
Şurada bu konuda bir ton bilgi olduğunu görebilirsiniz, ancak şimdilik kendiniz bakabilirsiniz.
Size en yaygın olanları, muhtemelen zamanınızın %90'ında kullanacaklarınızı tanıtacağım.
Birincisi, her formda yaptığımız gibi ve şimdilik bu sayfaya gidelim, adımızı girmek istediğimiz şeydir.
Peki bunu nasıl yapacağız?
Bir giriş etiketimiz var.
Bunun bir metin türü vardır, çünkü adımız metin biçiminde olacaktır.
Ve bunu kapatabiliriz.
Ve bu aslında kendiliğinden kapanan bir etiket.
Şimdi kaydedip yenilediğimde, burada küçük bir kutumuz olacak.
Umarım bunu görebilirsiniz.
Ama muhtemelen başlık koymalıyız çünkü bu şekilde neyi gireceğimizi bilemeyiz.
Bu yüzden buraya ilk isim yazacağız.
Noktalı virgül ve kaydet.
Yenileyelim.
Adımız var ve şimdi bunu biraz daha büyütelim.
Al bakalım.
Şimdi buraya adınızı girebilirsiniz.
Harika.
Peki, soyadı için bir tane daha ekleyelim.
Ve yine, girdi türümüzü alacağız.
Yani bu bir nitelik ve metin değeridir.
Yenilersek, soyadımız var.
Tamam, ama biraz çirkin görünüyor.
HTML'in sadece satır satır okuduğunu ve burada bir boşluk istediğimizi gerçekten bilmediğini unutmayın.
Yani tekrar, a ekleyebiliriz.
Fren etiketini buraya yapıştırın ve yenileyin.
Adımız ve soyadımız var.
Tamam.
Bu artık oldukça açıklayıcı.
Başka neyimiz var?
Formda mı?
E-postamız var.
Şimdi e-posta olan başka bir alan ekleyelim ve tekrar giriş yapalım, aramalar yazın, metin.
Buraya bir ara daha ekleyeceğiz çünkü bu aralığa ihtiyacımız olacak.
Ve yenilemeyi kaydedelim.
Harika.
Tamam.
Yani genel kayıt formumuz var.
Ve tabii ki herhangi bir formda, kayıt olabilmemiz için bunu bir yere göndermemiz gerektiği gibi bir tür düğmeye ihtiyacımız
var.
Yine, bunun için güzel bir giriş türü var.
Bu yüzden bir metin türü yerine giriş yapıyoruz.
Bir gönderim türü vardır.
Yani bu.
Buraya bir ara daha eklersek.
Bunu kaydediyorum ve bir gönder düğmesi ile yeniliyorum.
Şimdi, şimdi, bu gönderme nereden geldi?
Gönder türünde bir girdi koyduğunuzda, otomatik olarak bir düğme oluşturur.
Ve ne söyleyeceğinizi belirtmezseniz, sadece bu metin olacaktır.
Ancak bunu değiştirebiliriz, böylece değer katabiliriz.
Ve bir kayıt koyacağız.
Yenilemeyi kaydet.
Artık bir kayıt butonumuz var.
Tamam.
Peki ya bu alanda hatalar yaparsak?
Bir şeyler yazıyoruz ve bunu tekrar sıfırlamak istiyoruz, bunun için başka bir girdi var.
Ve tahmin edebileceğiniz gibi bu girdinin türü sıfırlanır.
Şimdi bu reklamı kapatırsak, burada başka bir ara, aslında bunu aynı satırda tutabiliriz.
Yenilemeyi kaydedeceğiz.
Ve yeniden başladık.
Şimdi buraya herhangi bir şey yazarsam ve diyelim ki istemiyorum, bundan hoşlanmıyorum.
Formu sıfırlamam gerekiyor.
Sadece sıfırlamaya tıklayabiliyorum ve bizim için her şeyi temizliyor.
Tamam.
Kendinize ne olduğunu soruyor olabilirsiniz.
Kaydol'a tıkladığımızda ne olur?
Buna geçmeden önce, tüm yaygın girdi türlerini gözden geçirmek istiyorum ve ardından e-postada
ne olduğunu görmek için kayıtlara tıklayacağız.
İdeal olarak, her şeyden önce bunun zorunlu olmasını istiyoruz, böylece kayıt ol'a tıkladığınızda, bir e-posta
sağlamadıysanız, kayıt olmanıza izin vermeyecektir.
Bunun için kullanabileceğimiz bir özellik var ve bu gerekli.
Ve burada aslında bir değer belirtmemiz gerekmiyor çünkü otomatik olarak required değerinin true değerine eşit olduğu varsayılıyor,
bu da bu form alanının gerekli olduğu anlamına geliyor.
Yani yenilediğimi ve boş bıraktığımı söylersem ve kayıt ol'a tıklarsam, lütfen bu alanı doldurun diyeceğim.
Şimdi de bunun uygun bir e-posta alanı olduğundan emin olmak istiyoruz.
Yani böyle bir şey yazarsam, yine de bunun yanlış bir e-posta olduğundan emin olmak isteriz.
Kayıt olmak istemiyoruz.
Yani size e-posta için söylediğim metin giriş türü aslında yanlıştır.
Kullanabileceğimiz özel bir tane var, o da tahmin edebileceğiniz gibi e-posta.
Şimdi yenileyip e-posta olmayan bir şey yazarsam ve kayıt ol'a tıklarsam.
Lütfen bir uygulama ve e-posta adresi ekleyin diyeceğim.
Çok güzel.
Sihir gibi bir şey.
Bunu sizin için yapıyor, ki bu çok çok güzel.
Girdiler hakkındaki bilgilerimizi genişletelim ve büyük olasılıkla ihtiyaç duyulacak birkaç alan daha ekleyelim.
Genellikle birinin doğum gününü bilmek istersiniz.
Buraya doğum gününü de ekleyelim.
Ve bu girdi türü için type yapalım.
Tarih.
Yani bunu kaydedip yenilediğimde, şuna bakın.
Güzel, küçük bir tarih seçicimiz var.
Yani buradan her şeyi seçebilirim.
Tamam.
Başka neye ihtiyacımız var?
Cinsiyete de ihtiyacımız var.
Yani giriş yapacağız, yazın.
Ve cinsiyet için.
Cinsiyet için belirli bir giriş türü yoktur, ancak radyo adı verilen bir şey vardır.
Ve radyo, adından da anlaşılacağı gibi, radyo düğmeleridir.
Yani şimdi.
Yenile'ye tıklıyorum ve tek bir radyo düğmem var, ancak ideal olarak seçeneklere sahip olmak isteriz, değil mi?
Peki bunu nasıl yapacağız?
Dolayısıyla radyo için de kadın mı erkek mi olduğunu söylememiz gerekiyor, cinsiyetin içinde olsun.
Burada bir ara vereceğiz ve şöyle diyeceğiz.
Giriş türü radyo ve biz de posta diyeceğiz.
Ve biz de istiyoruz.
Kadın.
Ve biz de istiyoruz.
Diğerleri.
Ve bunu yenilediğimizde, erkek, kadın ve diğer var.
Ama burada bir sorun görüyorsunuz.
Sadece radyo düğmelerine tıklıyorum ve seçimlerini kaldıramıyorum.
Ve ideal olarak yalnızca birini seçebilmelisiniz.
Ve şu anda, radyo düğmeleri bu şekilde, birbirlerinin varlığından haberdar değiller.
Birbirlerine bağlı olduklarını, aile olduklarını ve sadece birinin seçilebileceğini bildiklerinden emin olmak
istiyoruz.
Peki bunu nasıl yapacağız?
Bunu yapmanın yolu name niteliğinden geçer.
Yani isim için cinsiyet diyeceğiz.
Ve bu ad niteliğinin tüm radyo düğmelerinde eşleşmesi gerekir, böylece cinsiyet giriş alanının kendi bölümleriyle
birlikte olduklarını bilirler.
Burayı kaydedip yenilesem.
Şimdi yalnızca birini seçebildiğimi görebilirsiniz.
Pekala, mükemmel.
Başka neyimiz olmalı?
Diyelim ki evcil hayvanınız olup olmadığını gerçekten bilmek istiyorum.
Evcil hayvanlar da öyle.
Giriş türüne sahip olacağız.
Birden fazla evcil hayvanınız olabilir, bu yüzden radyo düğmeleri olmayacaktır.
Onay kutusu istiyoruz.
Yani onay kutusunda kedi olmasını istiyoruz veya kedi koyalım ve olmasını istiyoruz.
Bugün yazabilirim.
Kutuyu işaretleyin ve köpek istiyoruz.
O zaman bunu saklayalım.
Şuna bir göz atalım.
Evcil hayvanlarımız var, ama bu sefer onay kutuları var, yani.
Birden fazla seçebilirim.