Lomakekenttien Käyttö
Lomakekentät ovat tärkein tapa, jolla käyttäjät syöttävät tietoja. HTML tarjoaa monia erilaisia syötekenttätyyppejä riippuen tarvittavasta tiedosta.
Yleiset syötekenttätyypit
Tekstikenttä
Suunniteltu lyhyiden tekstimuotoisten tietojen syöttämiseen, kuten käyttäjätunnukset, sähköpostiosoitteet tai lyhyet viestit.
<input type="text" />
Salasanakenttä
Käytetään salasanan syöttämiseen, jolloin merkit peitetään turvallisuussyistä.
<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ä.
<input type="tel" />
Numerokenttä
Käytetään numeerisen tiedon keräämiseen käyttäjiltä. Tarjoaa numeronäppäimistön mobiililaitteilla.
<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" />
Valintapainike
Mahdollistaa yhden vaihtoehdon valitsemisen toisensa poissulkevien vaihtoehtojen joukosta. Soveltuu tilanteisiin, joissa vain yksi vaihtoehto voidaan valita, kuten sukupuolen valinta tai maksutavan valinta.
<input type="radio" />
Tiedoston valinta
Mahdollistaa käyttäjien 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ä
Mahdollistaa käyttäjien 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.
<input type="date" />
<input type="time" />
<input type="datetime-local" />
Syötä kenttiin jotakin, niin ne ehdottavat erilaisia vaihtoehtoja. Ei huolta, tietoja ei kerätä.
index.html
Olet ehkä huomannut, että lomakkeen täyttäminen ei ole kovin kätevää, jos et ymmärrä, mitä jokaiseen kenttään tulee syöttää. Siksi etiketit ovat avuksi.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how to properly link a label to an input in HTML?
What are some best practices for using different input types in forms?
Can you show an example of a complete form with labels and various input types?
Awesome!
Completion rate improved to 2.86Lomakekenttien Käyttö
Pyyhkäise näyttääksesi valikon
Lomakekentät ovat tärkein tapa, jolla käyttäjät syöttävät tietoja. HTML tarjoaa monia erilaisia syötekenttätyyppejä riippuen tarvittavasta tiedosta.
Yleiset syötekenttätyypit
Tekstikenttä
Suunniteltu lyhyiden tekstimuotoisten tietojen syöttämiseen, kuten käyttäjätunnukset, sähköpostiosoitteet tai lyhyet viestit.
<input type="text" />
Salasanakenttä
Käytetään salasanan syöttämiseen, jolloin merkit peitetään turvallisuussyistä.
<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ä.
<input type="tel" />
Numerokenttä
Käytetään numeerisen tiedon keräämiseen käyttäjiltä. Tarjoaa numeronäppäimistön mobiililaitteilla.
<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" />
Valintapainike
Mahdollistaa yhden vaihtoehdon valitsemisen toisensa poissulkevien vaihtoehtojen joukosta. Soveltuu tilanteisiin, joissa vain yksi vaihtoehto voidaan valita, kuten sukupuolen valinta tai maksutavan valinta.
<input type="radio" />
Tiedoston valinta
Mahdollistaa käyttäjien 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ä
Mahdollistaa käyttäjien 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.
<input type="date" />
<input type="time" />
<input type="datetime-local" />
Syötä kenttiin jotakin, niin ne ehdottavat erilaisia vaihtoehtoja. Ei huolta, tietoja ei kerätä.
index.html
Olet ehkä huomannut, että lomakkeen täyttäminen ei ole kovin kätevää, jos et ymmärrä, mitä jokaiseen kenttään tulee syöttää. Siksi etiketit ovat avuksi.
Kiitos palautteestasi!
