Kako ustvariti obrazec v HTML

Kako ustvariti obrazec v HTML

Zbiranje podatkov od uporabnika spletnega mesta je mogoče na več različnih načinov. Obrazci na spletnih mestih imajo lahko preprosto funkcijo, kot je naročanje uporabnika na glasilo, ali bolj zapleten namen, kot je obrazec za prijavo na delo.





Vseeno pa je vsem tem preprostim do zapletenim oblikam skupno HTML in natančneje HTML oznaka.



Uporaba oznake obrazca

The tag je element HTML, ki se uporablja kot vsebnik za zajemanje drugih elementov, ki jih lahko obravnavamo kot gradnike obrazcev. Nekateri od teh temeljnih elementov vključujejo oznaka, oznako in oznaka.





The Oznaka ima pomemben atribut, ki prispeva k njeni funkcionalnosti. Ta atribut se imenuje dejanje in se uporablja za identifikacijo datoteke, v katero bodo posredovani podatki, vneseni v obrazec.

Uporaba primera oznake





Zgornji primer prikazuje, kako uporabiti oznako obrazca v svojih projektih. Eden od glavnih odlomkov je, da če odprete oznako obrazca, jo ne pozabite zapreti. To bo ustvarilo strukturo obrazca in tudi zagotovilo, da bodo podatki, vneseni v obrazec, pravilno obdelani.



Uporaba oznake

The tag se uporablja za opis podatkov v vsakem vnosnem polju v obliki. Ta oznaka ima za atribut, ki se uporablja za izboljšanje funkcionalnosti obrazca.

Povezano: Najboljši brezplačni spletni urejevalniki HTML za preizkušanje vaše kode



Če se id, ki je dodeljen ustreznemu polju za vnos, ujema z za vrednost v oznako, bo to polje za vnos samodejno označeno, ko kliknete na oznako.

Uporaba primera oznake


First Name:

V zgornjem primeru lahko vidite, da je za atributu je dodeljena vrednost fname . Če torej ustvarite polje za vnos z fname id, bo to polje označeno vsakič, ko kliknete na Najprej Ime nalepko.



Uporaba oznake

V svoji najosnovnejši obliki, oznako lahko vidite kot polje z besedilom. The oznaka zajema podatke od uporabnika, ena od njenih pomembnejših lastnosti pa je tip atribut. The tip Atribut označuje vrsto podatkov, ki jih lahko zbere to besedilno polje.

Povezano: Kako ustvariti zložen obrazec v CSS

Temu lahko dodelite več različnih vrednosti tip atribut, nekateri izmed bolj priljubljenih pa so naslednji.

  • Besedilo
  • Številka
  • E-naslov
  • Slika
  • Datum
  • Potrditveno polje
  • Radio
  • Geslo

Z uporabo oznake Primer


First Name:

The tag v zgornji kodi ima tri različne atribute, od katerih ima vsak edinstveno funkcijo. The tip atributu je dodeljena besedilna vrednost, kar pomeni, da bo besedilno polje sprejelo samo znake.

The id Atribut je edinstven identifikator za besedilno polje in je pomemben, ker omogoča dostop do tega elementa iz datoteke CSS. The ime atribut je tudi edinstven identifikator; vendar se atribut name uporablja za interakcijo z elementom na strežniški strani razvoja.

The id in ime atributom je običajno dodeljena enaka vrednost, saj ena omogoča dostop do elementa na strani odjemalca, druga pa na strani strežnika.

Uporaba elementa potrditvenega polja

Element potrditvenega polja je zelo edinstven v primerjavi z drugimi elementi, ki jih lahko uporabite z oznaka. Uporabniku omogoča izbiro ene ali več možnosti s seznama sorodnih možnosti. Potrditvena polja se zlahka prepoznajo, ker so predstavljena z majhnimi kvadratnimi polji, ki po izbiri vsebujejo kljukico.

Z uporabo primera elementa potrditvenega polja


Programming Languages:
Java
JavaScript
Python

V zgornjem primeru ima vsak element potrditvenega polja atribut vrednosti, kar je pomembno, ker pomaga razlikovati vsako možnost potrditvenega polja od zbirke. Če torej uporabnik med zgornjimi možnostmi izbere 'Java', bodo podatki to odražali.

Uporaba oznake in radijskih elementov

The oznaka in radijski elementi so si podobni v smislu, da uporabniku omogočajo samo izbiro posamezne vrednosti naenkrat; zato lahko rečemo, da imajo enako funkcijo. Vendar se po videzu zelo razlikujejo.

Radijski element je po videzu bližje elementu potrditvenega polja, pri radijskem elementu pa imate kroge namesto kvadratov.

The tag ustvari spustno polje, ki uporabniku omogoča izbiro posamezne vrednosti.

Z uporabo primera oznake in radijskega elementa


Sex:

Male
Female
Other


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

Uporaba elementa datuma

Element date ustvari majhno polje z besedilom, ki po kliku ustvari koledar. Uporaba datum kot vrsta vnosa v vaših obrazcih varuje uporabnika pred morebitnim vnosom napačnega datuma, kar lahko vodi do zbiranja napačnih podatkov.

Z uporabo primera elementa datuma


Uporaba elementa E -pošta in geslo

Ko razvijalec dodeli vrednosti e -pošte ali gesla atributu tipa datoteke oznako, vsaka ustvari isto besedilno polje. Ko pa začnete uporabljati te škatle, se razlike pokažejo.

Element e -pošte spremlja podatke, vnesene v besedilno polje, in zagotavlja, da vsaka predložitev ustreza standardnim zahtevam po e -poštnem naslovu; kar pomeni imeti lokalni del, ki mu sledi simbol @ in se konča z domeno.

Z uporabo primera elementa e -pošte


V zgornjem primeru ste spoznali nov atribut, imenovan rezervirano mesto in ta atribut prevzame besedilno vrednost, ki je v besedilnem polju prikazana zbledelo sivo. To besedilo se uporablja za označevanje podatkov, ki jih je treba vnesti v besedilno polje, kot je prikazano v zgornjem primeru.

Element gesla spremeni znake v zvezdice, ko se vnesejo v polje z besedilom. Če geslo, ki ste ga vnesli, ne vidijo, če je zaslon vašega računalnika viden.

Z uporabo primera elementa gesla


Uporaba oznake gumba

V obliki sta običajno dve različni vrsti gumbov. Prvi je gumb za predložitev, ki podatke, vnesene v obrazec, posreduje vrednosti, dodeljeni atributu dejanja (ki se nahaja v < obrazec> oznaka).

Primer gumba za oddajo

Submit

Druga vrsta gumba, ki se običajno uporablja v obrazcu, je gumb za ponastavitev, ki počisti podatke v obrazcu, tako da lahko uporabnik vnese sveže podatke. The oznaka ima a tip atribut, ki se uporablja za označevanje delovanja gumba. V zgornjem primeru tip atributu je dodeljena vrednost predloži , zato gumb, ki ima a tip vrednost ponastaviti se uporablja za ponastavitev obrazca.

Primer gumba za ponastavitev

Reset

Ustvarjanje obrazca

Če želite ustvariti preprost obrazec v HTML -ju, morate vse zgoraj omenjene elemente priložiti v datoteko a oznaka.

Ustvarjanje primera obrazca






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




Zgornja koda bo dala naslednjo obliko:

kako skupaj gledati film na spletu

Zdaj lahko ustvarite preprost obrazec v HTML

Ta članek vsebuje vsa orodja za ustvarjanje funkcionalnega obrazca HTML. Opredeljuje različne oznake HTML, ki se uporabljajo pri ustvarjanju obrazcev, in raziskuje različne atribute, ki jih je mogoče uporabiti s temi oznakami.

Vendar ima večina oblik, ki jih vidite na spletnih mestih, eno dodatno komponento; CSS, ki se uporablja za oživitev oblike in jo naredi bolj estetsko privlačno.

Deliti Deliti Cvrkutati E-naslov Osnovni list lastnosti CSS3 Lastnosti

Obvladajte bistveno sintakso CSS z našo listo lastnosti lastnosti CSS3.

Preberite Naprej Sorodne teme
  • Programiranje
  • HTML
  • Spletni razvoj
  • Kodiranje vadnic
O avtorju Kadeisha Kean(21 objavljenih člankov)

Kadeisha Kean je razvijalka programske opreme in tehnična/tehnološka pisateljica. Ima izrazito sposobnost poenostavitve nekaterih najbolj zapletenih tehnoloških konceptov; izdelavo materiala, ki ga lahko vsak tehnološki začetnik zlahka razume. Strastno piše, razvija zanimivo programsko opremo in potuje po svetu (skozi dokumentarne filme).

Več od Kadeisha Kean

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite