HTML-lomakkeen luominen (esimerkkejä selitetty)

Lomakkeita käytetään keräämään käyttäjiltä tietoja, kuten yhteystietoja, tai sallimaan käyttäjien olla vuorovaikutuksessa verkkosivuston kanssa, kuten lähettää kommentteja tai tehdä hakuja. Tässä artikkelissa opimme luomaan peruslomakkeen HTML: n avulla.

HTML-lomakkeen rakenne

Tagin avulla luodaan HTML-lomake. Tässä tunnisteessa voi olla useita erilaisia ​​syöttöelementtejä, kuten tekstikenttiä, painikkeita, valintaruutuja, valintanappeja ja paljon muuta.

syöttöelementit menevät tähän

Syöttöelementit

Tekstikentät

Tekstikentät luodaan tagilla attribuutin kanssa tyyppi asetettu päälle teksti. Esimerkiksi:

Nimi:




Puhelin

Elementti käytetään puhelinnumeron syöttökentissä.

Puhelin:


Päivämäärä

Elementti käytetään päivämäärän valitsemiseen.

Syntymäpäivä:


Salasana

Elementti käytetään salasanan syöttökentissä. Tähän kenttään syötetty teksti näkyy pisteinä salasanan piilottamiseksi.

Salasana:


Arkisto

Elementti käytetään antamaan käyttäjälle mahdollisuus valita tiedosto paikallisesta tiedostojärjestelmästään.

Lataa tiedosto:


Valintaruutu

Elementti käytetään syöttökentille, joiden avulla käyttäjä voi valita ei mitään, yhden tai useita vaihtoehtoja.

Hyväksyn käyttöehdot

Radio

Elementti käytetään syöttökentille, joiden avulla käyttäjä voi valita yhden vaihtoehdon joukosta.

Sukupuoli:

Mies

Naiset

Määrä

Elementti käytetään numeerisissa syöttökentissä.

Määrä:


Alue

Elementti käytetään syöttökentille, joiden on sisällettävä arvo arvoalueelta.

Äänenvoimakkuus:




Painikkeet

Painikkeet luodaan tagilla attribuutin kanssa tyyppi asetettu päälle Lähetä. Kun tätä painiketta painetaan, lomaketiedot lähetetään. Esimerkiksi:

Nimi:




Lomakkeen syötteen käsittely

Lähetä-painiketta painettaessa lomakkeen tiedot lähetetään käsiteltäväksi. Tämä tehdään jommallakummalla kahdesta menetelmästä: GET tai POST, jotka määritetään attribuutilla menetelmä Etiketissä .

GET-menetelmä

GET-menetelmä lähettää lomaketiedot osana URL-osoitetta. Se on hyödyllinen esimerkiksi hauissa, joissa lomaketiedot eivät ole arkaluonteisia. Tällä menetelmällä on kuitenkin rajoituksia lähetettävän tiedon pituuden suhteen.

syöttöelementit menevät tähän

POST-menetelmä

POST-menetelmä lähettää lomaketiedot erillään URL-osoitteesta. Tämä on turvallisempi ja pystyy käsittelemään paljon suurempia tietomääriä, joten sitä käytetään esimerkiksi yhteydenotto- tai kirjautumislomakkeiden lähettämiseen.

syöttöelementit menevät tähän

Molemmissa tapauksissa attribuutti toiminta käytetään määrittämään lomaketiedot käsittelevän palvelinpuolen komentosarjan URL-osoite.

HTML-lomakeesimerkki, jossa kaikki elementit 

Tässä on lomake, joka käyttää kaikkia tässä artikkelissa tarkasteltuja elementtejä:

Ilmoittautumislomake

Nimi:



Sukunimi:



Sähköposti:



Puhelin:



Syntymäpäivä:



Salasana:



Lataa tiedosto:



Hyväksyn käyttöehdot


Sukupuoli:

Mies

Naiset

Määrä:



Äänenvoimakkuus:




Tässä lomakkeessa on kentät etunimi, sukunimi, sähköpostiosoite, puhelin, syntymäaika, salasana, kenttä ladata a tiedosto, käyttöehtojen valintaruutu, radiot sukupuolen valitsemiseksi sekä numero- ja aluekentät määrälle ja äänenvoimakkuudelle, vastaavasti.

"Lähetä"-painike lopussa on se, joka vastaa lomakkeen lähettämisestä attribuutissa määritettyyn URL-osoitteeseen. toiminta Etiketistä muoto (tässä tapauksessa "/submit_form"). Jotta tämä lomake toimisi todellisella verkkosivustolla, sinulla on oltava palvelin, joka on määritetty vastaanottamaan ja käsittelemään tämän lomakkeen tiedot "/submit_form" -polulla.