✅ Formlar ve veriler için HTML5 öğeleri

İçindekiler

HTML5, çoğu durumda javascript ile programlanması veya xhtml ve html4 öğelerinin yeteneklerinin genişletilmesine izin verecek bir dilde harici bir kitaplık eklenmesi gereken veri alanlarının oluşturulmasını kolaylaştırmak için yeni öğeler içerir.
Çoğu programcı, çoğu tarayıcı tarafından desteklendiğinden geleneksel şekilde çalışmaya devam eder, en son geliştirmeler yalnızca daha yeni sürümler tarafından desteklenir.
HTML5, girdi öğesinin type özniteliği için, yani metin kutuları gibi bir formun öğelerinin çoğu için bir dizi yeni öznitelik sunar.
Bu iyi bilinen html özelliklerinden bazıları şunlardır:
Giriş türü = metin - Metin kutusu
input type = password - Parolayı yıldızlarla gizleyen parola alanı.
Giriş türü = gönder - Formları gönderme düğmesi
NUMARA TİPİ ÖZELLİK KAYDI
Type number özniteliğini içeren eleman, girilen değerin sadece sayısal olduğunu belirlemeye değil, aynı zamanda maksimum ve minimum arasında kısıtlamaya da izin verir, herhangi bir programlamaya gerek kalmadan nasıl validasyonu olduğunu da resimde görebiliriz.

Bu özniteliği kullanmak için örneğin kaynak kodu aşağıdaki gibidir.

 Numara giriniz
Numara giriniz
Geçiş numarası (1-40):

TARİH TİPİ ÖZELLİK (TARİH)
Tarih türü özelliği, tarih içermesi gereken alanlar için kullanılır. Tarayıcıya ve sundukları desteğe bağlı olarak, takvim kontrolü bir tarih seçebilecek gibi görünecektir.

RENK TİPİ ÖZELLİK
color type özelliği, bir renk içermesi gereken alanlar için kullanılır. Tarayıcıya ve sundukları desteğe bağlı olarak, renk seçici türü denetimi, bir renk seçebilecek veya rengi onaltılık olarak yazabilecek gibi görünecektir. Seçici, renk tıklandığında bir açılır pencere olarak görünecektir.

Renk türü
Bir renk seçin:

E-POSTA TÜRÜ ÖZELLİK
E-posta türü özelliği, bir e-posta içermesi gereken alanlar için kullanılır. Tarayıcıya ve sundukları desteğe bağlı olarak, girilen metnin bir e-posta formatına sahip olduğunu doğrulayacaktır, aksi takdirde bir hata mesajı görünecektir, bu, bir formun programlama olmadan doğrulanmasını kolaylaştıracaktır.

E-posta türü
E-posta Girin:

URL TÜRÜ ÖZELLİK
url type özelliği, bir etki alanı, bir url içermesi gereken alanlar için kullanılır. Tarayıcıya ve sundukları desteğe bağlı olarak, girilen metnin bir alan formatına sahip olduğunu doğrulayacaktır, ancak bir hata mesajı görünecektir, bu, bir formun programlama olmadan doğrulanmasını kolaylaştıracaktır. Http veya www içermesi gerekmez, bu durumda gerekirse, programlama yoluyla doğrulamamız gerekir.

URL türü
E-posta Girin:

HTML5 İÇİN ÖZELLİKLER VE ÖZELLİKLER
1. Otomatik tamamlama özelliği
Formun bir alanına yazdığımızda, tarayıcının genellikle o anda yazdıklarımızı daha önce yazmış olduğumuz metinle otomatik tamamlama seçeneği vereceğini görüyoruz, bu güvenlik sorunlarına neden olabilir, çünkü örneğin, bilgisayar farklı bir kullanıcı tarafından kullanıldığı için birkaç e-posta yazıyoruz, başka bir kullanıcının girdiği bilgileri görmek için yazabiliyorduk. Örnekte, postadaki otomatik tamamlamayı devre dışı bıraktık, ancak diğer alanlarda değil. Tarayıcıdan da devre dışı bırakılabilir, ancak birçok kullanıcı seçeneğin var olduğunu veya otomatik tamamlamanın nasıl devre dışı bırakılacağını bilmiyor.

Otomatik tamamlama özelliği
İsim:
E-posta:

Autocomplete kelimesini girip daha sonra aynı forma erişirken gönderip sadece A harfine basarken, bu durumda zaten daha önce yazdığımız kelimeyi önerdiğini görüyoruz.

2. Otomatik odaklama özelliği
Bu öznitelik, web sayfası yüklendiğinde imlecin bir formun hangi girişinde konumlandırılacağını belirtmek için kullanılır, mevcut değilse, bulduğu ilk ile başlayacaktır. Bu, gerektiğinde farklı kontrollere odaklanmak için jQuery ile de programlanabilir.

3. Form özelliği
Bu öznitelik, web yapısında nerede bulunursa bulunsun, bir formun dışındaki öğeleri yönetmek için çok kullanışlıdır.

Form özelliği

Ürün:
Tanım:

Lorem Ipsum, baskı ve dizgi endüstrisinin basit bir sahte metnidir.

Stoklamak:

HTML kaynak kodunda, bir ürünün verilerini girmek için bir form oluşturduğumuzu, ardından bir açıklayıcı metin oluşturduğumuzu ve son olarak formun dışına stok için bir metin alanı koyduğumuzu görebiliriz, ancak onu bu forma kimlik kimliği ile ilişkilendiriyoruz. = "FormA" yazan alana bunu form ile ilişkilendireceğimizi yazacağız = "formA", bu şekilde formu gönderirken ilgili tüm elemanlar da gönderilecektir.
4. FormAction özelliği
Bu öznitelik, aynı formu farklı sayfalara göndermek için çok yararlıdır, daha önce javascript'te programlanması gereken bir şey ve formun tüm öğelerinin parametrelerini iletebilmek için göndermek, bazı durumlarda çok hantal hale geldi, özellikle de birbirine bağlı birçok form vardı.
Bir önceki durum örneğini alıyoruz bir buton ile formu record.php sayfasına gönderiyoruz ve diğeriyle stock.php

Form özelliği

Ürün:
Tanım:

Lorem Ipsum, baskı ve dizgi endüstrisinin basit bir sahte metnidir.

Stok: Gönder ile resim özniteliği Bir formu göndermek için gönder düğmesi olarak bir resim kullanmak istiyorsak, bunu yapmanın tek yolu bir resim koymak veya css stil sayfalarını kullanmak ve ardından işlevselliği javascript ile yapmaktı.

Resim türü özelliği

Ürün:
Tanım:

5. Liste ve Veri Listesi özelliği
Bu öznitelik, bir öğede bir liste tanımlamanıza ve ardından biz yazarken arama yapması için bunu bir giriş öğesine uygulamanıza olanak tanır.

Liste ve veri listesi türü özelliği

Bu durumda sadece bir harf yazarken f, bulunan olasılıklarla birlikte bir listenin görüntülendiğini görüyoruz, bu, veri listesinin içerdiği verilerin bir filtresini gerçekleştirdiği için çok kullanışlıdır ve ayrıca diğer kontrollerde veya öğelerde yeniden kullanılabilir.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.