HTML <form> -elementti on keskeinen rakennuspalikka interaktiivisten lomakkeiden luomiseksi verkkosivulle. Se toimii säiliönä kaikille lomake-elementeille. Tutustutaanpa esimerkkiin yksinkertaisesta lomakkeesta:

Huomio

Kaikissa esimerkeissä on mukana onsubmit="return false" -attribuutti estämään lomakkeen oletusarvoinen lähetyskäyttäytyminen. Näin keskittyminen pysyy lomakkeen luomisessa ja attribuuteissa.

form-attribuuttien selitys:

• name tarjoaa yksilöllisen tunnisteen lomakkeelle verkkosivulla. Sekä palvelin että asiakas käyttävät tätä tunnistetta lomaketietojen käsittelyyn. Lomakkeen nimi voi sisältää numeroita, alaviivoja, viivoja ja englannin aakkosten kirjaimia, mutta se ei saa sisältää välilyöntejä;

• autocomplete määrittää, voivatko verkkoselaimet täyttää lomakekentät automaattisesti. Se voidaan asettaa "on" tai "off" ja soveltaa yksittäisiin lomake-elementteihin;

• novalidate määrittää, että selainten ei pitäisi suorittaa lomakekenttien validointia. Tämä voi olla hyödyllistä, kun haluat käsitellä validointia manuaalisesti JavaScriptin avulla;

• method määrittää HTTP-menetelmän, jota käytetään lomaketietojen lähettämiseen palvelimelle. Kaksi yleisintä menetelmää ovat GET ja POST. Tämä aihe käsitellään perusteellisesti JavaScript-kurssilla.

Yleiskatsaus lomakkeen sisäisiin elementteihin

form-elementin sisällä on useita lapsielementtejä, jotka ovat olennaisia lomakkeen toiminnallisuudelle. input-elementin avulla käyttäjät voivat syöttää erilaisia tietotyyppejä, kuten tekstiä, numeroita ja päivämääriä. Tässä esimerkissä type="email" käytetään sähköpostikenttään ja type="password" salasanakenttään. label-elementti järjestää ja jäsentää lomakkeen, tarjoten kuvailevaa tekstiä syöttökentille ja auttaen käyttäjiä ymmärtämään niiden tarkoitukset. button-elementti type="submit"-attribuutilla käytetään lomaketietojen lähettämiseen palvelimelle, kun sitä klikataan. Oletuksena lomakkeen lähettäminen lataa verkkosivun uudelleen, mutta tätä käyttäytymistä voidaan mukauttaa JavaScriptin avulla.