Kuidas HTML -is vormi luua

Kuidas HTML -is vormi luua

Andmeid saab veebisaidi kasutajalt koguda mitmel erineval viisil. Veebisaitidel olevatel vormidel võib olla lihtne funktsioon, näiteks kasutaja uudiskirja tellimine, või keerulisem eesmärk, näiteks tööavalduse vorm.





Kuid üks asi, mis kõigil neil lihtsatel ja keerulistel vormidel on ühine, on HTML ja täpsemalt HTML silt.



Vormimärgi kasutamine

The silt on HTML -element, mida kasutatakse konteinerina muude elementide kaasamiseks, mida võib pidada vormide ehitusplokkideks. Mõned neist põhielementidest hõlmavad silt, silt ja silt.





The sildil on oluline atribuut, mis aitab kaasa selle funktsionaalsusele. Seda atribuuti nimetatakse toiminguks ja seda kasutatakse faili tuvastamiseks, kuhu vormi sisestatud andmed edastatakse.

Sildinäite kasutamine





Ülaltoodud näide näitab, kuidas kasutada vormisilti oma projektides. Üks peamisi võtteid on see, et kui avate vormimärgendi, peaksite selle sulgema. See loob vormi struktuuri ja tagab ka vormi sisestatud andmete õige töötlemise.



Sildi kasutamine

The märgendit kasutatakse vormis iga sisendvälja andmete kirjeldamiseks. Sellel sildil on eest atribuut, mida kasutatakse vormi funktsionaalsuse täiustamiseks.

Seotud: Parimad tasuta veebipõhised HTML -redaktorid koodi testimiseks



Kui vastavale sisestusväljale määratud ID vastab eest väärtus märgend, siis on see sisestusväli sildil klõpsates automaatselt esile tõstetud.

Sildinäite kasutamine


First Name:

Ülaltoodud näites näete, et eest atribuudile omistatakse väärtus f nimi . Seega, kui loote sisestusvälja nupuga f nimi id, see väli tõstetakse esile iga kord, kui klõpsate nupul Esiteks Nimi etikett.



Sildi kasutamine

Kõige põhilisemal kujul ,. märgendit võib näha tekstiväljana. The silt hõivab kasutaja andmed ja üks selle olulisemaid funktsioone on tüüpi atribuut. The tüüpi atribuut näitab seda tüüpi andmeid, mida see tekstivälja saab koguda.

Seotud: Kuidas luua virnastatud vormi CSS -is

Sellele saab määrata mitu erinevat väärtust tüüpi atribuut, kuid mõned populaarsemad on järgmised.

  • Tekst
  • Number
  • E -post
  • Pilt
  • Kuupäev
  • Märkeruut
  • Raadio
  • Parool

Sildi kasutamine Näide


First Name:

The ülalolevas koodis oleval sildil on kolm erinevat atribuuti, millest igaühel on ainulaadne funktsioon. The tüüpi atribuudile on määratud tekstiväärtus, mis tähendab, et tekstikasti saab vastu võtta ainult märke.

The id atribuut on tekstivälja kordumatu identifikaator ja see on oluline, kuna see annab sellele elemendile juurdepääsu CSS -failist. The nimi atribuut on ka kordumatu identifikaator; atribuuti name kasutatakse aga arenduse serveripoolse elemendiga suhtlemiseks.

The id ja nimi atribuutidele omistatakse tavaliselt sama väärtus, kuna üks tagab kliendile ja teine ​​serveripoolsele elemendile juurdepääsu.

Märkeruudu elemendi kasutamine

Märkeruudu element on teiste elementidega võrreldes väga ainulaadne silt. See võimaldab kasutajal valida seotud valikute loendist ühe või mitu valikut. Märkeruudud on hõlpsasti tuvastatavad, kuna neid tähistavad väikesed ruudukujulised kastid, mis sisaldavad nende valimisel märget.

Märkeruudu elemendi näite kasutamine


Programming Languages:
Java
JavaScript
Python

Ülaltoodud näites on igal märkeruudu elemendil väärtusatribuut ja see on oluline, kuna see aitab eristada iga märkeruudu valikut kogust. Seega, kui kasutaja valib ülaltoodud valikutest „Java”, kajastavad andmed seda.

Sildi ja raadioelementide kasutamine

The silt ja raadioelemendid on selles mõttes sarnased, et võimaldavad kasutajal korraga valida ainult ühe väärtuse; seetõttu võib öelda, et neil on sama funktsioon. Siiski on nad välimuselt väga erinevad.

Raadioelement on välimuselt ruudukujulisele elemendile lähemal, kuid raadioelemendiga on ruutude asemel ringid.

The silt loob sisuliselt rippmenüü, mis võimaldab kasutajal valida ühe väärtuse.

Sildi ja raadioelemendi näite kasutamine


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

Kuupäeva elemendi kasutamine

Kuupäeva element loob väikese tekstikasti, mis genereerib klõpsamisel kalendri. Kasutades kuupäev teie vormide sisenditüübina kaitseb kasutaja eest, et ta võib sisestada vale kuupäeva, mis võib viia ekslike andmete kogumiseni.

Kuupäevaelemendi näite kasutamine


E -posti ja parooli elemendi kasutamine

Kui arendaja määrab tüübi atribuudile e -posti või parooli väärtused sildiga, toodavad nad igaüks identse tekstikasti. Kui aga hakkate neid lahtreid kasutama, ilmnevad erinevused.

E -posti element jälgib tekstikasti sisestatud andmeid ja tagab, et iga esitus vastab e -posti aadressi standardnõudele; mis tähendab kohaliku osa olemasolu, millele järgneb @ sümbol ja mis lõpeb domeeniga.

E -posti elemendi näite kasutamine


Ülaltoodud näites tutvustatakse teile uut atribuuti nimega kohatäide , ja sellel atribuudil on tekstiväärtus, mis kuvatakse tekstikasti tuhmunud hallina. Seda teksti kasutatakse tekstikasti paigutatavate andmete tähistamiseks, nagu ülaltoodud näites näha.

Paroolielement muudab märgid tekstikasti sisestamisel tärnideks. Seega, kui teie arvutiekraan on teistele inimestele nähtav, ei näe nad teie sisestatud parooli.

Paroolielemendi näite kasutamine


Nupumärgi kasutamine

Vormil on tavaliselt kahte erinevat tüüpi nuppe. Esimene on nupp Esita, mis esitab vormile sisestatud andmed toiminguatribuudile (mis asub < vorm> silt).

Näide saatmisnupust

Submit

Teine vorminupp, mida tavaliselt vormis kasutatakse, on lähtestusnupp, mis kustutab vormil olevad andmed, et kasutaja saaks värskeid andmeid sisestada. The sildil on a tüüpi atribuut, mida kasutatakse nupu funktsiooni näitamiseks. Ülaltoodud näites tüüpi atribuut on väärtuse määramine Esita , seetõttu nupp, millel on a tüüpi väärtus lähtestada kasutatakse vormi lähtestamiseks.

Nulli lähtestamise näide

Reset

Vormi loomine

Lihtsa vormi loomiseks HTML -is peate lisama kõik eespool punktis a nimetatud elemendid silt.

Vormi näite loomine






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




Ülaltoodud kood annab järgmise vormi:

tasuta võrguühenduseta muusikarakendused androidile

Nüüd saate HTML -is luua lihtsa vormi

See artikkel pakub teile kõiki funktsionaalse HTML -vormi loomiseks vajalikke tööriistu. See tuvastab erinevad HTML -sildid, mida kasutatakse vormide loomisel, ja uurib erinevaid atribuute, mida saab nende siltidega kasutada.

Enamikul veebisaitidel nähtavatest vormidest on aga üks lisakomponent; CSS, mida kasutatakse vormi elustamiseks ja esteetilisemaks muutmiseks.

Jaga Jaga Piiksuma E -post Oluliste CSS3 atribuutide petuleht

Õppige olulist CSS -i süntaksi meie CSS3 atribuutide petulehega.

Loe edasi Seotud teemad
  • Programmeerimine
  • HTML
  • Veebiarendus
  • Kodeerimise õpetused
Autori kohta Kadeisha Kean(Avaldatud 21 artiklit)

Kadeisha Kean on täispinu tarkvaraarendaja ja tehniline/tehnoloogiline kirjutaja. Tal on selge võime lihtsustada mõnda kõige keerukamat tehnoloogilist kontseptsiooni; materjali tootmine, millest igale tehnoloogia algajale on lihtne aru saada. Ta on kirglik kirjutamise, huvitava tarkvara arendamise ja maailmas reisimise vastu (dokumentaalfilmide kaudu).

Veel Kadeisha Keanilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin