Lomakkeet

Lomakkeet ovat keskeinen työkalu käyttäjätietojen keräämisessä ja niiden lähettämisessä palvelimelle käsiteltäväksi. Ne koostuvat erilaisista lomake-elementeistä, joiden avulla käyttäjät voivat syöttää tietoja. Tässä kurssissa emme kuitenkaan lähetä tietoja palvelimelle, sillä se vaatii lisäosaamista, joka ei kuulu tämän kurssin aihepiiriin.

Kaikissa esimerkeissä koodissa on attribuutti onsubmit="return false". Tämä attribuutti estää lomaketta lähettämästä pyyntöä palvelimelle oletuksena.

Lomakkeiden luominen

Käytä <form>-tägiä interaktiivisen lomakkeen luomiseen.

<form>
  <!-- Form elements go here -->
</form>

Lomake-elementit

Lomakkeet sisältävät nimikkeitä ja erilaisia syöttökenttätyyppejä (teksti, salasana, sähköposti jne.). Nimikkeet yhdistävät tekstin syöttökenttiin ja parantavat saavutettavuutta. Opit lisää nimikkeistä ja syöttökenttätyypeistä seuraavissa luvuissa.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Lomakkeen lähettäminen

Lomake lähetetään painikkeella, jonka type="submit" on "submit".

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Tässä on perusesimerkki lomakkeesta.