Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Fundamentals of Form Creation in HTML:n perusteet | HTML-Lomakkeet ja Käyttäjän Syöte
HTML:n Perusteet

Fundamentals of Form Creation in HTML:n perusteet

Pyyhkäise näyttääksesi valikon

HTML:n <form>-elementti on keskeinen rakennuspalikka interaktiivisten lomakkeiden luomisessa verkkosivulle. Se toimii säiliönä kaikille lomake-elementeille. Tarkastellaan esimerkkiä peruslomakkeesta:

Note
Huomio

Kaikissa esimerkeissä on mukana onsubmit="return false" -attribuutti, joka estää lomakkeen oletusarvoisen lähetyskäyttäytymisen. Näin huomio pysyy lomakkeen luomisessa ja attribuuttien ymmärtämisessä.

index.html

index.html

form-attribuuttien selitys:

  • name tunnistaa lomakkeen sekä asiakkaalle että palvelimelle. Saa sisältää kirjaimia, numeroita, alaviivoja ja tavuviivoja, mutta ei välilyöntejä;
  • autocomplete määrittää, voiko selain täyttää lomakekentät automaattisesti (on tai off). Voidaan käyttää koko lomakkeessa tai yksittäisissä kentissä;
  • novalidate poistaa selaimen sisäänrakennetun validoinnin käytöstä, hyödyllinen kun validointi tehdään manuaalisesti JavaScriptillä.

Lomakkeen lapsielementtien yleiskatsaus

<form>-elementin sisällä käytetään erilaisia elementtejä, jotka määrittävät sen toiminnallisuuden. <input> mahdollistaa käyttäjän syöttää tietoja, kuten tekstiä, numeroita, sähköpostiosoitteita ja salasanoja. Esimerkissä kentissä käytetään type="email" ja type="password". <label> antaa kuvailevan tekstin syötekentille ja parantaa lomakkeen rakennetta sekä saavutettavuutta. <button type="submit"> lähettää lomakkeen tiedot. Oletuksena tämä lataa sivun uudelleen, mutta toimintaa voi muuttaa JavaScriptillä.

question mark

Mitä HTML-elementtiä käytetään lomakkeen lähetyspainikkeen luomiseen?

Valitse oikea vastaus

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 23

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Osio 1. Luku 23
some-alt