Üksikasjalik juhend HTML-vormingutega alustamiseks

HTML-vorm

Ülevaade

HTML-vormid on vajalikud siis, kui soovite koguda andmeid teie veebisaiti külastava inimese käest. Näiteks kui registreerite / logite sisse sellistesse rakendustesse nagu Uber, Netflix või Facebook, sisestate HTML-vormide kaudu teavet nagu Nimi, E-post ja Parool.

Nüüd õpime kõik vormi loomiseks vajalikud elemendid.

MÄRKUS. Olen juba lisanud stiili kasutades CSS-i ja nii näevad mu elemendid teistsugused välja, kuid need töötavad täpselt samal viisil.
Kui soovite muuta oma elemendid minu omadeks, leiate minu CSS-faili järgmistelt linkidelt:
Kohandatud CSS: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
Normaliseeri CSS:
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Vormi element

See on esimene element, mida me õpime. See element mähib kõiki teisi elemente, mis meie vormi sisse lähevad. See on vormi element.

Meie vorm ei esita andmeid kuhugi, kuna need pole serveriga ühendatud. Vormi ühendamiseks serveriga ja meie andmete töötlemiseks võime kasutada mis tahes serveripoolset keelt, näiteks Node, Python, Ruby või PHP. Andmete töötlemise osa hõlmab kahte olulist atribuuti, mis kinnitatakse vormi elemendi külge. Vaatame neid atribuute.

Atribuudid:

  1. toiming: toimingu atribuut on meie veebisaidi teavet töötleva programmi veebiaadress (URL).
  2. meetod: HTTP-meetodit kasutab brauser vormi esitamiseks, võimalikud väärtused on POST ja GET.
  • POST - andmed vormi põhiosast saadetakse serverisse.
  • GET - andmed saadetakse URL-i sisemusse ja parameetrid eraldatakse küsimärgiga.
Märkus. Teise vormi sees ei tohi olla vorme. See tähendab, et teises vormingus
ei saa olla elementi .

Sisestuselement

Sisendielement on kõige sagedamini kasutatav vormielement. Seda kasutatakse tekstivälja valmistamiseks, kuhu kasutaja saab sisestada teavet, näiteks e-posti, parooli jne.

Teeme tekstivälja, kuhu kasutaja saab oma nime kirjutada.

Märkus: sisestuselement on isesulguv silt, seega pole avagendi sobitamiseks vaja sulgemissilti sisestada.

Olen ülaltoodud sisendimärgendisse lisanud kolm atribuuti. Vaatame neid kõiki üksikasjalikult.

tüüp

Tüüptribuut näitab, millist sisendit me soovime. Kui anname tüübi atribuudile teksti väärtuse, siis peame siin silmas seda, et sisestusväljale sisenev väärtus on tüüpi tekst. Selle konkreetse atribuudi jaoks on palju võimalikke väärtusi. Mõned võimalikud väärtused on e-post, telefon telefoni ja parooli jaoks jne.

Näide. Kui logite sisse oma kontole (Amazon / Netflix), peate sisestama kaks asja: e-posti ja parooli. Seega kasutatakse antud juhul sisendit. Tüübi atribuut antakse vastavalt e-posti ja parooli väärtusega.

id

ID atribuut pole kohustuslik, kuid see on hea mõte lisada. Mõnel juhul on sellest abi elementide CSS / JavaScripti sihtimisel. ID atribuut on lisatud, et saaksime sildid konkreetsete vormi juhtelementidega seostada.

nimi

Nimi atribuut on vajalik. Kui vorm saadetakse serveripoolsele koodile, saab server vormi andmetest aru ja väärtusi vastavalt töödelda.

kohahoidja

See on lühike vihje, mis kuvatakse sisestusväljal enne, kui kasutaja sisestab väärtuse. Kui kasutaja hakkab sisestusväljale tippima, kaob kohahoidja.

Vaatame, millised näevad välja mõned muud põhilised sisestuselemendid.

Märkus. Tüüptribuudi erinevate väärtuste kasutamine annab erinevad tulemused. Näiteks võite sisestada e-posti aadressi, teksti või parooli jne. Kõigi nende käitumine on veidi erinev, nagu näete allpool.

Mitu sisestuselementi (tekst, e-post, parool)

Mitu sisestuselementi (tekst, e-post, parool)

Sisestuselemendid ilma kohatäiteta (vasakul) ja atribuudiga kohatäide (paremal)

Textarea element

Mõnikord ei piisa ühest tekstiridast ja lihtne sisestuselement ei toimi. Näiteks on mõnel veebisaidil kontaktvorm, mille abil inimesed saavad oma päringuid või sõnumeid tippida. Nendel juhtudel on kõige parem kasutada elementi textarea.

)

Atribuudid:

  • id: Sama, mida on mainitud elemendis .
  • nimi: Sama, mida on mainitud elemendis .
  • veerud: määrab tekstiala nähtava laiuse.
  • read: Määrab tekstialal nähtava ridade arvu.
Textarea element

Näete, et tekstiala võimaldab meil sisestada mitu rida. Kasutaja saab tekstireala muuta, näete ülaltoodud illustratsioonil, et ma suurendan tekstireala suurust.

Märkus: enamikus brauserites on tekstirearea element muudetav.

Nööbielement

Nupuelement on üks olulisemaid vormi elemente. Ilma nuputa ei saa serverisse töötlemiseks ühtegi vormi saata.

Nupuelement aktsepteerib atribuuti, mida nimetatakse tüübiks. See atribuut võtab vastu kolm väärtust esitamine, lähtestamine ja nupp.

Atribuudid:

  • type = ”lähtestamine”: klõpsamisel tühjendatakse kõik vormi andmed.
  • type = ”button”: sellel pole vaikekäitumist ja seda kasutatakse enamasti JavaScriptiga kohandatud käitumise programmeerimiseks.
  • type = ”Submit”: edastustüübi vaikekäitumine on, nagu nimigi viitab, vormi esitamine ja kogu teabe saatmine serverisse.
Nupp tüübi esitamiseks

Sildielement

Praegu on kasutajal võimatu öelda, milline vormikontroll mida teeb. Me ei saa kuidagi teada, kuhu meili sisestate ja kuhu parool sisestate. Vorm näeb välja väga puudulik ja räpane.

Saame sildistada iga vormikontrolli sildielemendi abil.

Enim kasutatud atribuudiga silt on.

Atribuudid:

  • for: atribuut for seostab sildi konkreetse vormielemendiga. See, kuidas see sobib, on ID järgi. Nagu näete ülaltoodud näites, on sisendielemendile antud ID-atribuudi väärtus e-post. Sildielemendile antud atribuudi väärtus on ka e-post, nii et mõlemad on omavahel seotud.
Märkus. Kui klõpsame sildil, suuname fookuse automaatselt sildiga seotud sisendväljale. See on vaikekäitumine.

Nüüd näeb meie vorm väga hea välja.

Valige Menüüd

Mõnikord ei soovi te vormi loomisel, et kasutaja saaks teksti sisestada. Pigem võiksite soovida, et nad valiksid mõne teie pakutud eelseatud valiku hulgast.

Kui teil on valikute loend, mis on pikem kui näiteks neli või viis asja, on parem minna valikumenüü juurde, kuna see säästab ruumi.

Ütleme nii, et meie vorm on suunatud üliõpilastele, kes otsivad ülikooli sisseastumist. Tahame lubada üliõpilastel valida eelnevalt määratletud ülikooliprogrammide hulgast.

Menüüelemendi valimiseks kasutatakse sildi .

- suvandielement tähistab ühte neist valikutest, mida kasutaja saab valitud menüüs valida. Element

Atribuudid:

  • väärtus: kui saadate vormi serveripoolsesse koodi, on igal vormielemendil tekstisisenditele ja tekstialadele vastav väärtus. See väärtus on mis iganes kasutaja väljale sisestab. Kuna loome neid eelmääratud valikuid, peame täpsustama, milline peaks väärtus selle esitamisel välja nägema. Niisiis, me kasutame väärtuse atribuuti, et täpsustada eelmääratud suvandite väärtused.
Valige Menüü

Nüüd on meil äsja loodud valitud menüüga silt Courses Select Courses. Nüüd saame oma nimekirja ka elemendi abil loogilistesse rühmadesse korraldada.

Atribuudid:

  • silt: suvandirühma nimi. Allpool toodud näites on meie valikute loend jagatud kahte rühma, millel on silt Engineering and Management.

Allpool toodud näites

Raadio nupud

Valitud menüüd on suurepärased, kui teil on palju võimalusi. Kui teil on midagi viiest või vähemast valikust, on parem kasutada raadionuppe.

Valiku menüü ja raadionupu erinevus on selles, et raadionupud näitavad kõiki valikuid korraga. Nagu valitud menüü, saab ka kasutaja valida ainult ühe neist.

Atribuudid:

  • nimi: Sama, mida on mainitud elemendis .
  • väärtus: kuna loome neid eelnevalt määratletud valikuid, peame täpsustama, milline peaks väärtus selle esitamisel välja nägema. Niisiis, me kasutame väärtuse atribuuti, et täpsustada eelmääratud suvandite väärtused.
Märkus. Kui valite ühe suvandi ja proovite valida teist, näete, et see tühistab eelmise valiku. See, et ta teab seda teha, on see, et meil on nimeatribuut täpselt sama. Nii et ta teab, et need kaks raadionuppu kuuluvad samasse rühma.
Märkus. Kui soovite, et raadionupud kuuluksid samasse raadionuppude rühma, peaks nimi olema sama.

Märkeruudud

Mõnikord võib teil olla rühm eelnevalt määratletud võimalusi. Soovite, et kasutaja saaks valida mitu võimalust, mitte ainult ühe neist. Seal on ruudud kasulikud.

Atribuudid:

  • nimi: Sama, mida on mainitud elemendis .
  • väärtus: kuna loome neid eelnevalt määratletud valikuid, peame täpsustama, milline peaks väärtus selle esitamisel välja nägema. Niisiis, me kasutame väärtuse atribuuti, et täpsustada eelmääratud suvandite väärtused.
  • märgitud: vaikimisi on märkeruudu sisend märkimata. Saate seada vaikeoleku olekuks kontrollitav, kasutades atribuuti nimega kontrollitud. Pidage meeles, et see on loogiline atribuut.

Allpool toodud näites olen kasutanud etiketti iga üksiku valiku jaoks. Olen ühendanud märkeruudu ja sildi, kasutades märkeruudu atribuudi etikett ja id atribuuti.

Märkus. Väikesel ruudul võib olla raske klõpsata. Element on soovitatav mähkida märkeruudu ümber. Kui klõpsame sildil, märgitakse või märgistatakse ka meie märkeruut. Ma pole seda allpool teinud, kuid saate seda teha, et UX paremaks muuta.

Erinevus ruutu ja raadionupu vahel

  1. Märkeruut võib eksisteerida eraldi, samal ajal kui raadionupud võivad ilmuda ainult rühmana (seal peaks olema vähemalt 2 raadionuppu).
  2. Märkeruudu märkimine on valikuline, kuid ühe raadionupu valimine on kohustuslik.

Täielik vorm

Oleme õppinud paljudest HTML-vorminguelementidest ja kajastanud olulisemad.

Ärge muretsege kõige meeldejätmise pärast. Peaaegu ükski professionaalne veebiarendaja ei saa igat atribuuti või elementi nimetada. Meeldejäämisest olulisem on õppida dokumentidest asju otsima, kui neid vaja on.

Võite proovida lisada oma CSS-i, et see vorm näeks välja selline, nagu soovite.

Vormide kohta saate lisateavet alloleval lingil

Loodetavasti leidsite selle postituse informatiivseks ja abistavaks. Sooviksin teie tagasisidet kuulda!

Aitäh, et lugesite!