HTML-lomakkeiden Rakentaminen
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 koodiesimerkeissä on attribuutti onsubmit="return false". Tämä attribuutti estää lomaketta lähettämästä pyyntöä palvelimelle oletuksena.
Lomakkeen luominen
<form>-tagia käytetään interaktiivisen lomakkeen luomiseen verkkosivulle. Se sisältää erilaisia lomake-elementtejä käyttäjän syötteitä varten.
Esimerkki:
<form>
<!-- Form elements go here -->
</form>
Lomake-elementit
HTML tarjoaa useita syöttötyyppejä käyttäjän tietojen keräämiseen. Jokaisella on omat attribuuttinsa ja toimintatapansa. Lisäksi voimme määrittää tunnisteen (label) jokaiselle syötteelle. Tunnisteet yhdistävät tekstin lomakekenttiin, mikä parantaa saavutettavuutta ja käytettävyyttä. Käsittelemme tunnisteita ja syötteitä tarkemmin seuraavissa luvuissa.
Esimerkki:
<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
Lomakkeen lähetys tapahtuu lähetyspainikkeella (<button type="submit">), joka voi välittää lomaketiedot palvelimelle käsiteltäväksi.
Esimerkki:
<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 peruslomakkeen esimerkki.
index.html
Videotutoriaali
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain more about the different types of form elements?
How do labels improve accessibility in forms?
What is the purpose of the reset button in a form?
Awesome!
Completion rate improved to 3.13HTML-lomakkeiden Rakentaminen
Pyyhkäise näyttääksesi valikon
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 koodiesimerkeissä on attribuutti onsubmit="return false". Tämä attribuutti estää lomaketta lähettämästä pyyntöä palvelimelle oletuksena.
Lomakkeen luominen
<form>-tagia käytetään interaktiivisen lomakkeen luomiseen verkkosivulle. Se sisältää erilaisia lomake-elementtejä käyttäjän syötteitä varten.
Esimerkki:
<form>
<!-- Form elements go here -->
</form>
Lomake-elementit
HTML tarjoaa useita syöttötyyppejä käyttäjän tietojen keräämiseen. Jokaisella on omat attribuuttinsa ja toimintatapansa. Lisäksi voimme määrittää tunnisteen (label) jokaiselle syötteelle. Tunnisteet yhdistävät tekstin lomakekenttiin, mikä parantaa saavutettavuutta ja käytettävyyttä. Käsittelemme tunnisteita ja syötteitä tarkemmin seuraavissa luvuissa.
Esimerkki:
<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
Lomakkeen lähetys tapahtuu lähetyspainikkeella (<button type="submit">), joka voi välittää lomaketiedot palvelimelle käsiteltäväksi.
Esimerkki:
<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 peruslomakkeen esimerkki.
index.html
Videotutoriaali
Kiitos palautteestasi!
