Global HTML özellikleri. Global Nitelikler Öznitelikleri HTML5 Formları
Yazardan: Kuşkusuz, ağda her gün en az bir formda etkileşime giriyorsunuz. İçeriği arar mısınız veya hesabınızı Facebook sayfasında girin - web uygulaması formlarında en yaygın görevlerden biridir. Tasarımcılar ve geliştiriciler için, formların oluşturulması, bazı monotonluklarla karakterize edilir, özellikle de onlar için veri doğrulama komut dosyaları yazıyor. HTML5, birçok yeni nitelik, giriş türünü ve Markup Toolkit'in diğer unsurlarını temsil eder.
Bu yazıda, yeni özellikleri incelemeye odaklanacağız ve aşağıdakilerde veri girişi türlerini dikkate alacaktır.
Yeni mülklerin, kullanıcıların izlenimleriniz olduğunda hayatımızı büyük ölçüde kolaylaştıracağı görülecektir. En çekici olanı nedir? Onları şimdi kullanabilirsiniz. HTML5 formlarının çok kısa bir geçmişi ile başlayacağız.
Bu makale - kitapların 6. Bölümünden bir alıntı, HTML5 ve CSS3'ü öğrenmeye başlar: Ağ Evrimi (Başlangıç \u200b\u200bHTML5 ve CSS3: Web Gelişmiş) Christopher Murphy, Olya Stadholma, Richard Clark ve Divia Manyan (Christopher Murphy, Oli Studholme, Richard Clark ve Divya Manian) Yakalama Yayınevi tarafından yayınlandı.
NOT: Bu makale kitaptan bir alıntı olduğundan, ekran görüntülerinin oluşturulduğu andan itibaren öznitelik tarayıcısı ve veri girişi türleri değişebilir. Ek olarak, yayınlanma anından itibaren, tarayıcı desteği genişleyebilir, bu nedenle mevcut durumu hakkında, lütfen sonunda verilen bağlantılara bakın.
HTML5 Formlarının Tarihi
HTML5'teki formlar bölümü, başlangıçta yeni şekil kontrol araçları türleri ekleyen Web Forms 2.0 adlı bir spesifikasyondu. Opera'da başladı ve Opera Opera Ayan Hickson (Ian Hickson) tarafından düzenlendi, 2005 yılının başlarında W3C tarafından onaylandı. İş başlangıçta W3C tarafından yapıldı. Daha sonra Web HyperText Uygulama Teknolojisi Çalışma Grubunun (WHATWG) HTML5 özelliklerinin temelini oluşturmak için Web Uygulamaları 1.0 spesifikasyonu ile birleştirildi.
HTML5 tasarım ilkelerinin uygulanması
HTML5 formlarının en iyi özelliklerinden biri, hemen hemen tüm yeni veri girişlerini ve niteliklerini hemen uygulayabilmenizdir. Herhangi bir ek fiş, hack ve diğer yamalar gerektirmezler. Hepsi "destekleniyor" değiller, ancak onları gerçekten destekleyen modern tarayıcılarda, havalı şeyleri yapabiliyorlar - ve onları anlamayan bu tarayıcılarda güzelce bozulmuş. Tüm bunlar, HTML5'in tasarım ilkelerinden kaynaklanmaktadır. Bu durumda, özellikle güzel bozulma ilkesine başvuracağız. Genel olarak, hemen bu işlevleri hemen uygulamaya başlamaz. Aslında, tüm gezegenin önünde olduğunuz anlamına gelecektir.
HTML5 Formlarının Nitelikleri
Bu yazıda, aşağıdaki 14 yeni niteliği göz önünde bulunduracağız.
yer tutucu.
Birincisi, metin agregayı ayarlamamızı sağlayan yer tutucu niteliğidir; bu, yakın zamana kadar HTML4'te değer özelliğini kullanarak yapılmasını sağlayan yer. Sadece kısa açıklamalar için uygulanabilir. Daha uzun süre, başlık özelliğini kullanın. HTML4'teki fark, metnin yalnızca alan boş olduğunda ve odakta olmadığında gösterileceğidir. Alan odağa girer girmez (örneğin, alandaki fareyi veya talimatı tıkladığınızda) ve yazdırmaya başladığınızda, metin sadece kaybolur. Safari'deki arama alanına çok benzer.
Yer tutucu niteliğinin nasıl yürütüleceğini anlayalım.
<
input
type
=
"text"
name
=
"user-name"
id
=
"user-name"
placeholder
=
"en az 3 karakter"
>
Böyle! Ne düşündüğünü duyuyorum: "Bu anlamı nedir? Javascript'te tüm hayatımı yaptım. " Evet doğru. Bununla birlikte, HTML5 ile, tarayıcının bir parçası haline gelir, yani daha uygun fiyatlı bir çapraz tarayıcı çözümü elde etmek için daha az komut dosyası yazmak gereklidir (JavaScript devre dışı). Şekil, kromdaki toplam metin niteliğinin çalışmasını gösterir.
Yer tutucu niteliğini desteklemeyen tarayıcılar bunu yoksaymaz, bu yüzden yapılmayacaktır. Bununla birlikte, onu açmak, tarayıcıları desteğini sağlayan kullanıcıların izlenimini geliştirirsiniz ve ayrıca sitenizin umut verici olduğunu garanti eder. Tüm modern tarayıcılar toplam metni desteklemektedir.
otofokus.
Otomatik odaklama tam olarak ne demektir. Girişe eklemek, sayfa görüntülendiğinde alanı otomatik olarak odaklanır. Yer tutucu durumunda, otofokus için geçmişte javascript kullandık.
Bununla birlikte, geleneksel JavaScript yöntemleri, kullanılabilirlik konusunda ciddi sorunlara sahiptir. Örneğin, kullanıcı, komut dosyası tamamen indirilinceye kadar formu doldurmaya başlarsa, birinci alan formuna yüklendikten sonra (tatsız) döndürülür. HTML5'teki AutoFocus özniteliği bu sorunu kullanarak, belge indirmeleri olarak odaklanarak, JavaScript yükünü beklemesi gerekmez. Bununla birlikte, yalnızca sadece hedefi bir form olan sayfalar için kullanılabilirlikli sorunları önlemek için başvurmanızı öneririz (Google Tipi).
Bu, Boolean özniteliğidir (XHTML5 yazarken; Nota bakınız) ve burada olduğu gibi yürütülen:
<
input
type
=
"text"
name
=
"first-name"
id
=
"first-name"
autofocus
>
Tüm modern tarayıcılar tarafından desteklenir ve Otomatik odaklayıcı tarayıcıları yapmayan yer tutucu gibi, sadece görmezden gelir.
Not: Bazı yeni HTML5-kabadayı form nitelikleri. Sadece değilse, takılmadıysa, takıldıkları anlamına gelir. HTML5'te, birkaç farklı şekilde kaydedilebilirler.
Ancak, XHTML5 yazarken, AutoFocus \u003d "AutoFocus" stili uygulamalısınız.
otomatik tamamlama.
Otomatik kopyalama niteliği, kullanıcıların önceki veri tanıtımına göre formları doldurmalarına yardımcı olur. Özellik, IEE5.5 katından bu yana kullanılır, ancak nihayet HTML5'in bir parçası olarak standartlaştırıldı. Varsayılan olarak, etkindir. Bu, temel olarak uygulamak zorunda olmadığımız anlamına gelir. Bununla birlikte, her seferinde her seferinde form alanındaki girişte ısrar etmek istiyorsanız (tarayıcı alanını Otomatik Şekillendiricinin aksine), ardından aşağıdaki gibi takip edin:
<
input
type
=
"text"
name
=
"tracking-code"
id
=
"tracking-code"
autocomplete
=
"off"
>
Alanın alanının alanı, form öğesine yüklenen herhangi bir Otomatik Tamamlama durumunu iptal eder.
gereklidir.
Gerekli özellik gönderim gerektirmez; AutoFocus gibi, tam olarak ondan ne beklediğini yapıyor. Tarayıcı formu alanına eklediğinizde, formu göndermeden önce kullanıcının bu alana girmesini gerekir. Temel şekil doğrulamasının yerini alır, şu anda JavaScript kullanılarak gerçekleştirilerek daha uygun hale gelip biraz daha fazla gelişme süresi tasarruf etmesini sağlar. Gerekli, Otomatik Net olarak Boolean özniteliğidir. İşlemde bakalım.
<
input
type
=
"text"
id
=
"given-name"
name
=
"given-name"
required
>
Şu anda, gerekli, yalnızca Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 ve Chrome 5+'da uygulanır, böylece zamana kadar, diğer tarayıcıların istemci tarafındaki alanları doldurmak için komut dosyaları yazmaya devam etmeniz gerekir ( * KHE- KHE * IE!). Opera, Chrome ve Firefox Bir hata mesajı formu gönderirken kullanıcıyı göster. Çoğu hata tarayıcısı daha sonra ilan edilen bir dile göre yerelleştirilir. Safari gönderirken bir hata mesajı göstermiyor ve bunun yerine bu alanı odaklanıyor.
"Gerekli" varsayılan hata mesajını görüntüleme ayrı bir tarayıcıya bağlıdır; Şu anda, tüm tarayıcılardaki bir hata mesajı olan "kabarcık", CSS stilleri atanamaz. Bununla birlikte, krom, stillere bir hata mesajı atamak için kullanılabilecek kendi özelliğine sahiptir. Ayrıca Pseudo-Class: Gerekli olan verileri girmek için stilleri de atayabilirsiniz. Alternatif, SetCustomValidity () yöntemini kullanarak JavaScript'te ifadeleri ve stilleri iptal etmektir. Bu tür tarayıcı doğrulamasının sunucunun doğrulamasını değiştirmediğini unutmamak da çok önemlidir.
desen.
Desen özniteliği genellikle birçok geliştiriciyi endişelendiriyor (iyi, bu yüzden herhangi bir form özniteliğinin). Değeri kontrol edilmesi gereken alan için JavaScript normal ifadesini tanımlar. Desen, ayrı bir kod olup olmadığını, hesap numaralarını ve benzeri bir kontrol uygulamamızı kolaylaştırır. Desen özellikleri kapsamlıdır ve burada ürün numarasını kullanarak sadece basit bir örnek.
<
label
> ÜRÜN NUMARASI:
<
input
pattern
=
"{3}"
name
=
"product"
type
=
"text"
title
=
"Tek basamak, ardından üç büyük harf."/
>
<
/
label
>
Bu şablon, ürün numarasının üç büyük harf (3) bir rakam olması gerektiğini öngörür. HTML5 şablonları web sitesinde daha fazla şablon görebilirsiniz, burada çalışmaya başlamanıza yardımcı olmak için stil şablonlarının geleneksel düzenli ifadelerinin bir listesinin bulunduğu.
Gerekli durumunda olduğu gibi, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 ve Chrome 5+, şu anda şablonları destekleyen tek tarayıcılardır. Ancak, gerisi yakında tarayıcı pazarının hızlı tanıtımı nedeniyle geri dönecek.
Liste ve Datalist Öğeleri
Liste özniteliği, kullanıcıya seçeneklerin listesini ayrı bir alanla ilişkilendirmeyi sağlar. Liste listesi özniteliği değeri, aynı belgedeki Datalist öğesi kimliği ile aynı olmalıdır. HTML5 için veri niteliği elemanı yenidir ve önceden tanımlanmış bir seçenek listesini temsil eder. Metin girerken otomatik olarak tamamlayıcı olan intrabaurik arama alanlarına benzer şekilde çalışır.
Aşağıdaki örnek, listenin ve vericinin nasıl birleştirildiğini gösterir.
<
label
> En sevdiğin meyve:
<
datalist
id
=
"fruits"
>
<
option
value
=
"Böğürtlen."
> Böğürtlen.<
/
option
>
<
option
value
=
"Blackcurrant."
> Blackcurrant.<
/
option
>
<
option
value
=
"Yabanmersini."
> Yabanmersini.<
/
option
>
<
!
--
…--
>
<
/
datalist
>
Diğer ise, lütfen belirtin:
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
>
<
/
label
>
DataSalist'te Seç öğesini ekleyerek, sadece seçenek elemanını uygulayarak mükemmel bir bozunma sağlayabilirsiniz. İşte Jeremy Kate (Jeremy Keith) tarafından oluşturulan zarif işaretlemenin şablonu, HTML5'in kademeli olarak bozulması ilkeleri için idealdir.
<
label
> En sevdiğin meyve:
<
datalist
id
=
"fruits"
>
<
select
name
=
"fruits"
>
<
option
value
=
"Böğürtlen."
> Böğürtlen.<
/
option
>
<
option
value
=
"Blackcurrant."
> Blackcurrant.<
/
option
>
<
option
value
=
"Yabanmersini."
> Yabanmersini.<
/
option
>
<
!
--
…--
>
<
/
select
>
Diğer ise, lütfen belirtin:
<
/
datalist
>
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
>
<
/
label
>
Liste ve Datalist Tarayıcı Desteği şu anda Opera 9.5+, Chrome 20+, Internet Explorer 10 ve Firefox 4+ ile sınırlıdır.
Çoklu
Veriler listesinden birden fazla değer girebilmeniz için, birden fazla Boolel özniteliğini uygulayarak listenizi ve veri listenizi ileriye adım atabilirsiniz. İşte bir örnek.
<
label
> En sevdiğin meyve:
<
datalist
id
=
"fruits"
>
<
select
name
=
"fruits"
>
<
option
value
=
"Böğürtlen."
> Böğürtlen.<
/
option
>
<
option
value
=
"Blackcurrant."
> Blackcurrant.<
/
option
>
<
option
value
=
"Yabanmersini."
> Yabanmersini.<
/
option
>
<
!
--
…--
>
<
/
select
>
Diğer ise, lütfen belirtin:
<
/
datalist
>
<
input
type
=
"text"
name
=
"fruit"
list
=
"fruits"
multiple
>
<
/
label
>
Bununla birlikte, birden fazla Datalist ile yalnızca geçerli değildir. Birden fazla kullanım örneği, burada gösterildiği gibi bir arkadaşınıza veya dosya eklerine öğeleri gönderirken e-posta adresleri olabilir:
<
label
> Dosyaları yükle:
<
input
type
=
"file"
multiple
name
=
"upload"
>
<
/
label
>
firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 ve Chrome 4+'da çoklu desteklenir.
novalidate ve formnovalidate.
Novalidate ve Formnovalidate özellikleri, bir form gönderirken, verilerin doğruluğunu kontrol etmeniz gerekmez. Her ikisi de - Boolean öznitelikleridir. Formnovalidasyon, bir tür gönderme veya görüntüyle giriş-AM'ye uygulanabilir. Novalidate özniteliği yalnızca form öğesine yüklenebilir.
FormValidate özniteliğini kullanmanın bir örneği, formun taslakları göndermek için gereken alanlara sahip olduğu, ancak taslağı kaydetmek için gerekli olmayan "Taslak Taslak" düğmesine bir örnek gösterilebilir. Novalidate, form doğrulamasını yapmanız gerekmeyen durumlarda uygulanacaktır, ancak yeni veri giriş türleri tarafından sunulan daha uygun bir kullanıcı arayüzünün avantajlarını elde etmeniz gerekir.
Formnovuvar kullanımı aşağıdaki örnekte görülebilir:
<
form
action
=
"process.php"
>
<
label
for
=
"email"
> E-posta:<
/
label
>
<
input
type
=
"text"
name
=
"email"
value
=
"\u003ca href \u003d"/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17707865737857726f767a677b723974787a">[E-posta Korumalı]"
>
<
input
type
=
"submit"
formnovalidate
value
=
"Sunmak"
>
<
/
form
>
Ve bu örnek Novalalate'in uygulanmasını gösterir:
<
form
action
=
"process.php"
novalidate
>
Nitelikler, eleman hakkında, her zaman ilk etikette, çiftten bağımsız olarak tanımlanırken, bu bir etiket veya bekar olur.
HTML'de bir dizi özellik var. evrensel Ve hemen hemen her etikete uygulanabilir, bu nedenle bu gruba dahil edilen nitelikler küresel nitelikler denir.
Küresel nitelikler genellikle bu ders kitabının örneklerini karşılayacaktır, daha önce düşündüğümüz ve kendinizi en yakın makalelerde göz önünde bulundurulacak küresel niteliklerle tanıydığımız öznitelikleri tekrarlamanızı öneririz:
Konudaki sorular ve görevler
Aşağıdaki temanın çalışmasına geçmeden önce, pratik bir görevi geçin:
İpucu: Sayfanın dilini ve gerekli olduğu öğeleri belirlemeyi unutmayın. Bir egzersiz yaptıktan sonra, doğru bir şekilde yürütüldüğünüzden emin olmak için ayrı bir pencerede bir örnek açarak sayfa kodunu inceleyin.
HTML5'te, tüm modern tarayıcılar zaten bu standardı desteklemektedir. Aralık 2011 itibariyle, standart hala gelişme durumunda.
HTML5'te birçok yeni sözdizimsel özellik ekler - . Bu elemanlar, kendi eklentilerine ve API'lerine dönmek zorunda kalmadan, web'deki grafik ve multimedya nesnelerini uygulamayı ve yönetmeyi kolaylaştırmak için tasarlanmıştır. Gibi diğer yeni öğeler , , ve Belgenin anlamsal içeriğini (sayfa) zenginleştirmek için tasarlanmıştır.
Yeni Etiketler HTML5
1. Bölüm etiketleri (makale, yana, altbilgi, başlık, Hgroup, NAV, bölüm)
