:requiredCSS'deki sözde sınıf seçici yazarları ile herhangi eşleşti elemanı seçmek ve stil sağlayan requiredöznitelik. Formlar, form gönderilmeden önce hangi alanların geçerli verilere sahip olması gerektiğini kolayca gösterebilir, ancak kullanıcının, sunucunun kullanıcının girişinin tek doğrulayıcısı olmasını sağlayarak ortaya çıkan beklemeden kaçınmasını sağlar.
Diyelim ki özniteliğine sahip bir girdimiz var type="name"ve onu requiredboole özniteliğini 1 kullanarak gerekli bir girdi yapalım :
Şimdi :requiredsözde sınıf seçiciyi kullanarak bu girdiyi biçimlendirebiliriz:
/* style all elements with a required attribute */ :required ( background: red; )Ayrıca, basit seçicileri kullanarak gerekli form alanlarını biçimlendirebilir ve ek sözde sınıf seçicileri birbirine bağlayabiliriz:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Demo
CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem: Gerekli Şekillendirmeye bakın.
İlgi noktaları
requiredNitelik bir değer gerektirmez anlamına gelen bir mantıksal olarak ele alınır. Basitçe requiredbir öğeye sahip olmak, tarayıcının bu özelliğin var olduğunu bilmesini sağlar ve karşılık gelen girdi aslında gerekli bir alandır. W3C spesifikasyonuna göre, gerekli özellik boş bir değerle veya nitelik adı olan bir değerle de çalışır.
Gerekli öznitelik, tarayıcının demodaki balon mesajı gibi yerel belirtme çizgilerini kullanmasını da ister.
Kullanılarak tarz değildir, bu girişler için :required, yazarlar ayrıca özelleştir kullanılarak elemanları olmayan gerekli olabilir :optionalbirlikte sözde sınıf seçici :invalidve :validhangi bir şekilde alan verisinin şartlar sağlandığında tetiklenir.
Form doğrulama , girdinin özelliğine bağlı olarak verileri filtrelemeye yardımcı olmak requirediçin patternöznitelikle birlikte de tamamlanabilir type. Kalıplar bir normal ifade veya bir dizge olarak yazılabilir. Aşağıdaki örnekte, bir e-posta adresinin sözdizimini eşleştirmek için normal bir ifade kullanıyoruz.
:requiredNitelik radyo düğmeleri çalışır. Bir radyo düğmesine (veya tümüne) gerekli koyarsanız, o belirli radyo düğmeleri grubu gerekli olacaktır. Onay kutularında, her bir onay kutusunu gerekli kılar (işaretlenecek).
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Boole Öznitelikleri : HTML5'teki bazı öznitelikler boole öznitelikleridir. Bir öğede boole özniteliğinin varlığı gerçek değeri temsil eder ve özniteliğin yokluğu yanlış değeri temsil eder. Öznitelik varsa, değeri ya boş dize olmalı ya da özniteliğin kurallı adı için büyük / küçük harfe duyarlı olmayan, başında veya sonunda boşluk olmadan eşleşen bir değer olmalıdır.