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

bookErilaisten Syöttötyyppien Tutkiminen HTML:ssä

HTML tarjoaa erilaisia <input> elementtejä, joiden avulla voit kerätä käyttäjiltä erilaisia tietotyyppejä. Tutustutaanpa joihinkin yleisesti käytettyihin syöttötyyppeihin:

sähköposti ja salasana

  • type="email": käytetään sähköpostikentissä, jotka vaativat kelvollisen sähköpostiosoitteen. Selain validoi automaattisesti sähköpostiosoitteen ja kehottaa käyttäjää korjaamaan virheelliset syötteet;
  • type="password": käytetään salasanakentissä, joissa syötetty teksti on peitetty turvallisuuden vuoksi. Voit myös määrittää minLength ja maxLength attribuutit asettaaksesi salasanan pituusvaatimukset.
index.html

index.html

copy

number

type="number": käytetään numeeriseen syötteeseen. Voit määrittää tietyn alueen min ja max attribuuteilla ja asettaa tietyn askelarvon step attribuutilla.

index.html

index.html

copy

telephone

type="tel": tarkoitettu puhelinnumeroiden syöttämiseen, mutta se ei suorita mitään syötteen validointia. Kehittäjän vastuulla on validoida syöte ja varmistaa, että se on kelvollinen puhelinnumero.

index.html

index.html

copy

valintaruutu

type="checkbox": sallii käyttäjän valita yhden tai useamman vaihtoehdon ennalta määritellyistä valinnoista. checked-attribuutti tekee valintaruudusta oletuksena valitun.

index.html

index.html

copy

radio

type="radio": luo joukon vaihtoehtoja, joista vain yksi voidaan valita. Jokainen vaihtoehto esitetään valintanappina, ja yhden valitseminen poistaa automaattisesti muiden valinnan. Jokaisella valintanapilla tulisi olla yksilöllinen value-attribuutti sen tunnistamiseksi.

index.html

index.html

copy

range

type="range": luo liukusäätimen, jonka avulla käyttäjät voivat valita arvon tietyltä alueelta. Voit käyttää min, max, step ja value -attribuutteja määrittämään sen toimintaa.

index.html

index.html

index.js

index.js

copy

Huomio

JavaScript ei ole tämän kurssin keskipiste, joten sen logiikka ohitetaan.

päivämäärä ja aika

  • type="date": sallii käyttäjien valita päivämäärän kalenterin ponnahdusikkunasta;
  • type="time": sallii käyttäjien syöttää ajan 24-tunnin muodossa;
  • type="datetime-local": yhdistää ajan ja päivämäärän syötteet.

Esimerkki:

index.html

index.html

copy

Huomautus

Jotta tyylit olisivat yhdenmukaisia eri laitteilla, käytetään usein valmiita ratkaisuja ponnahdusikkunoiden kalentereille ja aika-syötteille.

question mark

Mikä on pääasiallinen ero type="email" ja type="password" syötekenttien 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

Awesome!

Completion rate improved to 2.56

bookErilaisten Syöttötyyppien Tutkiminen HTML:ssä

Pyyhkäise näyttääksesi valikon

HTML tarjoaa erilaisia <input> elementtejä, joiden avulla voit kerätä käyttäjiltä erilaisia tietotyyppejä. Tutustutaanpa joihinkin yleisesti käytettyihin syöttötyyppeihin:

sähköposti ja salasana

  • type="email": käytetään sähköpostikentissä, jotka vaativat kelvollisen sähköpostiosoitteen. Selain validoi automaattisesti sähköpostiosoitteen ja kehottaa käyttäjää korjaamaan virheelliset syötteet;
  • type="password": käytetään salasanakentissä, joissa syötetty teksti on peitetty turvallisuuden vuoksi. Voit myös määrittää minLength ja maxLength attribuutit asettaaksesi salasanan pituusvaatimukset.
index.html

index.html

copy

number

type="number": käytetään numeeriseen syötteeseen. Voit määrittää tietyn alueen min ja max attribuuteilla ja asettaa tietyn askelarvon step attribuutilla.

index.html

index.html

copy

telephone

type="tel": tarkoitettu puhelinnumeroiden syöttämiseen, mutta se ei suorita mitään syötteen validointia. Kehittäjän vastuulla on validoida syöte ja varmistaa, että se on kelvollinen puhelinnumero.

index.html

index.html

copy

valintaruutu

type="checkbox": sallii käyttäjän valita yhden tai useamman vaihtoehdon ennalta määritellyistä valinnoista. checked-attribuutti tekee valintaruudusta oletuksena valitun.

index.html

index.html

copy

radio

type="radio": luo joukon vaihtoehtoja, joista vain yksi voidaan valita. Jokainen vaihtoehto esitetään valintanappina, ja yhden valitseminen poistaa automaattisesti muiden valinnan. Jokaisella valintanapilla tulisi olla yksilöllinen value-attribuutti sen tunnistamiseksi.

index.html

index.html

copy

range

type="range": luo liukusäätimen, jonka avulla käyttäjät voivat valita arvon tietyltä alueelta. Voit käyttää min, max, step ja value -attribuutteja määrittämään sen toimintaa.

index.html

index.html

index.js

index.js

copy

Huomio

JavaScript ei ole tämän kurssin keskipiste, joten sen logiikka ohitetaan.

päivämäärä ja aika

  • type="date": sallii käyttäjien valita päivämäärän kalenterin ponnahdusikkunasta;
  • type="time": sallii käyttäjien syöttää ajan 24-tunnin muodossa;
  • type="datetime-local": yhdistää ajan ja päivämäärän syötteet.

Esimerkki:

index.html

index.html

copy

Huomautus

Jotta tyylit olisivat yhdenmukaisia eri laitteilla, käytetään usein valmiita ratkaisuja ponnahdusikkunoiden kalentereille ja aika-syötteille.

question mark

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

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 5
some-alt