Vaiheittainen opas HTML-lomakkeiden käytön aloittamiseen

Yleiskatsaus

HTML-lomakkeita vaaditaan, kun haluat kerätä tietoja verkkosivustollasi vierailevalta henkilöltä. Esimerkiksi kun rekisteröidyt / kirjaudut sovelluksiin, kuten Uber, Netflix tai Facebook, syötät tietoja, kuten nimi , sähköposti ja salasana HTML- lomakkeiden kautta .

Nyt opimme kaikki tarvittavat elementit lomakkeen luomiseen.

HUOMAUTUS: Olen jo lisännyt muotoilun CSS: n avulla, joten elementtini näyttävät erilaisilta, mutta ne toimivat täsmälleen samalla tavalla.

Jos haluat tehdä elementeistäsi oman kaltaiseni, löydät CSS-tiedostoni alla olevista linkeistä:

Mukautettu CSS: //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

Normalisoi CSS:

//gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Lomakkeen elementti

Tämä on ensimmäinen osa, jonka opimme. Tämä elementti kietoo kaikki muut elementit, jotka menevät muotoomme sisälle. Tämä on muotoelementti.

Lomakkeemme ei lähetä tietoja mihinkään, koska se ei ole yhteydessä palvelimeen. Yhdistää lomake palvelimelle ja käsitellä tietoja voimme käyttää mitä tahansa palvelinpuolen kieltä, kuten Solmu, Python, Ruby tai PHP. Tietojen käsittelyyn liittyy kaksi tärkeää määritettä, jotka liitetään lomake-elementtiin. Katsotaanpa näitä ominaisuuksia.

Määritteet:

  1. action: Action-attribuutti on ohjelman verkko-osoite (URL), joka käsittelee lomakkeemme lähettämiä tietoja.
  2. menetelmä: Selain käyttää HTTP-menetelmää lomakkeen lähettämiseen, mahdolliset arvot ovat POST ja GET.
  • POST - Lomakkeen rungon tiedot lähetetään palvelimelle.
  • GET - Tiedot lähetetään URL-osoitteen sisään ja parametrit erotetaan kysymysmerkillä.
Huomautus: Et voi olla muotoja sisäkkäisiä sisällä toiseen muotoon . Tämä tarkoittaa, että sinulla ei voi olla elementti toisen elementin sisällä.

Syöttöelementti

Syöttöelementti on yleisimmin käytetty lomake-elementti. Sitä käytetään tekstikentän luomiseen, johon käyttäjä voi kirjoittaa joitain tietoja , kuten sähköposti , salasana jne.

Tehdään tekstikenttä, johon käyttäjä voi kirjoittaa nimensä.

Huomaa: Syöttöelementti on itsestään sulkeutuva tagi, joten avaavaa tunnistetta vastaavaa sulkutagia ei tarvitse kirjoittaa.

Olen lisännyt kolme määritettä yllä olevaan syöttötagiin. Katsotaanpa kutakin yksityiskohtaisesti.

tyyppi

Tyyppi määrite kertoo, millainen panos haluamme. Jos annamme arvon teksti on tyypin attribuutti, kuin mitä me tarkoitamme tässä on se, että arvo, joka me siirrymme syöttökenttään on tyyppiä teksti. Tälle määritteelle on monia mahdollisia arvoja. Joitakin mahdollisia arvoja ovat sähköposti, puhelinnumero ja salasana jne.

Esimerkki: Kun kirjaudut sisään mille tahansa tilillesi (Amazon / Netflix), sinun on annettava kaksi asiaa: sähköposti ja salasana . Joten tässä nimenomaisessa tapauksessa tulo elementtiä käytetään. Tyyppi määrite annetaan arvon kanssa sähköpostin ja salasanan vastaavasti.

id

ID-attribuutti ei ole pakollinen, mutta se on hyvä lisätä. Joissain tapauksissa tämä on hyödyllistä kohdistaessa elementtejä CSS: llä / JavaScriptillä. ID-attribuutti lisätään, jotta voimme yhdistää etiketit on erityinen lomake- .

nimi

Nimi-attribuutti on välttämätön. Kun lomake lähetetään palvelinpuolen koodiin, palvelin voi ymmärtää lomaketiedot ja käsitellä arvot asianmukaisesti.

paikanpitäjä

Se on lyhyt vihje, joka näkyy syöttökentässä ennen kuin käyttäjä syöttää arvon. Kun käyttäjä alkaa kirjoittaa syöttökenttään, paikkamerkki katoaa.

Katsotaanpa, miltä muutamat muut perussyöttöelementit näyttävät.

Huomautus: Käyttämällä eri arvoja varten tyypin attribuutti tuottaa erilaisia tuloksia. Voit esimerkiksi asettaa syötteen tyypiksi sähköposti, teksti tai salasana jne. Kaikilla heillä on hieman erilainen käyttäytyminen, jonka näet alla.

Useita syöttöelementtejä (teksti, sähköposti, salasana)

Useita syöttöelementtejä (teksti, sähköposti, salasana)

Textarea-elementti

Joskus yksi tekstirivi ei riitä eikä yksinkertainen syöttöelementti toimi. Joillakin verkkosivustoilla on esimerkiksi yhteydenottolomake, jolla ihmiset voivat kirjoittaa kyselyjään tai viestejään. Näissä tapauksissa on parasta käyttää textareaelementtiä.

ea> ei ole itsestään sulkeutuva tunniste, joten meidän on kirjoitettava sekä alku- että lopputunniste. ()

Määritteet:

  • id: Sama kuin yllä mainittiin elementissä.
  • nimi: Sama kuin yllä mainittiin elementissä.
  • cols: Määrittää tekstialueen näkyvän leveyden.
  • rivit: määrittää tekstialueella näkyvän rivien määrän.

Voit nähdä, että tekstialueen avulla voimme kirjoittaa useita rivejä. Käyttäjä voi muuttaa tekstialueen kokoa. Yllä olevasta kuvasta näet, että muutan tekstialueen kokoa.

Huomaa: Useimmissa selaimissa textarea- elementin kokoa voidaan muuttaa.

Painike-elementti

Painike-elementti on yksi tärkeimmistä lomake-elementeistä. Ilman painiketta ei voi lähettää mitään lomaketta palvelimelle käsittelyä varten.

Painike-elementti hyväksyy attribuutin nimeltä type. Tämä ominaisuus hyväksyy kolme lähetys- , nollaus- ja painike- arvoa .

Määritteet:

  • type = ”reset”: Se tyhjentää kaikki lomaketiedot, kun sitä napsautetaan.
  • type = ”button”: Sillä ei ole oletuskäyttäytymistä, ja sitä käytetään enimmäkseen JavaScriptin kanssa sen ohjelmoimiseksi mukautetuksi käytökseksi .
  • tyyppi =”lähetä”: Oletuksena käyttäytymistä väittävät tyyppi on, kuten nimikin kertoo, lähetä lomake ja lähettää kaikki datan palvelimelle.

Tarraelementti

Tällä hetkellä käyttäjän on mahdotonta kertoa, mikä lomakeohjaus tekee mitä. Ei ole mitään tapaa tietää, mihin kirjoitat sähköpostin ja mihin syötät salasanan. Lomake näyttää erittäin epätäydelliseltä ja sotkuiselta.

Voimme merkitä kukin lomakeohjauksistamme käyttämällä tarraelementtiä.

Eniten käytetty määreen etiketti on varten.

Määritteet:

  • varten: varten attribuutti liittää etiketti tietyn osan. Tapa, jolla se sopii, on henkilötodistuksen mukaan . Kuten yllä olevasta esimerkistä näet, syöttöelementille annetun ID- määritteen arvo on sähköposti. Tunniste-elementille annetun for- attribuutin arvo on myös sähköposti, joten molemmat ovat yhteydessä toisiinsa.
Huomaa: Kun napsautamme tarraa, kohdistus kohdistetaan automaattisesti tarraan liittyvään syöttökenttään. Tämä on oletuskäyttäytyminen.

Nyt muoto näyttää erittäin hyvältä?

Valitse valikot

Joskus, kun luot lomaketta, et halua käyttäjän pystyvän kirjoittamaan tekstiä. Saatat haluta heidän pikemminkin valitsevan joistakin esiasetetuista vaihtoehdoista .

Aina kun sinulla on luettelo vaihtoehdoista, jotka ovat pidempiä kuin esimerkiksi neljä tai viisi asiaa, on parasta mennä valintavalikkoon, koska se säästää tilaa.

Oletetaan, että lomake on suunnattu opiskelijoille, jotka hakevat pääsyä yliopistoon. Haluamme antaa opiskelijoille mahdollisuuden valita ennalta määritetystä luettelosta yliopisto-ohjelmista.

Valittu elementti tehdään avaamalla ja sulkemalla ct> -tunniste.

ct> - Valitse elementti renderöi pudotusvalikon n, joka sisältää valittavia vaihtoehtoja . Valittu elementti ei tee mitään itsestään. Tässä muodossa elementti itse asiassa on muita tekijöitä sen sisällä, juuri lik e

    ele ment tarpeisiin
  • elementtejä. Elementit laitamme sisälle valitse E lement kutsutaan vaihtoehto elementtejä.

    Määritteet:

    • nimi: Sama kuin yllä mainittiin elementissä.

    päällä> - Vaihtoehtoelementti edustaa yhtä vaihtoehdoista, jotka käyttäjä voi valita valintavalikossa . Olevaa & l t; vaihtoehto> elem ent käyttää attri bute c alled arvo.

    Määritteet:

    • arvo: Kun lähetät lomakkeen palvelinpuolen koodille, jokaisella lomake-elementillä on liitetty arvo tekstinsyöttöihin ja teksti-alueisiin. Tämä arvo on mitä käyttäjä kirjoittaa kenttään. Koska kuitenkin luomme näitä ennalta määritettyjä vaihtoehtoja, meidän on määritettävä, miltä arvon pitäisi näyttää, kun se lähetetään. Joten käytämme arvon määritettä arvot ennalta vaihtoehtoja.

    Nyt meillä on Valitse kurssit -etiketti juuri luomallasi valikkovalikossa. Nyt voimme myös järjestää luettelomme loogisiin ryhmiin ylös> elementti.

    Määritteet:

    • tunniste: Vaihtoehtoryhmän nimi. Alla olevassa esimerkissä vaihtoehtoluettelomme on jaettu kahteen ryhmään, joissa on tekniikan ja johtamisen tunniste.

    Alla olevassa esimerkissä

    Radiopainikkeet

    Valitse valikot ovat hyviä, jos sinulla on paljon vaihtoehtoja. Jos sinulla on jotain 5 tai vähemmän vaihtoehtoja, on parempi käyttää valintanappeja.

    Ero Valitse valikko ja radiopainike välillä on, että valintanäppäimet näyttävät kaikki vaihtoehdot kerralla. Kuten valikossa, käyttäjä voi valita vain yhden niistä.

    Määritteet:

    • nimi: Sama kuin yllä mainittiin elementissä.
    • arvo: Koska luomme näitä ennalta määritettyjä vaihtoehtoja, meidän on määritettävä, miltä arvon pitäisi näyttää, kun se lähetetään. Joten käytämme arvon määritettä arvot ennalta vaihtoehtoja.
    Huomaa: Jos valitset yhden vaihtoehdon ja yrität sitten valita toisen vaihtoehdon, huomaat, että se poistaa edellisen vaihtoehdon valinnan. Tapa, jolla se tietää sen, johtuu siitä, että meillä on nimen attribuutti täsmälleen sama. Joten se tietää, että nämä kaksi radiopainiketta ovat osa samaa ryhmää. Huomaa: Nimen on oltava sama, jos haluamme, että valintanapit ovat osa samaa valintanappiryhmää.

    Valintaruudut

    Joskus sinulla voi olla joukko ennalta määritettyjä vaihtoehtoja. Haluat, että käyttäjä voi valita useita vaihtoehtoja eikä vain yhtä niistä. Siellä valintaruudut ovat hyödyllisiä.

    Määritteet:

    • nimi: Sama kuin yllä mainittiin elementissä.
    • arvo: Koska luomme näitä ennalta määritettyjä vaihtoehtoja, meidän on määritettävä, miltä arvon pitäisi näyttää, kun se lähetetään. Joten käytämme arvon määritettä arvot ennalta vaihtoehtoja.
    • valittu: Oletusarvoisesti valintaruudun syötettä ei ole valittu. Voit asettaa oletustilan tarkistettavaksi käyttämällä tarkistettua attribuuttia . Muista, että tämä on looginen attribuutti.

    Alla olevassa esimerkissä olen käyttänyt etikettiä jokaiselle yksittäiselle vaihtoehdolle. Olen liittänyt valintaruutu ja etiketti käyttäen varten ominaisuus etiketin ja id attribuutti valintaruutu .

    Huomaa: Pienen valintaruudun napsauttaminen voi olla vaikeaa. On suositeltavaa kiertää elementti valintaruudun ympärille. Jos napsautamme tarraa, myös valintaruutumme tarkistetaan tai sitä ei valita. En ole tehnyt sitä alla, mutta voit tehdä sen UX b etterin luomiseksi.

    Ero valintaruudun ja radiopainikkeen välillä

    1. Valintaruutu voi olla olemassa yksinään , kun taas valintanapit voivat näkyä vain ryhmänä (vähintään 2 valintanappia pitäisi olla siellä).
    2. Valintaruudun valinta on valinnainen, mutta valintanapin valinta on pakollinen .

    Täydellinen lomake

    Olemme oppineet monista HTML-muotoelementeistä ja käsittäneet olennaiset.

    Älä huoli kaiken muistamisesta. Lähes yksikään ammattimainen web-kehittäjä ei voi nimetä kaikkia ominaisuuksia tai elementtejä. Muistiinpano on tärkeämpää on oppia etsimään asioita dokumentaatiosta, kun tarvitset niitä.

    Voit yrittää lisätä oman CSS: n, jotta tämä lomake näyttää haluamallasi tavalla.

    Voit oppia lisää lomakkeista alla olevasta linkistä

    HTML-lomakkeet

    Tämä moduuli tarjoaa sarjan artikkeleita, jotka auttavat hallitsemaan HTML-lomakkeita. HTML-lomakkeet ovat erittäin tehokas työkalu… developer.mozilla.org

    Toivottavasti olet löytänyt tämän viestin informatiivisena ja hyödyllisenä. Haluaisin kuulla palautteesi!

    Kiitos, että luit!