Pseidoklausu atgādinājums

Pseidoklas ir informācija par elementu, kas atrodas dokumentu kokā, bet nav pieejams, izmantojot norādītos atribūtus. Piemēram, : p irmā bērna pseidoklasē ir uz elementiem, kas ir viņu vecāku pirmais bērns. Šo informāciju var iegūt no DOM koka, bet nav pir mā bērna atribūta.

In CSS2.1, bija nedaudz pseido-klases pieejams, jo īpaši saite norāda (: saite, :visi te d) un l ietotāju darbības (: aktīvs , : lid i nāties ). In CSS3, ka nedaudz kļūst basketful, ar pseido-klases struktūru (: nth-bē rns, : nth -o f-type), UI elements (: ļā va, :pā rb audīts), un tiem, mēs apskatīt tagad, formas apstiprināšanu.

Veidlapu validācija bez JavaScript

Tā kā es teicu sākumā, HTML5 ievieš klienta puses formas apstiprināšanu bez nepieciešamības JavaScript. Mēģinot iesniegt veidlapu, pārlūkprogramma validē visus laukus un atgriezīs kļūdu, ja kāds no laukiem nav pareizs. Tas notiks galvenokārt automagically – ja jūsu pārlūkprogramma ir spēja – un izskatās kaut kas līdzīgs, kas ir parādīts 1 attēlā:

Šie kļūdu ziņojumi ir pārlūka un OS īpašu, un grūti mainīt (ko es dokumentēta manā blogā), bet jūs varat mainīt veidu, kā kļūdas parādās uz elementiem sevi ar jaunu validācijas pseido-klases, kas ir daļa no CSS3 Basic UI moduli.

Es uz pašreizējo pārlūku atbalstu, kā mēs ejam caur rakstu, bet riekstu:

• Firefox un IE10 atbalstīt dažas no tā.
• Opera un Chrome atbalsta visu to.
• Safari atbalsta visu to pārāk, bet veidlapas validācija ir atspējota pēc noklusējuma.

Tas ir gadījumā, es gribētu ieteikt izmantot Chrome, Opera, vai Safari, lai apskatītu piemērus es jums parādīs.

Ja jūs vēlaties, lai atjauninātu ar pārlūka atbalstu veidlapu apstiprināšanu, es iesaku saglabāt acu par Kad es varu izmantot.

Tātad ar visiem garlaicīgi tehnisko guff no tā, pieņemsim galā ar interesantu tehnisko guff un to apskatīt dažus piemērus formas apstiprināšanu.

Obligātie un neobligātie elementi

Viens no visizplatītākajiem apstiprināšanas modeļiem ir obligātās (t.i., obligātās) vērtības — lauki, kas lietotājam jāaizpilda, lai tos īstenotu. Lai veidlapas elementu atzīmētu kā obligātu, tam jāpievieno tik ai nepie ciešamais atribūts:

<input type="text" required>

Ja vēlaties tam lietot stilus, lai parādītu šo prasību, varat izmantot jauno :required pseud o-class, kas attiecas uz noteikumiem jebkuram atbilstošam elementam, kuram ir nepi eciešama is atribūts. Piemēram, pēc etiķetes teksta, iespējams, vēlēsities ievietot zvaigznīti:

input:required + label::after { content: "*"; } input: required + label:: pēc ( saturs: "*"; }

Tiešie noteikumi, ko izmantojat, ir atkarīgi no dokumenta atzīmētā. Šī piemēra kārtula ir balstīta uz atzīmēm, kurām ir šāda struktūra:

<input type="text" required id="foo">
<label for="foo">Foo</label>

Pretējā gadījumā ir, protams, nav obligāta. Un tas nav jūs zināt, mums ir pseido klases, ka pārāk, loģiski nosaukts: pē c izvēles . Tas ietekmē jebkuru formas elementu, kas nav required attribute. Piemēram, iespējams, vēlēsities, lai tiem būtu vieglāka apmale:

input:optional { border-color: silver; } input: optional { border-color: silver; )

To var redzēt 2. attēlā vai apskatīt dzīvu piemēru.

Derīgi un nederīgi elementi

Ir arī cita veida validācijas papildus vienkārši "obligāti" vai "pēc izvēles". Varat izmantot modeļu atbilstību, piemēram, e-pasta adreses validāciju:

<input type="email">

Ja lietotājs laukā kaut ko ievada, tam ir jāatbilst e-pasta adreses modelim, vai arī tas tiks atzīmēts kā nederīgs. (Protams, ja tas nav nepieciešams, tad to var atstāt tukšu.)

Jūs varat stils derīgu vai nederīgu veidlapas elementus, izmantojot pseido-klases sauc – pagaidiet to - :val id un: nederīg s. Iespējams, vēlēsities pievienot simbolu atkarībā no validācijas statusa:

input:invalid + label::after { content: ' ⨉'; } input:valid + label::after ( content: ' ✓'; } input: nederīgs + label::after ( saturs: ' ⨉'; } input: valid : : pēc ( saturs: ' ✓'; }

Ņemiet vērā, ka tie stājas spēkā, tiklīdz lapa slodzēm, lai jūs, iespējams, vēlaties izmantot JavaScript piemērot tos tikai pēc iesniegšanas, varbūt pievienojot klases veidlapu ar JavaScript:

document.forms[0].addEventListener ('submit', function(e) { e.currentTarget.classList.add ('iesniegts');   Jūsu atkāpšanās veidlapas validācijas funkcija });

Precīzs skripts jūs izmantojat būs atšķirīgs, bet tomēr jūs to darīt, jūs varat izmantot šo klasi, lai stils veidlapas elementus, piemēram, tā:

.submitted input:invalid + label::after { content: '⨉'; } .iesniegto ievadi: nederīgs + label::pēc { ⨉'; }

3. attēlā ir parādīta tā rezultāts, un jūs varat redzēt arī tiešo piemēru.

Divas papildu lietas, kas jāņem vērā par šo piemēru: pirmkārt, lai izmantotu savu JavaScript, es esmu neļāva veidlapu automātiski validēt, izmantojo t novalida te atribūtu iesniegt pogu; un, otrkārt, Firefox liek krāsainu kvēlot ap elementiem, atkarībā no to validācijas stāvokli, ko es esmu pārāk lēma, izmantojot savu patentēto: -moz-ui-invalid selektors. Skatiet demonstrācijas avotu, lai redzētu, kā tie tiek izmantoti.

Skaitļu diapazoni

Daži no jaunajiem ievades tipiem, piemēr am, ska itlis, atļauj vērtību diapazonu, izmant ojot atri būt us min un max, piemēram:

<input type="number" max="10" min="1">

Lai gan veidlapu vadīklas parasti neļauj lietotājam ievadīt vērtību ārpus šī diapazona, var būt gadījumi (piemēram, ja vērtību norāda JavaScript), ja ievadei piešķirtā vērtība pārsniedz diapazonu:

<input type="number" max="10" min="1" value="11">

Kad tas notiek, jūs varat izmantot : ārpus diap azona pseido-klases jūsu stils:

input[type='number']:ārpus diapazona { border-color: sarkans; }

Un, kā jūs gaidījāt, tur ir kolēģis pazīstams ar nosaukumu: in-range :

input:in-r[type='number']ange { border-color: green; } input: in-range ( border-color: zaļa; )

4. attēlā šīs divas pseidoklases darbā ir redzamas, un vēlreiz ir arī dzīvs piemērs, ko apskatīt.

Lasīšana un rakstīšana

Iespējams, jums ir veidlapas lauks, kas ir iepriekš aizpildīts ar vērtību, kuru nevēlaties, lai lietotājs varētu rediģēt, piemēram, noteikumi un nosacījumi tekst a apgabal ā. Šādā gadījumā varat pievienot a tribūtu readonly:

<textarea readonly="">Lorem ipsum Lorem ipsum</textarea>

Jūs varat stils elementi, kas ir readonly a tribūts p iemērots, izmantojot … Vai jūs varat uzminēt? Jums ir taisnība, iedomāties lasītājs: : read-onl y pseido-klasē. Jūs varētu apvienot to ar th euser-selec t CSS īpašumu, lai novērstu lietotājam ir iespēja izvēlēties tekstu (piemēram, es esmu arī mainīja robežas stilu, lai padarītu to acīmredzamāku):

textarea:read-only { user-select: none; } textarea:read-only ( user-select: none; )

Un, ja jums tas ir nepieciešams, protams, i r: read-wr ite pseido-klases elementiem, kuriem nav atribūts piemērots:

textarea:read-write { user-select: text; } textarea: read-write ( user-select: text; )

Rezultātus var redzēt 5. attēlā, un tāpat kā pirms tam ir arī tiešraides piemērs.

Firefox un IE10 ir faktiski īsteno r eadonl y atribūts, bet vēl nav atbalsta šo pseido-klasēm.