Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Change of Tech kanalında yayınlanan bu eğitim videosunda, bir eğitmen HTML'de form elemanlarının temel kullanımını adım adım anlatmaktadır.
- Video, HTML'de form oluşturma sürecini kapsamlı şekilde ele almaktadır. İlk bölümde form tagi, input taginin farklı türleri (text, password, checkbox, radio, file, date, color, combobox, textarea), GET ve POST metodları, submit ve reset butonları, action ve method parametreleri anlatılırken, ikinci bölümde form elemanlarının zorunlu hale getirilmesi, hata mesajları ekleme, form temizleme butonu oluşturma ve JavaScript alert kullanımı gibi pratik uygulamalar gösterilmektedir.
- Eğitim, form elemanlarının gruplanması için fieldset kullanımı, form elemanlarının düzenlenmesi ve butonların eklenmesi gibi konuları da içermektedir. Bu video, HTML form oluşturma konusunda temel bilgileri öğrenmek isteyenler için faydalı bir kaynaktır.
- 00:01HTML'de Form Elemanları
- HTML'de form elemanları kullanıcıdan veri alma, gönderme ve PHP sayfasına post etme/getme işlemlerinde kullanılır.
- Form elemanlarında en önemli değişken input tagidir ve type'a göre combobox, checkbox, radio buton, text, password gibi farklı türler kullanılır.
- Form elemanlarına name veya id verilebilir, bu değerler verilerin toplanmasında kullanılır.
- 00:52Text ve Password Alanları
- Text tipi input, kullanıcıdan metin girişi almak için kullanılır ve name özelliği ile belirlenir.
- Password tipi input, şifre girişi için kullanılır ve girilen değerler gizlenir.
- Text ve password alanları arasında temel fark, text'in normal metin gösterirken password'in gizleme işlemi yapmasıdır.
- 02:42Checkbox ve Radio Buton
- Checkbox, birden fazla seçenek seçilebilen bir form elemanıdır ve name özelliği ile belirlenir.
- Radio buton, sadece bir seçenek seçilebilen bir form elemanıdır ve name özelliği ile belirlenir.
- Checkbox ve radio butonlar aynı name değerine sahip olduğunda, birden fazla radio buton seçilemez.
- 05:05Submit ve Reset Butonları
- Submit butonu, form verilerini göndermek için kullanılır ve value değeri "send" olarak gelir.
- Formda action değişkeni, verilerin gönderileceği ana sayfayı belirtir.
- Metot bilgisi, verilerin GET veya POST ile gönderileceğini belirler; GET kısa verileri, POST uzun verileri gönderir ve daha güvenlidir.
- 07:46Dosya Yükleme ve Diğer Form Elemanları
- File tipi input, kullanıcıdan dosya yükleme işlemi için kullanılır.
- DateTime tipi input, tarih ve saat seçimi için kullanılır.
- Color tipi input, kullanıcıdan renk seçimi için kullanılır.
- 10:08ComboBox ve Text Array
- ComboBox, kullanıcıya seçenekler sunan bir form elemanıdır ve select etiketi ile oluşturulur.
- Text Array, kullanıcıdan birden fazla metin girişi almak için kullanılır.
- Fieldset etiketi, form elemanlarını gruplamak için kullanılır ve gruplama için bir isim verilir.
- 16:12HTML Form Oluşturma
- Formda hobiler için input alanları oluşturuldu ve her alanın farklı olması gerektiği belirtildi.
- Cinsiyet seçimi için radio butonları kullanıldı ve default değer olarak erkek seçildi.
- Mail adresi için input alanı eklendi ve boş olamaz kontrolü (required) yapıldı.
- 19:13Form Özellikleri
- Formda gruplama için div kullanıldı ve "Önerileriniz" başlığı eklendi.
- Form alanlarına "Lütfen" belirteci eklendi ve boş alanlar için uyarı mesajları gösterildi.
- Kaydet ve temizle butonları eklendi, kaydet butonu için "kaydet" yazısı, temizle butonu için "temizle" yazısı kullanıldı.
- 21:41Form Gönderimi ve Kontroller
- Formda boş alanlar gönderildiğinde "Bu alanı doldurun" uyarısı verildi.
- Yaş aralığı için "70 veya daha küçük olmalıdır" uyarısı, mail adresi için "Ad işareti eksik" uyarısı gösterildi.
- Form verileri URL parametreleri olarak gönderildi, ancak POST metodu kullanıldığında URL bilgileri göndermedi.
- 23:44Diğer Butonlar ve Kapanış
- Form dışında normal butonlar da eklendi ve "tıklayın" yazısı ile bir JavaScript alert eklendi.
- HTML konusu anlatıldı ve CSS ile daha güzel tasarım yapılacağı belirtildi.
- İzleyicilerden abone olmaları ve yorum yapmaları istendi.