Tässä ohjeessa opit, miten luot ensimmäisen yksinkertaisen lomakkeen HTMLilla. Lomakkeet ovat olennainen osa verkkosovelluksia ja mahdollistavat käyttäjien syöttää tietoja ja lähettää ne palvelimelle. Tässä askel askeleelta etenevässä oppaassa opit perus HTML-lomakkeen rakenteen ja ymmärrät, miten eri elementit yhteistyössä siirtävät tietoja.
Tärkeimmät havainnot
- HTML-lomake määritellään <form>-tagilla.
- Attribuutit action ja method määrittävät, minne tiedot lähetetään ja mitä menetelmää käytetään.
- Lomakekentät määritellään yleensä <input>, <label> ja <button>-elementeillä.
- Tietoja voidaan lähettää palvelimelle joko GET- tai POST-menetelmällä.
Askel askeleelta ohje
1. Luoda HTML-pohja
Ensin tarvitset yksinkertaisen HTML-dokumentin pohjaksi. Varmista, että sinulla on perus HTML-dokumentin rakenne:
2. Lisää form-tagi
Seuraava askel on määritellä lomake. Lisää <form>-tagi ja tarvitset attribuutit action ja method. Tässä on yksinkertainen esimerkki, jossa action osoittaa URL:n, mihin tiedot lähetetään, ja method on asetettu GET:ksi tiedon lähettämiseksi URL:n kautta.
3. Luo label- ja Input-kenttä
Lomakkeessa haluat luoda nimetyn syöttökentän. Tätä varten käytät <label>-tagi nimikkeelle ja <input>-tagi itse syöttökentälle. Varmista, että labelin for-attribuutti vastaa syöttökentän id-attribuuttia.
4. Lisää Lähetä-painike
Lomakkeen tietojen lähettämiseen tarvitset painikkeen. Tämä toteutetaan <button>-tagilla, ja sen tulisi olla tyypiltään submit, jotta lomake lähetetään napsauttamalla.
5. Testaa lomake
Kun olet luonut lomakkeen, on aika testata se selaimessa. Syötä esimerkki syöttökenttään ja napsauta Lähetä-painiketta. Sinun tulisi nähdä, että lomaketta lähetettäessä syötetyt tiedot lähetetään URL:n kautta määritettyyn toimintoon.
6. Muuta syöttöattribuutteja
Nähdäksesi, miten syöttökentät muuttuvat, voit säätää <input>-tagin attribuutteja. Voit esimerkiksi muuttaa name-attribuuttia erottaaksesi välitetyt tiedot. Yksi esimerkki olisi muuttaa syöttökentän nimi name:sta first name:ksi.
7. Tietojen lähetys ja Pyyntötyyppi
Ennen kuin jatkat testausta, on tärkeää tietää, että GET-menetelmä lähettää tiedot URL:in kautta, kun taas POST lähettää tiedot HTTP-pyynnön rungossa. Voit muuttaa pyyntötyypin muuttamalla method-attribuutti <form>-tagissa.
8. Simuloi Palvelinreaktio
Koska sinulla tuskin on oikeaa palvelinta lomakkeen testaamiseen, voit muuttaa action-URLia simuloidaksesi toista HTML-sivua, johon käyttäjät ohjataan lomakkeen lähettämisen jälkeen. Luo uusi HTML-tiedosto, joka esimerkiksi sisältää kiitos-sivun.
9. Vianmääritys ja Testaus
Jos lomakkeen lähettämisessä ilmenee virheitä, tarkista selaimen Network-työkalut. Siellä näet, onko lomake lähetetty onnistuneesti ja mitä tietoja välitetään. Kiinnitä myös huomiota mahdollisiin 404-virheisiin, jotka osoittavat, että kohde-URL ei löytynyt.
10. Lopetus ja Tulevaisuudennäkymät
Nyt sinulla on perustavanlaatuinen ymmärrys HTML-lomakkeiden luomisesta. Voit laajentaa tätä tekniikkaa luodaksesi monimutkaisempia lomakkeita, jotka sisältävät erilaisia syöttölajeja ja validointeja. Seuraavassa oppitunnissa opit, miten reagoida lomakkeiden syötteisiin JavaScriptillä ja suorittaa asynkronisia tietojen siirtoja.
Yhteenveto
Tässä oppitunnissa olet oppinut ensimmäisen HTML-lomakkeesi rakenteen ja toiminnan. Nyt tiedät, miten luoda syöttökenttiä, tageja ja painikkeita sekä miten lähetetyt tiedot siirretään URL:ään tai POST-pyynnön ruumiiseen.
Usein kysytyt kysymykset
Mikä on ero GET:n ja POST:n välillä?GET lähettää tiedot URL:n kautta, kun taas POST lähettää tiedot pyynnön ruumiiseen.
Mitä minun täytyy määrittää action-attribuutissa?Toiminnassa määrität URL:n, johon lomaketiedot lähetetään.
Miten varmistan, että lomake toimii?Testaa lomake selaimessa ja tarkista lähetetyt tiedot verkon työkaluilla.
Miten luon useita syöttökenttiä yhteen lomakkeeseen?Lisää lisää -tageja ensimmäisen -tagin alle ja varmista, että jokaisella on ainutlaatuinen name-attribuutti.
Mitä tapahtuu lomakkeen lähettämisen jälkeen?Kun lähetetään GET-pyyntö, sivu latautuu uudelleen ja tiedot ilmestyvät URL-osoitteeseen. POST-pyynnön tapauksessa reaktio riippuu samasta palvelimesta.
