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

Suggested prompts:

Can you explain more about how browser validation works for these input types?

What are some best practices for using these different input types in forms?

Can you show examples of how to use these input types in an HTML form?

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