:checked, :disabled ja lomaketilan pseudoluokat
Muotoilkaa lomake-elementtejä niiden vuorovaikutustilan, kuten valinnan, käytöstä poiston tai pakollisuuden, perusteella.
:checked, :disabled ja lomaketilan pseudoluokat on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Lomaketilojen pseudoluokkien yleiskatsaus
CSS tarjoaa pseudoluokkia, jotka kuvaavat HTML-lomake-elementtien tiloja. Niiden avulla lomakeohjaimia voidaan tyylitellä pelkällä CSS:llä ilman JavaScriptiä.
:checked
:checked vaikuttaa valintaruutuihin ja valintanappeihin, kun ne on valittu, sekä valintaluetteloiden <option>-elementteihin, kun ne on valittu.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked mukautetuissa valintaruuduissa
:checked-tekniikka: piilottakaa natiivi syötekenttä ja tyylitelkää mukautettu ruutu viereisen sisaruksen valitsimella, jonka :checked laukaisee:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled ja :enabled
:disabled valitsee lomake-elementit, joilla on disabled-attribuutti. :enabled valitsee elementit, joiden kanssa voi olla vuorovaikutuksessa.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required ja :optional
:required valitsee syötekentät, joilla on required-attribuutti. :optional valitsee syötekentät, joilla sitä ei ole.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid ja :invalid
:valid ja :invalid kuvaavat selaimen natiivin lomakevalidoinnin tilaa, joka perustuu tyyppiin, kaavaan, minimi- ja maksimiarvoihin sekä pakollisuusehtoihin.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid ja :user-invalid
Selaimen validointi suoritetaan heti sivun latautuessa, jopa ennen käyttäjän vuorovaikutusta. :user-valid ja :user-invalid vaikuttavat vasta sen jälkeen, kun käyttäjä on käyttänyt kenttää, mikä tuottaa paljon paremman käyttökokemuksen.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown vaikuttaa, kun syötekentässä näytetään paikkamerkkitekstiä eli kenttä on parhaillaan tyhjä. Sen avulla tyhjät syötekentät voidaan tunnistaa ilman JavaScriptiä.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only ja :read-write
:read-only valitsee syötekentät, joilla on readonly-attribuutti. :read-write valitsee muokattavat syötekentät.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate vaikuttaa välitilassa oleviin valintaruutuihin (ne eivät ole valittuja eivätkä valitsemattomia, vaan tila asetetaan JavaScriptillä) sekä valintanappeihin, kun ryhmästä ei ole valittu mitään.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range ja :out-of-range
Kun type="number"- tai type="range"-syötekentillä on minimi- ja maksimiarvot, :in-range ja :out-of-range kuvaavat nykyisen arvon kelvollisuutta suhteessa näihin rajoihin.
<input type="number" min="1" max="10" value="15" />
Pikatarkistus
Mikä pseudoluokka käyttää lomakkeen validointityylejä vasta sen jälkeen, kun käyttäjä on käyttänyt syötekenttää?
Kertaus
CSS:n lomaketilojen pseudoluokat kuvaavat natiivin lomakevalidoinnin ja vuorovaikutuksen tilaa ilman JavaScriptiä: :checked, :disabled, :required, :valid, :invalid ja monet muut. Suosikaa :user-invalid-pseudoluokkaa :invalid-pseudoluokan sijaan paremman käyttökokemuksen saavuttamiseksi. Tunnistakaa tyhjät kentät :placeholder-shown-pseudoluokan avulla.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”:checked, :disabled ja lomaketilan pseudoluokat” ilmainen?
Kyllä – oppitunnin ”:checked, :disabled ja lomaketilan pseudoluokat” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”:checked, :disabled ja lomaketilan pseudoluokat”?
Muotoilkaa lomake-elementtejä niiden vuorovaikutustilan, kuten valinnan, käytöstä poiston tai pakollisuuden, perusteella. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”:checked, :disabled ja lomaketilan pseudoluokat”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- :hover :focus :active ja :visited
- :nth-child ja :nth-of-type
- :not(), :is() ja :where()
- :checked, :disabled ja lomaketilan pseudoluokat