Home-theater-designers
Ang pagkolekta ng data mula sa isang gumagamit ng website ay maaaring gawin sa maraming iba't ibang paraan. Ang mga form sa mga website ay maaaring magkaroon ng isang simpleng pag-andar tulad ng pag-subscribe ng isang gumagamit sa isang newsletter, o isang mas kumplikadong layunin tulad ng pagkilos bilang isang form ng aplikasyon sa trabaho.
Gayunpaman, ang isang bagay na magkatulad ang lahat ng mga simple hanggang kumplikadong form na ito ay ang HTML at mas partikular ang HTML tag
Gamit ang Form Tag
Ang ang tag ay isang elemento ng HTML na ginagamit bilang isang lalagyan upang maipaloob ang iba pang mga elemento na maaaring maituring bilang mga bloke ng gusali para sa mga form. Ang ilan sa mga pangunahing sangkap na ito ay kasama ang tag, ang tag, at ang tag
Ang ang tag ay may isang mahalagang katangian na nag-aambag sa pagpapaandar nito. Ang katangiang ito ay tinatawag na aksyon at ginagamit upang makilala ang file kung saan ipapasa ang data sa form.
Gamit ang Halimbawa ng Tag
Ipinapakita ng halimbawa sa itaas kung paano gamitin ang form tag sa iyong mga proyekto. Ang isa sa mga pangunahing pagkuha ay kung magbubukas ka ng isang form tag dapat mong alalahanin upang isara ito. Lilikha ito ng isang istraktura ng form at tiyakin din na ang data na ipinasok sa form ay naproseso nang tama.
Gamit ang Tag
Ang ginagamit ang tag upang ilarawan ang data sa bawat input field sa isang form. Ang tag na ito ay mayroong para sa katangian, na ginagamit upang mapahusay ang pagpapaandar ng isang form.
Kaugnay: Ang Pinakamahusay na Libreng Mga Online Editor ng HTML upang Subukan ang Iyong Code
Kung ang id na nakatalaga sa kaukulang larangan ng pag-input ay tumutugma sa para sa halaga sa tag, pagkatapos na ang input na patlang ay awtomatikong ma-highlight kapag nag-click sa label.
Gamit ang Halimbawa ng Tag
First Name:
Sa halimbawa sa itaas maaari mong makita na ang para sa ang katangian ay naitalaga ang halaga fname . Samakatuwid, kung lumikha ka ng isang input na patlang sa fname id, ang patlang na ito ay mai-highlight sa tuwing mag-click sa Una Pangalan tatak
Gamit ang Tag
Sa pinaka-pangunahing anyo nito, ang ang tag ay makikita bilang isang text box. Ang nakukuha ng tag ang data mula sa gumagamit at ang isa sa mga pinakamahalagang tampok na ito ay ang uri katangian Ang uri ipinapahiwatig ng katangian ang uri ng data na maaaring kolektahin ng text box.
Kaugnay: Paano Lumikha ng isang Naka-stack na Form sa CSS
Mayroong maraming magkakaibang mga halaga na maaari mong italaga sa uri katangian, ngunit ang ilan sa mga mas tanyag ay ang mga sumusunod.
- Text
- Bilang
- Larawan
- Petsa
- Checkbox
- Radyo
- Password
Gamit ang halimbawa ng tag
First Name:
Ang ang tag sa code sa itaas ay may tatlong magkakaibang mga katangian na ang bawat isa ay may natatanging pagpapaandar. Ang uri ang katangian ay binigyan ng isang halaga ng teksto na nangangahulugang tatanggapin lamang ng text box ang mga character.
Ang id Ang katangian ay isang natatanging pagkakakilanlan para sa text box, at mahalaga ito sapagkat nagbibigay ito ng pag-access sa elementong ito mula sa isang CSS file. Ang pangalan ang katangian ay isang natatanging pagkakakilanlan din; gayunpaman, ang katangian ng pangalan ay ginagamit upang makipag-ugnay sa isang elemento mula sa panig ng server ng pag-unlad.
Ang id at pangalan mga katangian ay karaniwang itinalaga ng parehong halaga tulad ng isang nagbibigay ng access sa isang elemento mula sa client-side at ang iba pa mula sa server-side.
Gamit ang Elementong Checkbox
Ang elemento ng checkbox ay kakaiba sa paghahambing sa iba pang mga elemento na maaari mong gamitin sa tag Pinapayagan nito ang isang gumagamit na pumili ng isa o higit pang mga pagpipilian mula sa isang listahan ng mga nauugnay na pagpipilian. Madaling makilala ang mga checkbox dahil kinakatawan ng mga maliliit na kahon na parisukat na naglalaman ng isang tseke kapag napili.
Gamit ang Halimbawa ng Elemento ng Checkbox
Programming Languages:
Java
JavaScript
Python
Sa halimbawa sa itaas, ang bawat isa sa mga elemento ng checkbox ay may katangian na halaga, at mahalaga ito dahil nakakatulong itong makilala ang bawat pagpipilian sa checkbox mula sa koleksyon. Samakatuwid, kung pipiliin ng isang gumagamit ang 'Java' mula sa mga pagpipilian sa itaas, makikita ito ng data.
Gamit ang Tag at ang Mga Elemento sa Radyo
Ang ang tag at ang mga elemento ng radyo ay magkatulad sa kahulugan na pinapayagan lamang nila ang isang gumagamit na pumili ng isang solong halaga nang paisa-isa; samakatuwid, maaaring sabihin ng isa na mayroon silang parehong pag-andar. Gayunpaman, ibang-iba sila sa hitsura.
Ang elemento ng radyo ay mas malapit sa elemento ng checkbox sa hitsura, gayunpaman, kasama ang elemento ng radyo na mayroon kang mga lupon sa halip na mga parisukat.
Ang gumagawa ang tag kung ano ang mahalagang isang drop-down na kahon, na nagbibigay-daan sa isang gumagamit na pumili ng isang solong halaga.
Gamit ang Halimbawa ng Elemento ng Tag at Radyo
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Gamit ang Elementong Petsa
Gumagawa ang elemento ng petsa ng isang maliit na kahon ng teksto na bumubuo ng isang kalendaryo kapag na-click. Gamit petsa bilang isang uri ng pag-input sa iyong mga form na pag-iingat laban sa isang gumagamit na potensyal na pagpasok ng isang maling petsa, na maaaring humantong sa koleksyon ng maling data.
Paggamit ng Halimbawa ng Element ng Element
Gamit ang Elemento ng Email at Password
Kapag nagtatalaga ang isang developer ng alinman sa email o mga halaga ng password sa uri ng katangian ng isang tag, gumawa ang bawat isa ng magkatulad na kahon ng teksto. Gayunpaman, kapag sinimulan mong gamitin ang mga kahon na ito ay maliwanag ang mga pagkakaiba.
Sinusubaybayan ng elemento ng email ang data na ipinasok sa text box at tinitiyak na natutugunan ng bawat pagsusumite ang pamantayang kinakailangan ng isang email address; na nangangahulugang pagkakaroon ng isang lokal na bahagi, na sinusundan ng simbolo ng @, at nagtatapos sa isang domain.
Gamit ang Halimbawa ng Element ng Email
Sa halimbawa sa itaas ipinakilala ka sa isang bagong katangian na tinawag placeholder , at ang katangiang ito ay tumatagal ng isang halaga ng teksto na ipinapakita sa text box sa kupas na kulay-abo. Ginagamit ang tekstong ito upang ipahiwatig ang data na ilalagay sa text box tulad ng nakikita sa halimbawa sa itaas.
Ginagawa ng elemento ng password ang mga character sa mga asterisk habang inilalagay sila sa textbox. Samakatuwid, kung ang iyong computer screen ay nakikita ng ibang tao hindi nila makikita ang password na ipinasok mo.
Paggamit ng Halimbawa ng Elementong Password
Gamit ang Button Tag
Sa isang form, karaniwang may dalawang magkakaibang uri ng mga pindutan. Ang una ay ang pindutang isumite, na nagsusumite ng data na ipinasok sa form sa halagang itinalaga sa katangian ng pagkilos (na matatagpuan sa < form> tag)
Magsumite ng Halimbawang Halimbawa
Submit
Ang pangalawang uri ng pindutan na karaniwang ginagamit sa isang form ay isang pindutan ng pag-reset, na nililimas ang data sa isang form upang makapasok ang gumagamit ng sariwang data. Ang ang tag ay mayroong uri katangian, na ginagamit upang ipahiwatig ang pagpapaandar ng pindutan. Sa halimbawa sa itaas ang uri ang katangian ay italaga ang halaga ipasa , samakatuwid, isang pindutan na mayroong uri halaga ng i-reset ay ginagamit upang i-reset ang form.
I-reset ang Halimbawa ng Button
Reset
Lumilikha ng isang Form
Upang lumikha ng isang simpleng form sa HTML kakailanganin mong i-enclose ang lahat ng mga elemento na nabanggit sa itaas sa a tag
Lumilikha ng isang Halimbawa ng Form
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
Ang code sa itaas ay bubuo ng sumusunod na form:
kung paano baguhin ang dpi ng imahe
Ngayon Maaari kang Lumikha ng isang Simpleng Form sa HTML
Ang artikulong ito ay nagbibigay sa iyo ng lahat ng mga tool upang lumikha ng isang gumaganang form na HTML. Kinikilala nito ang iba't ibang mga HTML tag na ginagamit sa paglikha ng form at tuklasin ang iba't ibang mga katangian na maaaring magamit sa mga tag na ito.
Gayunpaman, ang karamihan sa mga form na nakikita mo sa mga website ay may isang karagdagang sangkap; CSS, na ginagamit upang mabuhay ang form at gawin itong mas kaaya-aya sa aesthetically.
Magbahagi Magbahagi Mag-tweet Email Ang Mahalagang CSS3 Properties Cheat SheetMahalaga ang CSS CSS syntax sa aming sheet ng cheat ng mga katangian ng CSS3.
Basahin Susunod Mga Kaugnay na Paksa- Programming
- HTML
- Pag-unlad sa Web
- Mga Tutorial sa Coding
Si Kadeisha Kean ay isang Full-Stack Software Developer at Teknikal / Teknikal na Manunulat. Siya ay may natatanging kakayahan na gawing simple ang ilan sa mga pinaka kumplikadong teknolohikal na konsepto; paggawa ng materyal na madaling maunawaan ng anumang baguhan sa teknolohiya. Siya ay madamdamin tungkol sa pagsusulat, pagbuo ng mga kagiliw-giliw na software, at paglalakbay sa buong mundo (sa pamamagitan ng mga dokumentaryo).
Higit pa Mula kay Kadeisha KeanMag-subscribe sa aming newsletter
Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe