Mis tüüpi vorme on html-is. Vormid HTML-is


HTML-i vormid on kõige keerulisemad, kuid teisest küljest võib-olla kõige rohkem huvitav teema HTML-is.

Veebivormid võimaldavad saidi külastajatel sisestada teatud teavet spetsiaalsetele väljadele ja arendaja saab selle talle sobival kujul.

Vormi näide oleks Külalisteraamat, küsimustik, online test. Vormid täidetakse veebilehel registreerumisel, veebipoes tellimuste esitamisel jne.

HTML-i abil saate luua vormiraamistiku: tekstiväljad, menüüd, loendid, nupud, märkeruudud ja raadionupud. See tähendab, need elemendid, mille abil sisestatakse vormi teatud teave.

Seejärel saadetakse vormi sisestatud andmed töötlemiseks serverisse. Kuid HTML on siin jõuetu – sellele lisatud programm või skript juba töötab vormi töötlemisel. Sellised programmid kirjutatakse tavaliselt sisse php keel või javascript.

Vormi atribuudid - silt

Ühel veebilehel võib olla mitu vormi ( nii palju kui arendaja vajab). Igaüks neist algab sildiga ja lõpeb lõpusildiga .

Atribuut action on kohustuslik iga vormi puhul – see määrab vormi teenindava faili aadressi ( töötleb sinna sisestatud andmeid).

Atribuut meetod määrab, kuidas vormi sisu esitatakse. On kaks meetodit - GET ja POST. Nüüd pole mõtet nendesse parameetritesse süveneda, kuna teabe saatmise teema GET meetodid ja POST viitab andmetöötluskeeltele ( näiteks PHP). Piisab, kui teada, mis täpselt ülekandemeetod on POST-andmed enamasti kasutatakse seda vormides.

Sildi nime atribuut

on valikuline. Aga kui dokumendis on mitu vormi, siis peab töötleja igaüks neist kuidagi tuvastama. Seetõttu on atribuudi nimi olemasolu antud juhul vajalik - see määrab vormi kordumatu nime.

Samuti saate määrata sisendandmete kodeeringu - selle eest vastutab atribuut accept-charset ja ka sihtmärgi atribuut, määrake aken, milles kuvatakse esitatud vormi töötlemise tulemus ( uues või praeguses aknas).

Aga silt ise pole mõtet, sest vorm edastab andmed, mis tuleb kõigepealt kuhugi sisestada!

Andmete sisestamine. Vormi väljad – silt

Tag See on vormides kõige levinum silt. See on loodud loomiseks erinevaid elemente, mida kasutatakse andmete sisestamiseks vormi: need on tekstiväljad, nupud, märkeruudud, raadionupud.

tüüp on sildi peamine atribuut . See määrab välja tüübi ( element) vormid:

Atribuudi väärtuse tüüp="..."

Tulemus

Kirjeldus

Üherealine tekstiväli teksti sisestamiseks. Atribuut size määrab välja laiuse tähemärkides.

Tekstiväli parooli sisestamiseks.
Atribuudi maxlength komplektid maksimaalne summa märgid, mida saab sisestada

1 2 3

Lüliti.
Pakutavatest valikutest saate valida ainult ühe. Kontrollitud atribuut määrab eelnevalt kontrollitud välja.

1 2 3

Märkeruut.
Valida on mitme valiku vahel. Atribuut checked määrab eelnevalt kontrollitud välja.

Nupp.
Väärtuse atribuut määrab nupu sildi.

Reset-nupp.
Tagastab vormiväljad nende algsel kujul. Sisestatud andmete lähtestamine.

Nupp sisestatud andmete saatmiseks.

Väli saadetava faili nime sisestamiseks.

Nupp-pilt.
Seda kasutatakse ka andmete saatmiseks serverisse. Atribuut src määrab pildifaili aadressi.

Peidetud väli – kasutajale nähtamatu.

Rippmenüü – sildid sama mis silt kasutatakse teabe kogumiseks - see loob loendi, millest saab valida ühe või mitu elementi. Iga element vastab väärtusele, mis saadetakse töötlemiseks serverisse.

Vaade koostatav nimekiri sõltub atribuudi size väärtusest: koos size= "1" ( vaikeväärtus) kuvatakse rippmenüü.

Atribuudi suurus erinev väärtus vastab kuvatavate loendiüksuste arvule. Näiteks suurus="3" korral on nähtavad kolm elementi. Teiste loendiüksuste vaatamiseks ( kui neid on) tuleks kasutada vertikaalne triip kerimine, mis lisatakse automaatselt.

Vaikimisi saab valida ainult ühe loendiüksuse. Mitme atribuudi lisamine märgendile ja loob iga loendiüksuse.

Sildi nime atribuudi kasutamine





7 maailmaimet!




Kardinaalne suund on üks neljast põhisuunast:

Loode Edela-Ida

7 maailmaimet!

Cheopsi püramiid Babüloni rippuvad aiad Zeusi kuju Olümpias Artemise tempel Efesose mausoleum Halikarnassuse koloss Rhodose koloss Aleksandria tuletorn

Mitmerealine tekstiväli – silt

Kui välja sisu ületab selle suuruse, ilmub liugur.

Näide vormi kasutamisest

Nüüd vaatame, kuidas vorm töötab.

Õppevideo tellimisvorm:


Sinu nimi: *



Sinu tellimus:



Valige meedium:


CD


DVD


USB-välklamp


Sinu email: *



Teie aadress: *





Vormid on loodud andmete saatmiseks kasutajalt veebiserverisse. HTML-i vormid võivad koosneda tekstiväljadest ja tekstialadest, märkeruutudest ja raadionuppudest ning ripploenditest. Kõik need on vormielemendid. Iga element annab saidile teatud tähenduse.
HTML-i vorm on sisuliselt veebileht, millel näete oma teabe sisestamise alasid. Pärast vormi täitmist ja klõpsamist Esita pakitakse vormi teave ja saadetakse veebiserverisse töötlemiseks serveripoolse skripti (käsitleja faili) abil. Pärast töötlemist tagastatakse teile vastusena veel üks veebileht. Järgmine joonis näitab selgelt, kuidas vorm töötab:

HTML-vormide loomises pole midagi keerulist. Lihtsaim viis vormidest aimu saamiseks on sõeluda veidi HTML-koodi ja seejärel vaadata, kuidas see töötab. Järgmine näide näitab lihtsa HTML-vormi loomise süntaksit:

Näide: lihtne HTML-vorm

  • Proovi ise"

Minu esimene vorm:
Nimi:
Perekonnanimi:



Lihtne vorm

Minu esimene vorm:
Nimi:
Perekonnanimi:




Element

Vormid sisestatakse veebilehtedele elemendi abil . See pakub konteinerit kogu vormi sisu, sealhulgas selliste elementide jaoks nagu tekstiväljad ja nupud, aga ka kõik muud HTML-i sildid. Kuid see ei saa sisaldada muud elementi .
Vormi serverisse saatmiseks kasutage nuppu “Esita”, sama tulemuse saad, kui vajutad vormi sees “Enter” klahvi. Kui vormil nuppu "Esita" ei ole, saab edastamiseks kasutada klahvi "Enter".
Enamik elementide atribuute mõjutada vormi töötlemist, mitte selle kujundust. Kõige levinumad neist on tegevust Ja meetod. Atribuut tegevust sisaldab URL-i, kuhu vormis olev teave serverisse töötlemiseks saadetakse. Atribuut meetod on HTTP-meetod, mida brauserid peavad vormiandmete esitamiseks kasutama.

Element

Peaaegu kõik vormiväljad luuakse elemendi abil (ingliskeelsest sisendist - sisend). Elemendi välimus muutuda sõltuvalt selle atribuudi väärtusest tüüp:

Siin on mõned atribuutide väärtused tüüp:

Teksti ja parooli sisestamine

Üks lihtsamaid vormielementide tüüpe on tekstiväli, mis on mõeldud teksti sisestamiseks ühele reale. See tekstisisestustüüp on vaikimisi määratud ja seetõttu kuvatakse see üherealine väli, kui unustate atribuudi määrata tüüp. Vormile üherealise tekstisisestusvälja lisamiseks peaksite olema elemendi sees registreeri atribuut tüüp tekstiväärtusega:

Parooli sisestusväli on tavalise tekstivälja tüüp. See toetab samu atribuute kui üherealine tekstiväli. Atribuut nimi määrab parooli sisestamise välja nime, mis saadetakse serverisse koos kasutaja sisestatud parooliga. Paroolivälja loomiseks peate määrama parooliatribuudi väärtusele tüüp(parool (inglise keeles) - parool):

Näide parooliväljaga vormi loomisest:

Näide: Parooliväli

  • Proovi ise"

Sinu sisselogimine:

Parool:




Sinu sisselogimine:

Parool:




Saate atribuuti kasutada koos selle atribuudiga max pikkus, mille väärtus määrab maksimaalse märkide arvu, mida antud stringi saab sisestada. Atribuudi abil saate määrata ka sisestusvälja pikkuse suurus. Vaikimisi piirab enamik brausereid tekstivälja laiuse 20 tähemärgini. Uute vormielementide laiuse reguleerimiseks atribuudi asemel suurus, soovitame kasutada CSS-i (Cascading Style Sheets).
Atribuut väärtus määrab väärtuse, mis kuvatakse vormi laadimisel vaikimisi tekstiväljal. Sisestades väljale vaikeväärtuse, saate kasutajale täpselt selgitada, milliseid andmeid ja millises vormingus soovite, et kasutaja siia sisestaks. See on nagu näidis, sest kasutajal on palju mugavam vormi täita, nähes enda ees näidet.

Lülitid (raadio)

Element tüüp raadio loob lülitid, mis kasutavad loogika "VÕI" põhimõtet, võimaldades valida mitmest väärtusest ainult ühe: kui valite ühe positsiooni, muutuvad kõik teised passiivseks. Lülituselemendi põhisüntaks on:

Atribuut nimi lülitite jaoks on vajalik ja mängib olulist rolli mitme lüliti elemendi ühendamisel rühmaks. Raadionuppude rühma ühendamiseks peate määrama sama atribuudi väärtuse nimi ja erinev atribuudi väärtus väärtus. Atribuut väärtus määrab valitud raadionupu väärtuse, mis saadetakse serverisse. Iga raadionupu elemendi väärtus peab olema grupis kordumatu, et server teaks, millise vastusevariandi kasutaja valis.
Atribuudi olemasolu kontrollitud(inglise keelest - installitud) näitab lüliti element, milline pakutud valikutest tuleks vajadusel lehe laadimisel vaikimisi valida. Seda atribuuti saab määrata ainult ühele raadionupu elemendile rühmast:

  • Proovi ise"

Kui vana sa oled?

  1. alla 18
  2. 18-24
  3. 25 kuni 35
  4. rohkem kui 35




Kui vana sa oled?

  1. alla 18
  2. 18-24
  3. 25 kuni 35
  4. rohkem kui 35



Märkeruudud

Element tüüp märkeruut loob märkeruudud, mis sarnanevad raadionuppudega, kuna need annavad kasutajale võimaluse valida teie pakutavate valikute hulgast. Peamine erinevus raadionuppudest seisneb selles, et külastaja saab valida korraga mitu valikut ning lippe endid tähistavad pigem ruudud kui ringid. Nagu raadionuppude puhul, luuakse märkeruutude rühm, määrates igale üksusele sama atribuudi väärtuse nimi aga igal märkeruudul on oma tähendus. Märkeruudu põhisüntaks on:

Atribuut kontrollitud, nagu ka raadionuppude puhul, määrab lehe laadimisel vaikimisi märkeruut. Selle atribuudi saab korraga määrata mitme rühma märkeruudu jaoks.
Järgmisel märkeruutude kasutamise näitel on mitu vaikevastuse valikut.

Näide: raadionuppude kasutamine

  • Proovi ise"
  1. Jazz
  2. Blues
  3. Rock
  4. Chanson
  5. Riik




Millised muusikažanrid sulle meeldivad?

  1. Jazz
  2. Blues
  3. Rock
  4. Chanson
  5. Riik



Kinnitus- (esita) ja tühjendus (lähtestus) nupud

Element tüüp Esita loob nupu, klõpsamisel saadab brauser selle serveri skriptile, et töödelda kasutaja poolt vormi sisestatud andmeid. Kui loome nupu, mis vormi tühjendab, siis omistame atribuudi tüüp"reset" väärtus. element tüüp Esita võib määrata valikulise atribuudi nimi. Atribuut väärtus kasutatakse selles elemendis nupul olevat silti tähistava teksti määramiseks. Vaikimisi on brauseritel nupule kirjutatud "Esita", kui te ei ole selle tekstiga rahul, sisestage see ise. Kuna kinnitusnuppude stiilid võivad erinevates brauserites erineda, on parem nupu stiil ise kohandada, kasutades CSS-i tööriistu või kasutada graafilisi nuppe.
Kinnitus- ja tühjendusnuppude loomine:

Näide: esitamise ja lähtestamise kasutamine

  • Proovi ise"

Nupul Lähtesta klõpsamine lähtestab kõik kasutaja sisestatud andmed.







tegevuse atribuut.

Peamine element

on atribuut tegevust, mis määrab vormi andmetöötleja. Andmetöötleja on fail, mis kirjeldab, mida vormiandmetega teha. Selle töötlemise tulemuseks on uus HTML-leht, mis tagastatakse brauserisse. Teisisõnu atribuudis tegevust määrab vormi töötlemiseks serveris oleva käitlejafaili (mõnikord nimetatakse seda skriptileheks) URL-i tee. Süntaks on järgmine:

…

Töötlemisfail asub serveris mytestserver.com kaustas nimekaust ja andmeid töötleva serveri skripti nimi - obrabotchik.php. Kõik andmed, mille sisestasite veebilehel olevale vormile, edastatakse talle. Laiend .php näitab, et määratud vormi töötleb PHP-s kirjutatud skript. Käsitleja ise võib olla kirjutatud mõnes teises keeles, näiteks võib see olla skriptikeel Python, Ruby vms.
Soovitav on alati määrata atribuudi väärtus tegevust. Kui vorm peaks edastama väärtused samale lehele, kus see asub, sisestage tegevuse atribuudi väärtuseks tühi string: action="".

meetodi atribuut

Atribuut meetod määrab, kuidas teave serverisse edastatakse. Valitud vormi esitamisviis sõltub andmetest, mida soovite vormiga esitada. Nende andmete maht mängib siin suurt rolli. Kõige populaarsemad on kaks meetodit vormi lähteandmete edastamiseks brauserist serverisse. SAA Ja POSTITA. Meetodi saab määrata ükskõik millisele teie valitud meetodile ja kui te seda ei määra, kasutatakse vaikemeetodit SAA. Vaatleme nende igaühe kasutamist.

POST meetod

meetod POSTITA paketid moodustavad andmed ja saadavad need serverisse ilma, et kasutaja seda märkaks, kuna andmed sisalduvad kirja sisus. Veebibrauser meetodi kasutamisel POSTITA saadab serverile päringu, mis koosneb spetsiaalsetest päistest, millele järgnevad vormi andmed. Kuna selle päringu sisu on saadaval ainult serverile, on meetod POSTITA kasutatakse konfidentsiaalsete andmete (nt paroolid, pangakaardi andmed ja muu kasutajate isiklik teave) edastamiseks. meetod POSTITA sobib ka suurte teabemahtude saatmiseks, kuna erinevalt meetodist SAA, sellel pole edastatavate märkide arvule piiranguid.

GET meetod

Nagu te juba teate, on brauseri põhiülesanne serverist veebilehtede vastuvõtmine. Nii et kui kasutate meetodit SAA, laadib teie brauser lihtsalt veebilehe alla nagu alati. meetod SAA murrab ka vormiandmeid, kuid lisab need enne päringu serverisse saatmist URL-i lõppu. Et mõista, kuidas meetod töötab SAA, vaatame seda tegevuses. Avage selle õppetüki esimene näide (Näide: Lihtne HTML-vorm) Notepadis (näiteks Notepad++) ja tehke HTML-koodis väike muudatus:

need. asendada POSTITA peal SAA.
Salvestage fail nime all faili_nimi.html ja värskendage brauseri lehte (F5), seejärel täitke näiteks vorm Vasja Pupkin ja klõpsake nuppu "Esita". Oma brauseri aadressiribal näete midagi sellist:

File_name.html?firstname=Vasya&lastname=Pupkin

Nüüd näete siinsamas URL-is iga vormielemendi nime ja väärtust.
URL eraldatakse ülejäänud vormiandmetest küsimärgiga ning muutujate nimed ja väärtused on eraldatud ampersandiga (&) .
Seda meetodit tuleks kasutada juhul, kui te ei edasta suuri teabekoguseid.
See meetod ei tööta, kui teie vormi andmed on tundlikud, nt pangakaardi numbri või parooli salvestamine.
Lisaks meetod SAA ei sobi, kui soovite koos vormiga failid serverisse saata.

Vormielementide rühmitamine

Tähenduselt seotud vormielemendid saab rühmitada siltide vahel

Ja
. Kuvatakse brauser
raami kujul ümber vormielementide rühma. Raami välimust saab muuta CSS (Cascading Style Sheets) abil.
Iga rühma pealkirja lisamiseks vajate elementi , mis määrab raami manustatava rühma pealkirja teksti.

Vormid võimaldavad kasutajatel teavet sisestada. Tõenäoliselt olete igasuguste testide, küsitluste ja küsitlustega kokku puutunud rohkem kui korra. Selleks, et seda kõike oma veebilehtedel teha, on vaja vorme.

Siinkohal tuleb märkida, et HTML-vormid ise võimaldavad sisestada ainult teavet, kuid HTML ei saa seda töödelda (on ju märgistuskeel, mitte programmeerimiskeel). Teabe töötlemiseks kasutatakse selliseid keeli nagu javascript, php ja teised.

Kuid kõigel on oma aeg, kuni õpime oma lehtedele html-vorme lisama ja teistes, näiteks javascriptile pühendatud tundides õpime, kuidas neist teavet töödelda.

Niisiis, html-is on vorm määratud siltidega . Kõik muud vormielemendid asuvad nende siltide vahel.

Sildi juures

parameetreid on mitu:

  • nimi- vormi nimi. Vajalik, kui lehel on mitu vormi
  • tegevust- määrab URL-i, kuhu kasutaja sisestatud teave saadetakse
  • meetod- määrab teabe saatmise meetodi
  • sihtmärk- määrab selle akna nime, milles kuvatakse esitatud vormi töötlemise tulemused
Praeguses etapis ei pea te nendesse parameetritesse liiga sügavalt süvenema, nende eesmärk saab selgeks, kui uurite andmetöötluskeeli. Praegu pidage meeles, et kõik vormielemendid asuvad siltide vahel
:

Tekstiväli

Lihtne üherealine tekstiväli, kuhu saate teksti sisestada ja muuta. Määratud sildi järgi

Tulemus:

Valikud:

  • nimi- elemendi nimi,
  • tüüp- elemendi tüüp (in sel juhul- tekst),
  • suurus- tekstivälja suurus tähemärkides, mis on korraga nähtavad, kui sisestate rohkem märke, need kerivad;
  • max pikkus- väljale sisestatavate märkide maksimaalne arv, kui jätate selle parameetri vahele, on märkide arv piiramatu;
  • väärtus- kuvatav tekst (selle parameetri puudumisel on väli tühi);
Võimalik on veel kaks võimalust:
  • puudega- blokeerib välja kõik muudatused,
  • Loe ainult- muudab välja kirjutuskaitstuks.
Näide:

Tulemus:

Tekstiväli parooli sisestamiseks

See on sama tekstiväli, mis eelmine element. Ainus erinevus seisneb selles, et selle asemel ei kuvata sisestatud teksti erimärke, nagu tärnid. Kõige sagedamini kasutatakse paroolide sisestamisel. Kõik parameetrid on samad, mis lihtsa tekstivälja puhul, välja arvatud parameeter type="parool".

Näide:

Sisestage parool:

Tulemus:

Sisestage parool:
Proovige sellele väljale midagi sisestada.

Märkeruudud

Olete kindlasti näinud midagi sellist:

Mis keeli sa räägid:
Inglise saksa keel hispaania keel prantsuse keel

See on seatud sama sildiga , mille üks märgend määrab ühe märkeruudu. Vaja on nelja märkeruutu, sisendit tuleb kirjutada neli korda.

Näide:

Mis keeli sa räägid:
Inglise saksa keel hispaania keel prantsuse keel

Vaatleme selle parameetreid:

  • tüüp- elemendi tüüp (antud juhul märkeruut),
  • nimi- elemendi nimi, näitab vormiprotsessorile, millise elemendi kasutaja on valinud,
  • väärtus- elemendi väärtus, näitab vormiprotsessorile kasutaja valitud elemendi väärtust. Meie näites on valitud ingliskeelne element, seetõttu saab töötleja programm: lan1="english",
  • kontrollitud- need märgivad tavaliselt kõige tõenäolisemad üksused, mida kasutaja saab hiireklõpsuga valida;

    Lülitid

    Erinevalt märkeruutudest saate valida ainult ühe üksuse. Sellega seoses parameetrite väärtused nimi peab olema kõigi rühma elementide jaoks sama. Parameeter type="raadio", kõik teised on samad, mis lippude puhul.

    Palun märkige oma sugu:
    meessoost naissoost

    Tulemus:

    Palun märkige oma sugu:
    meessoost naissoost

    Nupud

    Nuppe on nelja tüüpi:

    • Esita- nupp vormi sisu veebiserverisse saatmiseks. Selle parameetrid:
      • type="submit"- nupu tüüp,
      • nimi- nupu nimi,
      • väärtus- kiri nupul.
    • pilt- graafiline nupp vormi sisu veebiserverisse saatmiseks. Selle kasutamiseks peate ette valmistama nupupildi ja seejärel kasutama seda nupuna. Selle parameetrid:
      • type="image"- graafilise nupu tüüp,
      • nimi- nupu nimi,
      • src- nupu pildi aadress.
    • lähtestada- nupp, mis võimaldab taastada kõik vormi vaikeväärtused. Selle parameetrid:
      • type="reset"- selge nupu tüüp,
      • nimi- nupu nimi,
      • väärtus- kiri nupul.
    • nuppu- suvaline nupp, selle toimingud määrate teie, st. Ta ei tea, kuidas ise midagi teha. Selle parameetrid:
      • type="button"- kohandatud nupu tüüp,
      • nimi- nupu nimi,
      • väärtus- kiri nupul.
      • onclick- näitab, mida teha nupu klõpsamisel. Üldiselt on seda tüüpi nuppudel muid sündmusi (näiteks topeltklõps), kuid me ei võta neid siin arvesse.
    Kui vormil on mitu nuppu, peaks neil olema erinev nimi.

    Näidiskood:

    Tulemus:

    Nuppe saab määrata ka muul viisil, kasutades silte . Selliste nuppude võimalused on mõnevõrra laiemad. Sellel sildil on järgmised parameetrid:

    • tüüp- nupu tüüp, võib võtta väärtusi:
      • lähtestada- vormi tühjendamiseks nupp,
      • Esita- nupp andmete saatmiseks,
      • nuppu- suvalise toimingu nupp.
    • nimi- nupu nimi,
    • väärtus- kiri nupul.
    Näidiskood:
    Saada

    Tulemus:

    Saada
  • füüsiline- edastada nii ekraanil kui ka serverisse jõudmisel.
  • puudega- passiivne väli,
  • Loe ainult- on lubatud ainult lugemiseks.
    • Näide:

    Tulemus:

    Proovige teksti sisestada ja vaadake parameetrite väärtuste erinevust mähis.

    Rippmenüüde loendid

    Loendid võivad olla ühe üksuse või mitme valikuga. Märgiste kasutamine mõjutab mõlemat , mille sees asuvad sildi määratud väärtuste elemendid . Vaatame nende siltide parameetreid:

    • on elemendi sees

    SEOTUD ARTIKLID