<form action="lapa.html" method="post">
    <label
      >Auglis:
      <input type="text" name="auglis" dirname="auglis.dir" value="ķirsis" />
    </label>
    <input type="sūtīt" />
  </form>
  <!-- lapa.html?auglis=ķirsis&auglis.dir=ltr -->

disabled

Būlean atribūts, kas, ja tāds ir, norāda, ka lietotājam nevajadzētu mijiedarboties ar ievadi. Atspējotās ievades parasti tiek atveidotas ar blāvāku krāsu vai izmantojot kādu citu norādi, ka lauks nav pieejams lietošanai.

Konkrēti, atspējotie ievadi nesaņem klikšķa notikumu, un atspējotie ievadi netiek iesniegti kopā ar veidlapu.

Piezīme. Lai gan specifikācija to neprasa, Firefox pēc noklusējuma saglabās dinamiski atspējotu <input> stāvokli lapas ielādes laikā. Izmantojiet automātiskās pabeigšanas atribūtu, lai kontrolētu šo līdzekli.

form

Virkne, kas norāda <form> elementu, ar kuru ir saistīta ievade (tas ir, tās veidlapas īpašnieks). Šīs virknes vērtībai, ja tāda ir, ir jāatbilst <form> elementa ID tajā pašā dokumentā. Ja šis atribūts nav norādīts, elements <input> tiek saistīts ar tuvāko saturošo formu, ja tāda ir.

Formas atribūts ļauj ievietot ievadi jebkurā dokumentā, bet iekļaut to veidlapā citur dokumentā.

Piezīme. Ievadi var saistīt tikai ar vienu veidlapu.

formaction
Derīgs tikai attēlam un iesniegšanas ievades veidiem.

formenctype
Derīgs tikai attēlam un iesniegšanas ievades veidiem.

formmethod
Derīgs tikai attēlam un iesniegšanas ievades veidiem.

formnovalidate
Derīgs tikai attēlam un iesniegšanas ievades veidiem.

formtarget
Derīgs tikai attēlam un iesniegšanas ievades veidiem.

height

Derīgs tikai attēla ievades pogai. Augstums ir attēla faila augstums, kas jāparāda, lai attēlotu grafisko iesniegšanas pogu. Skatiet attēla ievades veidu.

id
Globālais atribūts, kas ir derīgs visiem elementiem, ieskaitot visus ievades veidus, definē unikālu identifikatoru (ID), kam jābūt unikālam visā dokumentā. Tās mērķis ir identificēt elementu, veidojot saiti. Vērtība tiek izmantota kā atribūta <label> vērtība, lai saistītu etiķeti ar formas vadīklu. Skatiet <label>.

inputmode

ievades režīms
Globālā vērtība, kas derīga visiem elementiem, sniedz pārlūkprogrammām mājienu par virtuālās tastatūras konfigurācijas veidu, kas jāizmanto, rediģējot šo elementu vai tā saturu. Vērtībās ietilpst neviens, teksts, tel, url, e-pasts, skaitļi, decimālzīme un meklēšana.

list

Vērtībai, kas piešķirta saraksta atribūtam, ir jābūt <datalist> elementa ID, kas atrodas tajā pašā dokumentā. <datalist> nodrošina iepriekš definētu vērtību sarakstu, ko ieteikt lietotājam šai ievadei. Visas sarakstā esošās vērtības, kas nav saderīgas ar veidu, nav iekļautas ieteiktajās opcijās. Norādītās vērtības ir ieteikumi, nevis prasības: lietotāji var izvēlēties no šī iepriekš definētā saraksta vai norādīt citu vērtību.

Tas ir derīgs tekstam, meklēšanai, url, tel, e-pasta ziņojumiem, datumam, mēnesim, nedēļai, laikam, datumam un lokālajam, numuram, diapazonam un krāsai.

Saskaņā ar specifikācijām saraksta atribūtu neatbalsta slēptā, parole, izvēles rūtiņa, radio, fails vai kāds no pogu veidiem.

Atkarībā no pārlūkprogrammas lietotājs var redzēt ieteiktu pielāgotu krāsu paleti, atzīmes diapazonā vai pat ievadi, kas tiek atvērta kā <select>, bet ļauj izmantot sarakstā neuzrādītas vērtības. Pārējos ievades veidus skatiet pārlūkprogrammas saderības tabulā.

Skatiet elementu <datalist>.

max

Derīgs datumam, mēnesim, nedēļai, laikam, datetime-local, skaitlim un diapazonam, tas definē lielāko vērtību atļauto vērtību diapazonā. Ja elementā ievadītā vērtība pārsniedz šo vērtību, elementa ierobežojuma validācija neizdodas. Ja atribūta max vērtība nav skaitlis, elementam nav maksimālās vērtības.

Pastāv īpašs gadījums: ja datu tips ir periodisks (piemēram, datumiem vai laikiem), maksimālā vērtība var būt mazāka par min vērtību, kas norāda, ka diapazons var aptvert; piemēram, tas ļauj norādīt laika diapazonu no 22:00 līdz 4:00.

maxlength

Derīgs tekstam, meklēšanai, url, tel, e-pasta adresei un parolei, tas nosaka maksimālo rakstzīmju skaitu (kā UTF-16 koda vienības), ko lietotājs var ievadīt laukā. Tam ir jābūt veselam skaitlim 0 vai lielākai. Ja nav norādīts maksimālais garums vai ir norādīta nederīga vērtība, laukam nav maksimālā garuma. Šai vērtībai arī jābūt lielākai par mingaruma vērtību vai vienādai ar to.

Ievades ierobežojuma validācija neizdosies, ja laukā ievadītā teksta garums ir lielāks par maksimālo UTF-16 koda vienību garumu. Pēc noklusējuma pārlūkprogrammas neļauj lietotājiem ievadīt vairāk rakstzīmju, nekā pieļauj atribūts maxlength. Papildinformāciju skatiet sadaļā Klienta puses validācija.

min

Tas ir derīgs datumam, mēnesim, nedēļai, laikam, datetime-local, skaitlim un diapazonam; tā nosaka visnegatīvāko vērtību atļauto vērtību diapazonā. Ja elementā ievadītā vērtība ir mazāka par šo, elementa ierobežojuma validācija neizdodas. Ja atribūta min vērtība nav skaitlis, elementam nav minimālās vērtības.

Šai vērtībai ir jābūt mazākai par atribūta max vērtību vai vienādai ar to. Ja min atribūts ir, bet nav norādīts vai ir nederīgs, minimālā vērtība netiek lietota. Ja min atribūts ir derīgs un vērtība, kas nav tukša, ir mazāka par minimālo, ko pieļauj atribūts min, ierobežojuma validācija novērsīs veidlapas iesniegšanu. Papildinformāciju skatiet sadaļā Klienta puses validācija.

Pastāv īpašs gadījums: ja datu tips ir periodisks (piemēram, datumiem vai laikiem), maksimālā vērtība var būt mazāka par min vērtību, kas norāda, ka diapazons var aptvert; piemēram, tas ļauj norādīt laika diapazonu no 22:00 līdz 4:00.

minlength

Derīgs tekstam, meklēšanai, url, tel, e-pasta adresei un parolei, tas nosaka minimālo rakstzīmju skaitu (kā UTF-16 koda vienības), ko lietotājs var ievadīt ievades laukā. Tam ir jābūt nenegatīvam veselam skaitlim, kas ir mazāks par vērtību, kas norādīta ar maxlength, vai vienāda ar to. Ja mingarums nav norādīts vai ir norādīta nederīga vērtība, ievadei nav minimālā garuma.

Ievades ierobežojuma validācija neizdosies, ja laukā ievadītā teksta garums ir mazāks par minimālo UTF-16 koda vienību garumu, tādējādi novēršot veidlapas iesniegšanu. Papildinformāciju skatiet sadaļā Klienta puses validācija.

multiple

Būlean vairāku atribūts, ja tas ir iestatīts, nozīmē, ka lietotājs e-pasta logrīkā var ievadīt ar komatu atdalītas e-pasta adreses vai izvēlēties vairāk nekā vienu failu ar faila ievadi. Skatiet e-pasta un faila ievades veidu.

none

Virkne, kas norāda ievades vadīklas nosaukumu. Šis nosaukums tiek iesniegts kopā ar vadīklas vērtību, kad tiek iesniegti veidlapas dati.

Uzskatiet nosaukumu par obligātu atribūtu (lai gan tas tā nav). Ja ievadei nav norādīts nosaukums vai nosaukums ir tukšs, ievades vērtība netiek iesniegta kopā ar veidlapu. (Netiek nosūtītas arī atspējotās vadīklas, neatzīmētās radio pogas, neatzīmētās izvēles rūtiņas un atiestatīšanas pogas.)

Ir divi īpaši gadījumi:

1. _charset_: ja tiek izmantots kā slēpta tipa <input> elementa nosaukums, lietotāja aģents automātiski iestata ievades vērtību rakstzīmju kodējumam, kas tiek izmantots veidlapas iesniegšanai.
2. isindex: vēsturisku iemeslu dēļ nosaukums isindex nav atļauts.

Atribūts nosaukums rada radiopogām unikālu darbību.

Vienlaicīgi var pārbaudīt tikai vienu radiopogu tāda paša nosaukuma radiopogu grupā. Atlasot jebkuru radiopogu šajā grupā, tiek automātiski atcelta atlase jebkurai pašlaik atlasītajai radiopogai tajā pašā grupā. Šīs vienas atzīmētās radio pogas vērtība tiek nosūtīta kopā ar nosaukumu, ja veidlapa ir iesniegta,

Pārejot uz virkni ar tādu pašu nosaukumu radiopogu grupu, kas ir atzīmēta, tā tiks fokusēta. Ja tie nav sagrupēti kopā avota secībā, ja ir atzīmēta kāda no grupām, cilne grupā sākas, kad tiek sastapta pirmā grupā, izlaižot visus, kas nav atzīmēti. Citiem vārdiem sakot, ja kāds ir atzīmēts, tabulēšana izlaiž grupā neatzīmētās radio pogas. Ja neviens nav atzīmēts, radio pogu grupa tiek fokusēta, kad tiek sasniegta pirmā poga tajā pašā nosaukuma grupā.

Kad viena no grupas radio pogām ir fokusēta, izmantojot bulttaustiņus, tiks pārvietotas visas viena nosaukuma radiopogas, pat ja radio pogas nav sagrupētas avota secībā.

Kad ievades elementam tiek piešķirts nosaukums, šis nosaukums kļūst par veidlapas elementa HTMLFormElement.elements rekvizītu. Ja jums ir ievade, kuras nosaukums ir iestatīts kā viesis, bet cita, kuras nosaukums ir cepures izmērs, var izmantot šādu kodu:

let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];

Kad šis kods ir palaists, guestName būs HTMLInputElement viesa laukam un hatSize objekts cepures izmēra laukam.

Brīdinājums. Nepiešķiriet veidlapas elementiem nosaukumu, kas atbilst veidlapas iebūvētajam rekvizītam, jo tad jūs ignorētu iepriekš definēto rekvizītu vai metodi, izmantojot šo atsauci uz atbilstošo ievadi.

pattern

Derīgs tekstam, meklēšanai, url, tel, e-pastam un parolei, modeļa atribūts definē regulāro izteiksmi, kurai ir jāatbilst ievades vērtībai, lai vērtība izturētu ierobežojuma validāciju. Tai ir jābūt derīgai JavaScript regulārai izteiksmei, ko izmanto RegExp tips un kā dokumentēts mūsu regulāro izteiksmju rokasgrāmatā; “u” karodziņš tiek norādīts, kompilējot regulāro izteiksmi, lai modelis tiktu uzskatīts par Unikoda koda punktu secību, nevis kā ASCII. Ap raksta tekstu nedrīkst norādīt uz priekšu vērstas slīpsvītras.

Ja modeļa atribūts ir, bet nav norādīts vai ir nederīgs, regulārā izteiksme netiek lietota un šis atribūts tiek pilnībā ignorēts. Ja modeļa atribūts ir derīgs un vērtība, kas nav tukša, neatbilst modelim, ierobežojuma validācija novērsīs veidlapas iesniegšanu.

Piezīme. Ja izmantojat modeļa atribūtu, informējiet lietotāju par paredzamo formātu, tuvumā iekļaujot paskaidrojošu tekstu. Varat arī iekļaut nosaukuma atribūtu, lai paskaidrotu, kādas ir prasības, lai atbilstu modelim; vairums pārlūkprogrammu šo nosaukumu parādīs kā rīka padomu. Pieejamībai ir nepieciešams redzams paskaidrojums. Rīka padoms ir uzlabojums.

placeholder

Viettura atribūts ir derīgs tekstam, meklēšanai, url, tel, e-pasta adresei, parolei un numuram. Viettura atribūts sniedz lietotājam īsu mājienu par to, kāda veida informācija ir sagaidāma laukā. Tam ir jābūt vārdam vai īsai frāzei, kas sniedz mājienu par paredzamo datu veidu, nevis paskaidrojumu vai uzvedni. Teksts nedrīkst ietvert vagona atgriešanas vai rindu plūsmas. Piemēram, ja laukā ir paredzēts tvert lietotāja vārdu un tā etiķete ir “Vārds”, piemērots vietturis varētu būt “piem., Visvaldis”.

Piezīme. Viettura atribūts nav semantiski tik noderīgs kā citi veidi, kā izskaidrot veidlapu, un tas var izraisīt neparedzētas tehniskas problēmas ar saturu. Plašāku informāciju skatiet sadaļā Etiķetes.

readonly

Būlean atribūts, kas, ja tāds ir, norāda, ka lietotājam nevajadzētu rediģēt ievades vērtību. Tikai lasāmo atribūtu atbalsta teksta, meklēšanas, url, tālruņa, e-pasta, datuma, mēneša, nedēļas, laika, datuma un laika vietējā, numura un paroles ievades veidi.

required

Nepieciešams ir Būlean atribūts, kas, ja tāds ir, norāda, ka lietotājam ir jānorāda ievades vērtība, pirms var iesniegt īpašumtiesību veidlapu. Nepieciešamo atribūtu atbalsta teksts, meklēšana, url, tālrunis, e-pasts, datums, mēnesis, nedēļa, laiks, datums un vietējais, numurs, parole, izvēles rūtiņa, radio un failu ievades.

size

Derīgs e-pastam, parolei, tel, url un tekstam; lieluma atribūts norāda, cik liela daļa ievades tiek parādīta. Pamatā tiek izveidots tāds pats rezultāts kā CSS platuma rekvizīta iestatīšana ar dažām specialitātēm. Faktiskā vērtības vienība ir atkarīga no ievades veida. Parolei un tekstam tas ir rakstzīmju skaits (vai em vienības) ar noklusējuma vērtību 20, bet citiem tas ir pikseļi (vai pikseļu vienības). CSS platumam ir prioritāte pār lieluma atribūtu.

src
Derīga tikai attēla ievades pogai, src ir virkne, kas norāda attēla faila URL, kas jāparāda, lai attēlotu grafisko iesniegšanas pogu. Skatiet attēla ievades veidu.

step
Soļu atribūts ir derīgs datumam, mēnesim, nedēļai, laikam, datetime-local, skaitlim un diapazonam. Step atribūts ir skaitlis, kas norāda precizitāti, kas ir jāievēro vērtībai.

Ja tas nav tieši iekļauts:

step noklusējuma vērtība ir 1 numuram un diapazonam.
Katram datuma/laika ievades veidam ir noklusējuma step vērtība, kas atbilst veidam; skatiet atsevišķas ievades lapas:date, datetime-local, month, time, un week..
Vērtībai ir jābūt pozitīvam skaitlim — veselam skaitlim vai peldošajam skaitlim — vai īpašajai vērtībai jebkura, kas nozīmē, ka netiek norādīts solis, un jebkura vērtība ir atļauta (izņemot citus ierobežojumus, piemēram,  min un max).).

Ja kāda nav skaidri iestatīta, derīgās vērtības skaitļa, datuma/laika ievades veidiem un diapazona ievades veidiem ir vienādas ar soļu bāzi — min vērtību un soļa vērtības pieaugumu līdz maxvērtībai, ja tā ir norādīta.

Piemēram, ja jums ir

<input type="number" min="10" step="2">

, tad derīgs ir jebkurš pāra vesels skaitlis — 10 vai lielāks. Ja tas ir izlaists,

<input type="number">

, jebkurš vesels skaitlis ir derīgs, bet pludiņi (piemēram, 4.2) nav derīgi, jo darbība pēc noklusējuma ir 1. Lai 4.2 būtu derīga, solis būtu jāiestata uz jebkuru, 0.1. , 0,2 vai jebkurai minimālajai vērtībai bija jābūt skaitlim, kas beidzas ar .2, piemēram,

<input type="number" min="-5.2">

Piezīme. Ja lietotāja ievadītie dati neatbilst soļu konfigurācijai, ierobežojuma validācijā vērtība tiek uzskatīta par nederīgu un atbilst pseidoklasi :invalid.

tabindex

Globālais atribūts, kas derīgs visiem elementiem, tostarp visiem ievades veidiem, vesela skaitļa atribūts, kas norāda, vai elements var fokusēt ievadi (ir fokusējams), vai tam ir jāpiedalās secīgā tastatūras navigācijā. Tā kā visi ievades veidi, izņemot ievades veidu paslēpts, ir fokusējami, šo atribūtu nevajadzētu izmantot veidlapas vadīklās, jo, lai to izdarītu, būtu jāpārvalda fokusa secība visiem dokumenta elementiem, tādējādi radot risku, ka tiks apdraudēta lietojamība un pieejamība. nepareizi.

title

Globālais atribūts, kas derīgs visiem elementiem, tostarp visiem ievades veidiem, satur tekstu, kas atspoguļo konsultatīvu informāciju saistībā ar elementu, kuram tas pieder. Šādu informāciju parasti, bet ne obligāti, var parādīt lietotājam kā rīka padomu. Virsrakstu NEDRĪKST izmantot kā primāro veidlapas vadīklas mērķa skaidrojumu. Tā vietā izmantojiet elementu <label> ar atribūtu for, kas iestatīts uz formas vadīklas id atribūtu. Skatiet tālāk norādītās etiķetes.

type

Virkne, kas norāda atveidojamās vadīklas veidu. Piemēram, lai izveidotu izvēles rūtiņu, tiek izmantota izvēles rūtiņas vērtība. Ja tas ir izlaists (vai ir norādīta nezināma vērtība), tiek izmantots ievades veida teksts, izveidojot vienkārša teksta ievades lauku.

Atļautās vērtības ir norādītas iepriekš sadaļā Ievades veidi.

value

Ievades vadīklas vērtība. Ja tā ir norādīta HTML, tā ir sākotnējā vērtība, un turpmāk to var mainīt vai izgūt jebkurā laikā, izmantojot JavaScript, lai piekļūtu attiecīgā HTMLInputElement objekta vērtības īpašumam. Vērtības atribūts vienmēr ir neobligāts, taču tas ir jāuzskata par obligātu izvēles rūtiņām, radio un slēptajam.

width

Derīgs tikai attēla ievades pogai. Platums ir attēla faila platums, kas jāparāda, lai attēlotu grafisko iesniegšanas pogu. Skatiet attēla ievades veidu.

Nestandarta atribūti

Dažās pārlūkprogrammās ir pieejami arī šādi nestandarta atribūti. Parasti jums vajadzētu izvairīties no to lietošanas, ja vien to nevar palīdzēt.

autocorrect

(tikai Safari). Virkne, kas norāda, vai aktivizēt automātisko labošanu, kamēr lietotājs rediģē šo lauku. Atļautās vērtības ir:

on
Iespējot automātisku drukas kļūdu labošanu, kā arī teksta aizstāšanas apstrādi, ja tādas ir konfigurētas.

off
Atspējot automātisko labošanu un teksta aizstāšanu.

incremental

Būla inkrementālais atribūts ir WebKit un Blink paplašinājums (tātad to atbalsta Safari, Opera, Chrome utt.), kas, ja tāds ir, liek lietotāja aģentam apstrādāt ievadi kā reāllaika meklēšanu. Lietotājam rediģējot lauka vērtību, lietotāja aģents nosūta meklēšanas notikumus uz HTMLInputElement objektu, kas apzīmē meklēšanas lodziņu. Tas ļauj jūsu kodam atjaunināt meklēšanas rezultātus reāllaikā, kad lietotājs rediģē meklēšanu.

Ja inkrementāls nav norādīts, meklēšanas notikums tiek nosūtīts tikai tad, kad lietotājs tieši sāk meklēšanu (piemēram, lauka rediģēšanas laikā nospiežot taustiņu Enter vai Return).

Meklēšanas notikumam ir ierobežots ātrums, lai tas netiktu nosūtīts biežāk nekā ieviešanas noteiktā intervālā.

orient

Līdzīgi kā -moz-orient nestandarta CSS rekvizīts, kas ietekmē <progress> un <meter> elementus, atribūts orient nosaka diapazona slīdņa orientāciju. Vērtības ietver horizontālo, kas nozīmē, ka diapazons tiek renderēts horizontāli, un vertikāli, kur diapazons tiek renderēts vertikāli.

results

atribūts, ko atbalsta tikai Safari, ir skaitliska vērtība, kas ļauj ignorēt maksimālo ierakstu skaitu, kas jāparāda elementa <input> sākotnēji nodrošinātajā iepriekšējo meklēšanas vaicājumu nolaižamajā izvēlnē.

Vērtībai ir jābūt nenegatīvam decimālskaitlim. Ja tas nav norādīts vai ir norādīta nederīga vērtība, tiek izmantots pārlūkprogrammas noklusējuma maksimālais ierakstu skaits.

webkitdirectory

Nestandarta
Būla tīmekļa komplekta atribūts, ja tāds ir, norāda, ka ir jābūt pieejamiem tikai direktorijiem, kurus lietotājs var atlasīt failu atlasītāja saskarnē. Papildinformāciju un piemērus skatiet HTMLInputElement.webkitdirectory.

Lai gan sākotnēji tas tika ieviests tikai uz WebKit balstītām pārlūkprogrammām, tīmekļa komplektu direktoriju var izmantot arī Microsoft Edge, kā arī Firefox 50 un jaunākās versijās. Tomēr, lai gan tam ir salīdzinoši plašs atbalsts, tas joprojām nav standarta un to nevajadzētu izmantot, ja vien jums nav citas alternatīvas.

Metodes

Tālāk norādītās metodes nodrošina interfeiss HTMLInputElement, kas attēlo <input> elementus DOM. Ir pieejamas arī tās metodes, kuras nosaka vecākinterfeiss — HTMLElement, Element, Node un EventTarget.

pārbaudiet Validity()
Atgriež patieso, ja elementa vērtība iztur derīguma pārbaudes; pretējā gadījumā atgriež false un elementā aktivizē nederīgu notikumu.

reportValidity()
Atgriež patieso, ja elementa vērtība iztur derīguma pārbaudes; pretējā gadījumā atgriež false, elementā aktivizē nederīgu notikumu un (ja notikums netiek atcelts) ziņo par problēmu lietotājam.

select ()
Atlasa visu elementa <input> saturu, ja elementa saturs ir atlasāms. Elementiem, kuriem nav atlasāma teksta satura (piemēram, vizuālais krāsu atlasītājs vai kalendāra datuma ievade), šī metode neko nedara.

setCustomValidity()
Iestata pielāgotu ziņojumu, kas tiek rādīts, ja ievades elementa vērtība nav derīga.

setRangeText()
Iestata norādītā rakstzīmju diapazona saturu ievades elementā noteiktai virknei. Ir pieejams SelectMode parametrs, kas ļauj kontrolēt, kā tiek ietekmēts esošais saturs.

setSelectionRange()
Atlasa norādīto rakstzīmju diapazonu teksta ievades elementā. Neko nedara ievadei, kas netiek parādīta kā teksta ievades lauki.

stepDown ()
Samazina ciparu ievades vērtību par vienu, pēc noklusējuma vai par norādīto vienību skaitu.

stepUp ()
Palielina ciparu ievades vērtību par vienu vai par norādīto vienību skaitu.

CSS

Ievadiem, kas ir aizstāti elementi, ir dažas funkcijas, kas nav piemērojamas elementiem, kas nav formas elementi. Ir CSS atlasītāji, kas var īpaši atlasīt veidlapas vadīklas, pamatojoties uz to lietotāja interfeisa funkcijām, kas pazīstamas arī kā lietotāja interfeisa pseidoklases. Ievades elementu var atlasīt arī pēc veida, izmantojot atribūtu atlasītājus. Ir dažas īpašības, kas ir arī īpaši noderīgas.

UI pseidoklases

Paraksti, kas īpaši atbilst elementam <input>:

Pseidoklases piemērs

Mēs varam veidot izvēles rūtiņas etiķeti atkarībā no tā, vai izvēles rūtiņa ir atzīmēta vai nav. Šajā piemērā mēs veidojam  color un font-weight no <label>, kas tiek parādīts uzreiz pēc pārbaudītas ievades. Ja ievade nav atzīmēta, mēs neesam lietojuši nevienu stilu.

input:checked + label {
color: red;
font-weight: bold;
}

Atribūtu atlasītāji

Izmantojot atribūtu atlasītājus, ir iespējams atlasīt dažādu veidu veidlapas vadīklas atkarībā no to veida. CSS atribūtu atlasītāji saskaņo elementus, pamatojoties tikai uz atribūta klātbūtni vai noteiktā atribūta vērtību.

/* atbilst ievadītajai parolei */
input[type="password"] {
}

/* atbilst veidlapas vadīklai, kuras derīgās vērtības ir ierobežotas ar vērtību diapazonu*/
input[min][max] {
}

/* saskaņo formas vadīklu ar modeļa atribūtu */
input[pattern] {
}

::placeholder

Pēc noklusējuma viettura teksta izskats ir caurspīdīgs vai gaiši pelēks. ::placeholder pseidoelements ir ievades viettura teksts. To var veidot ar ierobežotu CSS rekvizītu apakškopu.

::placeholder {
color: blue;
}

Noteikumā var izmantot tikai to CSS rekvizītu apakškopu, kas attiecas uz ::pirmās rindas pseidoelementu, atlasītājā izmantojot ::placeholder.

appearance

Rekvizīts izskats ļauj parādīt (gandrīz) jebkuru elementu kā platformas vietējo stilu, pamatojoties uz operētājsistēmas motīvu, kā arī noņemt jebkuru platformas vietējo stilu ar vērtību None.

Varat likt <div> izskatīties kā radiopogai ar div {appearance: radio;} vai radio izskatīties kā izvēles rūtiņai ar [type=”radio”] {appearance: checkbox;}, bet tā nav.

Izskata iestatīšana: neviens nenoņem platformas vietējās apmales, bet nenoņem funkcionalitāti.

caret-color

Rekvizīts, kas raksturīgs ar teksta ievadi saistītajiem elementiem, ir rekvizīts CSS caret-color, kas ļauj iestatīt krāsu, kas tiek izmantota teksta ievades līnijas zīmēšanai:

HTML

<label for="textInput">Ievērojiet sarkano paklāju:</label>
<input id="textInput" class="custom" size="32" />

CSS

input.custom {
caret-color: red;
font: 16px "Helvetica", "Arial", "sans-serif";
}

object-position and object-fit

Dažos gadījumos (parasti izmantojot netekstuālu ievadi un specializētas saskarnes) elements <input> ir aizstāts elements. Ja tā ir, elementa izmēra pozīciju un izmēru, kā arī novietojumu tā rāmī var pielāgot, izmantojot CSS.  object-position un object-fit iestatījumi.

Styling

Lai iegūtu papildinformāciju par krāsu pievienošanu elementiem HTML, skatiet resurss angļu valodā:

• Applying color to HTML elements using CSS.

Vēl resursi:

• Styling HTML forms
• Advanced styling for HTML forms un vēl
• compatibility table of CSS properties.