Olemme jo oppineet rakentamaan lomakkeita syötekenttien ja nimilappujen avulla. Tarkastellaan nyt muita hyödyllisiä syötekenttien attribuutteja, jotka parantavat niiden toiminnallisuutta ja käytettävyyttä.

Yleiset attribuutit syötekentille

Paikkamerkki

placeholder tarjoaa vihjeen tai esimerkkitekstin syöttökentän sisällä, ohjaten käyttäjiä siitä, millaista syötettä odotetaan. Hyödyllinen kontekstin tai ohjeiden antamiseen käyttäjille ennen tietojen syöttämistä.

<input type="text" placeholder="Enter your email" />

Nimi

name määrittää syöttökentän nimen, jota käytetään tunnistamaan syötetyt tiedot lomakkeen lähetyksen yhteydessä. Jokaisella lomakkeen syöttökentällä tulee olla yksilöllinen name-attribuutti.

<input type="text" name="username" />

Arvo

value asettaa syöttökentän alkuperäisen tai oletusarvon. Esitäyttää syöttökentän tietyllä arvolla sivun latautuessa.

<input type="tel" value="+1 (484) 298-9732" />

Pakollinen

required määrittää, että syötekenttä on täytettävä ennen lomakkeen lähettämistä. Estää lomakkeen lähettämisen, jos pakollinen kenttä jätetään tyhjäksi.

<input type="password" required />

Poistettu käytöstä

disabled poistaa syötekentän käytöstä, jolloin käyttäjät eivät voi olla vuorovaikutuksessa kentän kanssa tai syöttää tietoja. Hyödyllinen, kun halutaan näyttää vain luku - tai passiivisia syötekenttiä.

<input type="text" value="New York" disabled />

Vain luku

readonly tekee syötekentästä vain luku -muotoisen, jolloin käyttäjät voivat nähdä arvon, mutta eivät muokata sitä. Samankaltainen kuin disabled-attribuutti, mutta kenttä voidaan silti valita ja siihen voidaan kohdistaa fokus.

<input type="text" value="USA" readonly />

Min ja Max

min ja max määrittävät numeeristen syötekenttien sallitut vähimmäis- ja enimmäisarvot. Hyödyllisiä rajoitusten asettamiseen numeerisille syötteille, kuten ikä tai määrä.

<input type="number" min="21" max="99" />

Esimerkki: Tarkastellaan esimerkkiä, joka sisältää kaikki lomakkeessa tarvittavat attribuutit ja elementit.

Videotutoriaali