HTML <input> -elementti mahdollistaa erilaisten lomakekontrollien luomisen käyttäjän syötteen keräämiseen. Voit mukauttaa näiden kontrollien toimintaa ja ulkoasua eri attribuuttien avulla. Tutustutaanpa joihinkin yleisesti käytettyihin attribuutteihin:

value

value-attribuuttia käytetään asettamaan <input>-elementin alkuarvo. Sen arvo riippuu syötteen tyypistä:

• Nappien (type="button", type="reset", type="submit") kohdalla se määrittää napissa näkyvän tekstin;

• Teksti (type="text") ja salasana (type="password") kentissä se määrittää syötekentän oletusarvon;

• Valintaruuduissa (type="checkbox") ja valintanapeissa (type="radio") se määrittää syötteeseen liittyvän arvon.

Huomio

value-attribuuttia ei voida käyttää <input type="file"> kanssa.

autofocus

autofocus-attribuutti määrittää, että syöttökentällä tulisi automaattisesti olla fokus, kun verkkosivu ladataan. Kun sivu latautuu, syöttökenttä valitaan automaattisesti, jolloin käyttäjä voi alkaa kirjoittaa ilman, että hänen tarvitsee ensin klikata syöttökenttää.

Huomautus

Autofocus ei toimi täällä, koska sivu ei lataudu uudelleen, kun napsautat "Suorita koodi" -painiketta.

required

required-attribuuttia käytetään tekemään syöttökentästä pakollinen. Se määrittää, että syöttökenttä on täytettävä ennen kuin käyttäjä voi lähettää lomakkeen. Jos käyttäjä yrittää lähettää lomakkeen täyttämättä pakollista syöttökenttää, hän saa virheilmoituksen, joka osoittaa, että kenttä on pakollinen.

placeholder

placeholder-attribuutti tarjoaa vihjeen tai esimerkin odotetusta syötearvosta käyttäjälle. Lyhyt tekstijono näytetään syötekentän sisällä ennen kuin käyttäjä syöttää mitään arvoa. Tämä on hyödyllistä kentille, jotka vaativat tietynlaista muotoilua, kuten puhelin- tai luottokorttinumerot.

Huomio

Yllä olevissa esimerkeissä käytetään erilaisia type-attribuutteja <input>-elementeille, mikä vaikuttaa merkittävästi niiden ulkonäköön ja toiminnallisuuteen. Tutustut syvällisemmin erilaisiin syöttötyyppeihin seuraavassa luvussa.