Lomakekenttien ja Nimilappujen Tehokas Käyttö
Kuten aiemmin on nähty, lomakkeen tehokkain elementti on input. Tämä elementti odottaa käyttäjältä tietoja. Keskitytään siihen.
Syötteen tyypit
Tekstikenttä
Tarkoitettu lyhyiden tekstimuotoisten tietojen syöttämiseen, kuten käyttäjätunnukset, sähköpostiosoitteet tai lyhyet viestit.
<input type="text" />
Salasanakenttä
Käytetään salasanojen syöttämiseen, jolloin merkit peitetään tietoturvan vuoksi. Varmistaa yksityisyyden piilottamalla syötetyt merkit.
<input type="password" />
Sähköpostikenttä
Käytetään sähköpostiosoitteiden keräämiseen käyttäjiltä. Suorittaa asiakaspuolen validoinnin varmistaakseen, että syötetty arvo on sähköpostimuodossa.
<input type="email" />
Puhelinnumerokenttä
Käytetään puhelinnumeroiden keräämiseen käyttäjiltä. Mahdollistaa puhelinnumeroiden syöttämisen eri muodoissa, mukaan lukien kansainväliset numerot.
<input type="tel" />
Numerokenttä
Käytetään numeeristen tietojen keräämiseen käyttäjiltä. Tarjoaa numeronäppäimistön mobiililaitteilla syöttämisen helpottamiseksi.
<input type="number" />
Valintaruutu
Mahdollistaa yhden tai useamman vaihtoehdon valitsemisen luettelosta. Soveltuu tilanteisiin, joissa useita valintoja sallitaan, kuten useiden kohteiden valinta luettelosta tai ehtojen hyväksyminen.
<input type="checkbox" />
Valintanappi (Radio Button)
Mahdollistaa käyttäjän valita yhden vaihtoehdon toisensa poissulkevien vaihtoehtojen joukosta. Sopii tilanteisiin, joissa vain yksi vaihtoehto voidaan valita, kuten sukupuolen valinta tai maksutavan valinta.
<input type="radio" />
Tiedoston valinta (File Input)
Mahdollistaa käyttäjän ladata tiedostoja laitteeltaan, valita paikallisesta tiedostojärjestelmästä ja lähettää ne lomakkeen mukana. Tämä ominaisuus on erityisen hyödyllinen liitettäessä asiakirjoja tai kuvia.
<input type="file" />
Päivämäärä-, aika- ja päivämäärä-aikakenttä (Date Input, Time Input, and DateTime Input)
Mahdollistaa käyttäjän syöttää päivämääriä, aikoja tai molempia. Tarjoaa käyttäjäystävälliset käyttöliittymät päivämäärien ja aikojen valintaan. Hyödyllinen esimerkiksi syntymäajan, ajanvarausten tai tapahtuma-aikataulujen tallentamiseen.
<input type="date" />
<input type="time" />
<input type="datetime-local" />
Esimerkki: Syötä jotakin kenttiin, ja ne ehdottavat erilaisia vaihtoehtoja. Älä huoli; tietoja ei kerätä.
index.html
Olet ehkä huomannut, että lomakkeen täyttäminen ei ole kovin kätevää, jos et ymmärrä, mitä jokaiseen kenttään pyydetään. Siksi tunnisteet ovat avuksi.
Tunnisteet
Tunnisteet (<label>
) ovat olennaisia tekstiselitteiden yhdistämisessä lomakekenttiin, mikä parantaa saavutettavuutta ja käytettävyyttä. On tärkeää, että for
-attribuutin arvo <label>
-tagissa vastaa siihen liittyvän id
-elementin input
-attribuuttia.
Esimerkki:
<label for="username">Username:</label>
<input type="text" id="username" />
Yllä olevassa esimerkissä:
- Kun napsautat
Username:
-tunnistetta, kohdistus siirtyy automaattisesti vastaavaan syötekenttään; label
jainput
on yhdistetty toisiinsafor
- jaid
-attribuuttien avulla;- Sekä
for
- ettäid
-attribuutilla on sama arvo (username
).
Tehdään lomakkeen täyttämisestä helpompaa lisäämällä tunnisteet aiemman esimerkin syötekenttiin.
Esimerkki:
index.html
Videotutoriaali
1. Mikä <label>
-tunnisteen attribuutti liittää sen tiettyyn lomakkeen <input>
-elementtiin?
2. Mikä attribuutti puuttuu input-elementistä, jotta se voidaan liittää label-elementtiin?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain more about the different input types and when to use each one?
How do I properly link a label to an input for accessibility?
Can you show an example of a complete form using these input types and labels?
Awesome!
Completion rate improved to 3.13
Lomakekenttien ja Nimilappujen Tehokas Käyttö
Pyyhkäise näyttääksesi valikon
Kuten aiemmin on nähty, lomakkeen tehokkain elementti on input. Tämä elementti odottaa käyttäjältä tietoja. Keskitytään siihen.
Syötteen tyypit
Tekstikenttä
Tarkoitettu lyhyiden tekstimuotoisten tietojen syöttämiseen, kuten käyttäjätunnukset, sähköpostiosoitteet tai lyhyet viestit.
<input type="text" />
Salasanakenttä
Käytetään salasanojen syöttämiseen, jolloin merkit peitetään tietoturvan vuoksi. Varmistaa yksityisyyden piilottamalla syötetyt merkit.
<input type="password" />
Sähköpostikenttä
Käytetään sähköpostiosoitteiden keräämiseen käyttäjiltä. Suorittaa asiakaspuolen validoinnin varmistaakseen, että syötetty arvo on sähköpostimuodossa.
<input type="email" />
Puhelinnumerokenttä
Käytetään puhelinnumeroiden keräämiseen käyttäjiltä. Mahdollistaa puhelinnumeroiden syöttämisen eri muodoissa, mukaan lukien kansainväliset numerot.
<input type="tel" />
Numerokenttä
Käytetään numeeristen tietojen keräämiseen käyttäjiltä. Tarjoaa numeronäppäimistön mobiililaitteilla syöttämisen helpottamiseksi.
<input type="number" />
Valintaruutu
Mahdollistaa yhden tai useamman vaihtoehdon valitsemisen luettelosta. Soveltuu tilanteisiin, joissa useita valintoja sallitaan, kuten useiden kohteiden valinta luettelosta tai ehtojen hyväksyminen.
<input type="checkbox" />
Valintanappi (Radio Button)
Mahdollistaa käyttäjän valita yhden vaihtoehdon toisensa poissulkevien vaihtoehtojen joukosta. Sopii tilanteisiin, joissa vain yksi vaihtoehto voidaan valita, kuten sukupuolen valinta tai maksutavan valinta.
<input type="radio" />
Tiedoston valinta (File Input)
Mahdollistaa käyttäjän ladata tiedostoja laitteeltaan, valita paikallisesta tiedostojärjestelmästä ja lähettää ne lomakkeen mukana. Tämä ominaisuus on erityisen hyödyllinen liitettäessä asiakirjoja tai kuvia.
<input type="file" />
Päivämäärä-, aika- ja päivämäärä-aikakenttä (Date Input, Time Input, and DateTime Input)
Mahdollistaa käyttäjän syöttää päivämääriä, aikoja tai molempia. Tarjoaa käyttäjäystävälliset käyttöliittymät päivämäärien ja aikojen valintaan. Hyödyllinen esimerkiksi syntymäajan, ajanvarausten tai tapahtuma-aikataulujen tallentamiseen.
<input type="date" />
<input type="time" />
<input type="datetime-local" />
Esimerkki: Syötä jotakin kenttiin, ja ne ehdottavat erilaisia vaihtoehtoja. Älä huoli; tietoja ei kerätä.
index.html
Olet ehkä huomannut, että lomakkeen täyttäminen ei ole kovin kätevää, jos et ymmärrä, mitä jokaiseen kenttään pyydetään. Siksi tunnisteet ovat avuksi.
Tunnisteet
Tunnisteet (<label>
) ovat olennaisia tekstiselitteiden yhdistämisessä lomakekenttiin, mikä parantaa saavutettavuutta ja käytettävyyttä. On tärkeää, että for
-attribuutin arvo <label>
-tagissa vastaa siihen liittyvän id
-elementin input
-attribuuttia.
Esimerkki:
<label for="username">Username:</label>
<input type="text" id="username" />
Yllä olevassa esimerkissä:
- Kun napsautat
Username:
-tunnistetta, kohdistus siirtyy automaattisesti vastaavaan syötekenttään; label
jainput
on yhdistetty toisiinsafor
- jaid
-attribuuttien avulla;- Sekä
for
- ettäid
-attribuutilla on sama arvo (username
).
Tehdään lomakkeen täyttämisestä helpompaa lisäämällä tunnisteet aiemman esimerkin syötekenttiin.
Esimerkki:
index.html
Videotutoriaali
1. Mikä <label>
-tunnisteen attribuutti liittää sen tiettyyn lomakkeen <input>
-elementtiin?
2. Mikä attribuutti puuttuu input-elementistä, jotta se voidaan liittää label-elementtiin?
Kiitos palautteestasi!