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ä.

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:

Videotutoriaali