Kun rakennat lomaketta, käytät kehyksiä tai lomakerakentajia. Mutta konepellin alla kaikki käyttävät HTML-lomakkeita. Jos ymmärrät, miten HTML-lomakkeet toimivat, ymmärrät kaiken muun. Et ole riippuvainen mistään työkalusta tai kehyksestä. Tunnet perusteet.
Tässä artikkelissa käsitellään HTML:n form-elementtiä, kenttätyyppejä, nimikkeitä, tarkistusta ja sitä, miten lomakkeet oikeasti lähetetään. Ei kehyksiä. Ei kirjastoja. Vain HTML ja periaatteet, joiden varaan kaikki muu on rakennettu.
HTML:n form-elementti
Lomake on HTML-elementti, joka kietoo lomakekentät sisäänsä ja lähettää niiden tiedot jonnekin. Perusrakenne on:
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Lähetä</button>
</form>
Kolmella attribuutilla on väliä. action-attribuutti kertoo lomakkeelle, minne tiedot lähetetään. "/submit" tarkoittaa lähetystä palvelimesi /submit-päätepisteeseen. Jos action on tyhjä, lomake lähetetään nykyiselle sivulle. method-attribuutti kertoo lomakkeelle, miten tiedot kulkevat. POST lähettää tiedot pyynnön rungossa (turvallinen, piilossa URL-osoitteesta). GET liittää tiedot URL-osoitteeseen (turvaton arkaluonteisille tiedoille, hyödyllinen hakukyselyille). enctype-attribuuttia tarvitaan vain tiedostojen latauksessa. Aseta enctype="multipart/form-data", kun lomakkeessasi on tiedostokenttä.
Kaikki form-tagien sisällä on osa lähetystä. Kun käyttäjä napsauttaa lähetyspainiketta, selain kerää kaikki nimetyt kentät ja lähettää ne action-URL-osoitteeseen määritetyllä metodilla.
Kenttätyypit ja mitä ne tekevät
text
<input type="text" name="first_name">
Yksirivinen tekstikenttä. Selain näyttää perustekstiruudun. Ei tarkistusta. Kaikki merkit sallitaan.
<input type="email" name="email">
Kenttä sähköpostiosoitteille. Tietokoneella se näyttää tekstikentältä. Mobiilissa selain näyttää sähköpostinäppäimistön. Lähetettäessä selain tarkistaa, että arvo näyttää sähköpostilta (sisältää @-merkin). Vain perustarkistus.
password
<input type="password" name="password">
Teksti, joka piilotetaan pisteiksi tai tähdiksi kirjoittaessasi. Arvo siirtyy silti selkotekstinä, joten käytä aina HTTPS:ää lomakkeissa, joissa on salasanakenttiä.
number
<input type="number" name="age">
Tietokoneella tekstikenttä, joka hyväksyy vain numeroita. Mobiilissa selain näyttää numeronäppäimistön. Selain estää ei-numeerisen syötteen.
date
<input type="date" name="birth_date">
Päivämäärävalitsin. Tuetuissa selaimissa ja laitteissa kentän napsautus avaa kalenterin. Arvo muotoillaan muotoon YYYY-MM-DD.
checkbox
<input type="checkbox" name="agree" value="yes">
Ruutu, joka kytkeytyy päälle ja pois. Jos se on valittu, kentän arvo lähetetään. Jos se ei ole valittu, kenttää ei lähetetä lainkaan.
radio
<input type="radio" name="plan" value="starter"> Starter
<input type="radio" name="plan" value="pro"> Pro
Useat samannimiset valintanapit toimivat ryhmänä. Vain yksi voidaan valita kerrallaan. Valitun arvo lähetetään.
select (pudotusvalikko)
<select name="country">
<option value="us">Yhdysvallat</option>
<option value="ca">Kanada</option>
</select>
Pudotusvalikko. Valitun vaihtoehdon arvo lähetetään.
textarea
<textarea name="message"></textarea>
Monirivinen tekstikenttä. Käyttäjät voivat kirjoittaa kappaleita. Arvo sisältää rivinvaihdot.
file
<input type="file" name="resume">
Painike, joka avaa laitteen tiedostovalitsimen. Valittu tiedosto lähetetään palvelimelle. Vaatii enctype="multipart/form-data" form-elementissä.
hidden
<input type="hidden" name="user_id" value="12345">
Kenttä, jota ei näytetä mutta joka lähetetään. Hyödyllinen seurantatiedoille, jotka pitää sisällyttää mutta joita käyttäjän ei pidä muuttaa.
Nimikkeet ja saavutettavuus
Yhdistä syöttökentät aina nimikkeisiin.
<label for="email">Sähköpostiosoite</label>
<input type="email" id="email" name="email">
Nimikkeen for-attribuutin pitää vastata kentän id:tä. Kun teet tämän oikein:
Ruudunlukijat ilmoittavat nimikkeen ja kentän yhdessä, nimikkeen napsautus kohdistaa syöttökentän ja mobiilikäyttäjät saavat suuremman kosketusalueen.
Älä koskaan jätä nimikkeitä pois. Jos nimike pitää piilottaa visuaalisesti, piilota se CSS:llä mutta pidä se HTML:ssä. Tätä kutsutaan "visuaalisesti piilotetuksi" nimikkeeksi.
Toisiinsa liittyvien kenttien ryhmittely
Toisiinsa liittyville kentille käytä fieldset- ja legend-elementtejä.
<fieldset>
<legend>Toimitusosoite</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
Legend-elementti ilmoittaa ryhmän ruudunlukijoille. Fieldsetit auttavat järjestämään valintanappeja ja valintaruutuja visuaalisesti ja rakenteellisesti.
Lomakkeen lähetys ja HTTP-metodit
Kun käyttäjä napsauttaa lähetyspainiketta, selain kerää kaikki nimetyt kentät, koodaa tiedot (oletuksena application/x-www-form-urlencoded), lähettää HTTP-pyynnön action-URL-osoitteeseen metodilla (POST tai GET) ja odottaa vastausta.
Palvelin vastaanottaa pyynnön ja voi käsitellä tiedot. Tiedot saapuvat avain-arvo-pareina. Jos lomakkeen metodi on POST ja action on "/submit", pyyntö näyttää seuraavalta. POST /submit HTTP/1.1, jossa Content-Type on application/x-www-form-urlencoded, ja tiedot näkyvät muodossa email=user@example.com&name=John.
Palvelin jäsentää nämä tiedot ja vastaa. Jos vastaus on sivu, selain lataa sen. Jos vastaus on uudelleenohjaus, selain siirtyy uuteen URL-osoitteeseen.
Asiakaspuolen tarkistus
HTML:ssä on sisäänrakennettuja tarkistusattribuutteja. Selain tarkistaa nämä ennen lomakkeen lähettämistä.
required
<input type="text" name="email" required>
Kentässä pitää olla arvo. Jos se jätetään tyhjäksi, lomaketta ei lähetetä ja selain näyttää virheen.
minlength ja maxlength
<input type="password" name="password" minlength="8" maxlength="128">
Arvon pitää olla annettujen merkkimäärien välillä.
min ja max
<input type="number" name="age" min="18" max="120">
Numerokentissä arvon pitää olla annetulla välillä.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Säännöllinen lauseke, jota arvon pitää vastata. Viisinumeroinen postinumero vastaa lauseketta [0-9]{5}.
Asiakaspuolen tarkistus on mukavuus käyttäjille. Se estää heitä lähettämästä virheellisiä tietoja ja näkemästä palvelimen virhettä. Älä kuitenkaan koskaan luota asiakaspuolen tarkistukseen tietoturvassa. Tarkista aina myös palvelimella.
Ero type="submit" ja type="button" välillä
<button type="submit">Lähetä</button>
<button type="button">Tallenna</button>
Painike, jonka type on "submit", lähettää lomakkeen napsautettaessa. Painike, jonka type on "button", ei tee oletuksena mitään. Käytä type="button", kun haluat liittää siihen JavaScript-tapahtumankäsittelijöitä.
Moni kehittäjä käyttää <button>-elementtiä määrittämättä tyyppiä. Oletuksena on type="submit", mikä on yleensä se, mitä haluat. Ole kuitenkin täsmällinen välttääksesi yllätyksiä.
Miksi HTML-lomakkeet kannattaa ymmärtää
Jos käytät Reactia, Vuea tai Angularia, rakennat HTML-lomakkeiden päälle. Kehykset kätkevät yksityiskohdat, mutta taustalla olevat periaatteet ovat samat. Lomake lähetetään yhä päätepisteeseen. Tarkistus pitää yhä tehdä. Palvelimen pitää yhä käsitellä tiedot.
Kun lomakkeen käsittelyssä menee jokin rikki, HTML:n ymmärtäminen auttaa virheenkorjauksessa. Tiedät, mistä tiedot tulevat, miten ne koodataan ja mitä palvelimen pitäisi vastaanottaa. Tämä on perusta.
Useimmat nykyaikaiset verkkosovellukset eivät enää käytä perinteistä lomakkeen lähetystä. Ne käyttävät JavaScriptiä lomakkeen sieppaamiseen, tarkistamiseen ja tietojen lähettämiseen fetchillä tai axiosilla. Mutta HTML-tavan tunteminen ensin saa nämä mallit tuntumaan järkeviltä.
Näin WEMASYn lomakerakentaja käyttää näitä periaatteita
Konepellin alla WEMASYn lomakerakentaja tuottaa saavutettavia HTML-lomakkeita samoilla elementeillä. Nimikkeet on yhdistetty kenttiin. Tarkistus hoidetaan sekä asiakas- että palvelinpuolella. Lomaketiedot lähetetään turvallisesti. Jos viet tai muokkaat WEMASY-lomaketta, työskentelet HTML-lomakkeiden kanssa, jotka on rakennettu näiden perusteiden varaan.
Katso lomakeominaisuuksien ja muokkausvaihtoehtojen tiedot WEMASYn hinnoittelusivulta.