Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan HTML formları konulu kapsamlı bir eğitim dersidir. Eğitmen, izleyicilere formların nasıl oluşturulacağını adım adım göstermektedir.
- Videoda, HTML formlarının temel elemanlarının (input, checkbox, radio, table, div, class) kullanımı detaylı olarak anlatılmaktadır. Eğitmen önce formun nasıl açılacağını, ardından table etiketi kullanarak form elemanlarının nasıl düzenleneceğini göstermekte, kullanıcı adı, soyadı, e-posta, şifre, cinsiyet, doğum tarihi, hobiler, resim seçme, onaylama alanları, butonlar ve reset butonu gibi form elemanlarını örneklerle açıklamaktadır.
- Ayrıca videoda, formun arka planına renk ekleme ve form elemanlarını düzenlemek için CSS özellikleri de gösterilmektedir. Video, bir formun tamamlanmasıyla sona ermektedir.
- 00:01HTML Form Örneği Hazırlama
- Bu derste formları kullanarak basit bir örnek yaparak öğrendiklerimizi pekiştireceğiz.
- Projeleri ayrı ayrı sayfalarda tutabilirsiniz, örneğin tablo, sıralı listeler, sırasız listeler, formlar ve delikler gibi konuları farklı HTML sayfalarında saklayabilirsiniz.
- İlk adım olarak bir form etiketi açmak gerekiyor ve action özelliğine bir değer yazmıyoruz.
- 00:43Tablo Etiketi Kullanımı
- Form içindeki elemanların düzensiz görünmemesi için table etiketi kullanmak tavsiye edilir.
- Table etiketi kullanarak inputların düzgün bir şekilde hizalanmasını sağlayabiliriz.
- Form etiketi içinde table etiketi açılır ve tablo satırları (tr) ve hücreleri (td) oluşturulur.
- 01:38Form Elemanları Ekleme
- İlk satırda kullanıcı adı için bir hücre (td) ve input[type="text"] oluşturulur.
- İkinci satırda soyadı için benzer şekilde bir hücre ve input[type="text"] eklenir.
- Tablo etiketi kullanarak tüm elemanlar düzgün hizalanır ve kayma sorunu yaşanmaz.
- 03:06Ek Bilgi Alanları
- Email adresi için bir satır oluşturulur ve input[type="text"] eklenir.
- Şifre için bir satır oluşturulur ve input[type="password"] kullanılır.
- Cinsiyet bilgisi için radyo butonları kullanılır ve aynı name özelliğine sahip olacak şekilde iki input[type="radio"] oluşturulur.
- 05:27Doğum Tarihi ve Hobiler
- Doğum tarihi için input[type="date"] kullanılarak yıl, ay ve gün seçimi yapılabilir.
- Hobiler için bir alt tablo oluşturulur ve "Hobiler" başlığı için bir hücre oluşturulur.
- Hobiler için checkbox kullanılarak "Kitap okumak" gibi seçenekler eklenir ve tablo yapılandırması ayarlanır.
- 09:10Form Tasarımı ve Giriş Alanları
- Form tasarımı için spor yapmak, enstrüman çalmak gibi hobiler için checkboxlar eklenebilir.
- Kullanıcı resmi seçmek için input type="file" kullanılarak kullanıcıdan resim seçimi yapılabilir.
- Formda mesaj alanı için textarea kullanılabilir ve tablo sütunlarını birleştirmek için colspan özelliği kullanılabilir.
- 12:00Onay Alanları ve Butonlar
- Okudum onaylıyorum alanı için radio butonlar kullanılabilir ve alt alta yerleştirilebilir.
- Formda gönder ve temizle butonları için input type="submit" ve input type="reset" kullanılabilir.
- Butonların yan yana yerleştirilmesi için tek bir tablo sütununa alınabilir ve stil ile aralarına boşluk bırakılabilir.
- 16:00Cinsiyet Seçimi ve Form Düzenleme
- Cinsiyet seçimi için radio butonlar kullanılabilir ve label ile etiketlenebilir.
- Label ile radio butonu ilişkilendirmek için label'ın for attribute'ı ile radio butonun id'si aynı olmalıdır.
- Formun görünümünü düzenlemek için formu div etiketi içerisine alıp, div'e class vererek CSS ile stil uygulanabilir.