Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Lomakekenttien ja Nimilappujen Tehokas Käyttö | Taulukot ja Lomakkeet
HTML:n Perusteet

bookLomakekenttien 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

index.html

copy

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 ja input on yhdistetty toisiinsa for- ja id-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

index.html

copy

Videotutoriaali

1. Mikä <label>-tunnisteen attribuutti liittää sen tiettyyn lomakkeen <input>-elementtiin?

2. Mikä attribuutti puuttuu input-elementistä, jotta se voidaan liittää label-elementtiin?

question mark

Mikä <label>-tunnisteen attribuutti liittää sen tiettyyn lomakkeen <input>-elementtiin?

Select the correct answer

question mark

Mikä attribuutti puuttuu input-elementistä, jotta se voidaan liittää label-elementtiin?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 5

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

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

bookLomakekenttien 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

index.html

copy

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 ja input on yhdistetty toisiinsa for- ja id-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

index.html

copy

Videotutoriaali

1. Mikä <label>-tunnisteen attribuutti liittää sen tiettyyn lomakkeen <input>-elementtiin?

2. Mikä attribuutti puuttuu input-elementistä, jotta se voidaan liittää label-elementtiin?

question mark

Mikä <label>-tunnisteen attribuutti liittää sen tiettyyn lomakkeen <input>-elementtiin?

Select the correct answer

question mark

Mikä attribuutti puuttuu input-elementistä, jotta se voidaan liittää label-elementtiin?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 5
some-alt