Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Erilaisten Syötekenttätyyppien Tutkiminen HTML:ssä | HTML-Lomakkeet ja Käyttäjän Syöte
HTML:n Perusteet

bookErilaisten Syötekenttätyyppien Tutkiminen HTML:ssä

HTML tarjoaa useita erilaisia <input>-tyyppejä, joiden avulla voidaan kerätä erilaista käyttäjätietoa. Alla on yleiskatsaus yleisimmistä tyypeistä.

Sähköposti ja salasana

  • type="email": hyväksyy sähköpostiosoitteet ja suorittaa perusvalidoinnin selaimessa;
  • type="password": piilottaa kirjoitetut merkit turvallisuuden vuoksi ja voi käyttää minlength- ja maxlength-attribuutteja.
index.html

index.html

copy

Numero

type="number": hyväksyy numeeriset arvot. Käytä min, max ja step rajoittaaksesi sallittua arvoaluetta.

index.html

index.html

copy

Puhelin

type="tel": puhelinnumeroille. Ei sisäänrakennettua validointia. Kehittäjät validoivat sen manuaalisesti.

index.html

index.html

copy

Valintaruutu

type="checkbox": mahdollistaa useiden vaihtoehtojen valitsemisen. Käytä checked esivalintaan.

index.html

index.html

copy

Radiopainike

type="radio": valitsee yhden vaihtoehdon ryhmästä. Kaikilla radiopainikkeilla tulee olla sama name.

index.html

index.html

copy

Liukusäädin

type="range": liukusäädin, jolla valitaan arvo tietyltä väliltä. JavaScript-logiikka jätetään tämän kurssin ulkopuolelle.

index.html

index.html

index.js

index.js

copy
Note
Huomautus

JavaScript-logiikka ohitetaan tällä kurssilla.

Päivämäärä ja aika

  • type="date": kalenterivalitsin;
  • type="time": ajanvalitsin;
  • type="datetime-local": yhdistää ajan ja päivämäärän syötteet.
index.html

index.html

copy
Note
Huomio

Yhtenäisen tyylin saavuttamiseksi kehittäjät käyttävät usein valmiita käyttöliittymäkirjastoja oletusselaimen valitsimien sijaan.

Note
Lisätietoa

Olet ehkä huomannut, että täyttäessäsi tiettyjä kenttiä selain voi ehdottaa automaattisen täytön vaihtoehtoja. Selain muistaa kenttiin syöttämäsi arvot ja ehdottaa niitä sinulle automaattista täyttöä varten.

question mark

Mikä on tärkein ero syötekenttien type="email" ja type="password" välillä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 5

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

bookErilaisten Syötekenttätyyppien Tutkiminen HTML:ssä

Pyyhkäise näyttääksesi valikon

HTML tarjoaa useita erilaisia <input>-tyyppejä, joiden avulla voidaan kerätä erilaista käyttäjätietoa. Alla on yleiskatsaus yleisimmistä tyypeistä.

Sähköposti ja salasana

  • type="email": hyväksyy sähköpostiosoitteet ja suorittaa perusvalidoinnin selaimessa;
  • type="password": piilottaa kirjoitetut merkit turvallisuuden vuoksi ja voi käyttää minlength- ja maxlength-attribuutteja.
index.html

index.html

copy

Numero

type="number": hyväksyy numeeriset arvot. Käytä min, max ja step rajoittaaksesi sallittua arvoaluetta.

index.html

index.html

copy

Puhelin

type="tel": puhelinnumeroille. Ei sisäänrakennettua validointia. Kehittäjät validoivat sen manuaalisesti.

index.html

index.html

copy

Valintaruutu

type="checkbox": mahdollistaa useiden vaihtoehtojen valitsemisen. Käytä checked esivalintaan.

index.html

index.html

copy

Radiopainike

type="radio": valitsee yhden vaihtoehdon ryhmästä. Kaikilla radiopainikkeilla tulee olla sama name.

index.html

index.html

copy

Liukusäädin

type="range": liukusäädin, jolla valitaan arvo tietyltä väliltä. JavaScript-logiikka jätetään tämän kurssin ulkopuolelle.

index.html

index.html

index.js

index.js

copy
Note
Huomautus

JavaScript-logiikka ohitetaan tällä kurssilla.

Päivämäärä ja aika

  • type="date": kalenterivalitsin;
  • type="time": ajanvalitsin;
  • type="datetime-local": yhdistää ajan ja päivämäärän syötteet.
index.html

index.html

copy
Note
Huomio

Yhtenäisen tyylin saavuttamiseksi kehittäjät käyttävät usein valmiita käyttöliittymäkirjastoja oletusselaimen valitsimien sijaan.

Note
Lisätietoa

Olet ehkä huomannut, että täyttäessäsi tiettyjä kenttiä selain voi ehdottaa automaattisen täytön vaihtoehtoja. Selain muistaa kenttiin syöttämäsi arvot ja ehdottaa niitä sinulle automaattista täyttöä varten.

question mark

Mikä on tärkein ero syötekenttien type="email" ja type="password" välillä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 5
some-alt