Ditë të mbarë, adhurues të zhvillimit të uebit dhe ata që duan të krijojnë uebsajtin e tyre. Para kësaj, të gjitha botimet e mia iu kushtuan elementeve kryesore të gjuhës, si të krijohen objekte të ndryshme të përmbajtjes, formatimi, strukturimi i tyre, etj. Pasi të keni zotëruar temat e mëparshme, tashmë mund të krijoni një sit mjaft të mirë. Megjithatë, do të ishte e paplotë pa temën e sotme: "Krijimi i formularëve në html".
Kjo pjesë e gjuhës është shumë e rëndësishme. Pra, merrni atë për të studiuar Vëmendje e veçantë, përndryshe burimi i uebit që keni krijuar nuk do të lëshohet në prodhim. Kështu, pasi të keni lexuar artikullin, do të dini se për cilat forma duhet të përdoren, me çfarë etiketash janë krijuar dhe gjithashtu do të keni mundësi të provoni shembuj konkretë në praktikë. Le të fillojmë!
Çfarë është forma dhe si funksionon
Forma- ky është një nga objektet më të rëndësishme, i cili është krijuar për të shkëmbyer të dhëna informacioni midis serverit dhe përdoruesit.
E thënë thjesht, nëse dëshironi të krijoni një dyqan online me aftësinë për të porositur produkte në faqe, të kërkoni regjistrimin në një burim në internet dhe të punoni me llogari, ose t'u ofroni klientëve reagime nga menaxherët e kompanisë, atëherë nuk mund të bëni pa formularë.
Formulari është vendosur duke përdorur element i veçantë gjuha html .
Vini re se një dokument me kod mund të përmbajë disa deklarata etiketash , megjithatë, vetëm një kërkesë mund t'i dërgohet serverit për përpunim të të dhënave. Kjo është arsyeja pse informacioni që përdoruesi fut në fushat e rezervuara për këtë dhe i referohet formave të ndryshme nuk duhet të jetë i varur. Gjithashtu, nuk lejohet foleja e formave brenda njëra-tjetrës.
Për ata që janë të padurueshëm dhe të etur për të hedhur një vështrim të shpejtë në pamjen e kodit, unë kam bashkangjitur një shembull të thjeshtë të përdorimit të një paneli me një fushë teksti fjalëkalimi me një buton:
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
Ndoshta tani nuk është shumë e qartë se çfarë dhe si ndërvepron në këtë program i vogël, por ju garantoj që pasi të keni lexuar të gjithë artikullin, do të keni mundësi të krijoni aplikacione shumë herë më të vështira.
Dërgimi i të dhënave në anën e serverit
Për të dërguar informacionin e shtypur (ose të zgjedhur) në kutinë e dialogut, duhet të përdorni mekanizmin standard - Butoni i dorëzimit.
Kodi për këtë metodë duket si ky:
Kur ekzekutoni rreshtin e paraqitur, do të shfaqet një buton me mbishkrimin: "Dërgo".
Një mënyrë tjetër për të dërguar të dhëna në anën e serverit është të shtypni tastin Enter brenda kutisë së dialogut.
Pas konfirmimit të dërgimit të informacionit të specifikuar, ai nuk dërgohet menjëherë në server. Së pari, ai përpunohet nga shfletuesi, duke çuar në formën "emri = vlera".
Parametri i atributit është përgjegjës për emrin lloji etiketë , dhe për vlerën - të dhënat e futura nga përdoruesi. Më pas, vargu i konvertuar i kalohet mbajtësit, i cili më së shpeshti vendoset në atribut veprim element .
Vetë parametri i veprimit nuk kërkohet, dhe në disa raste nuk nevojitet fare. Për shembull, nëse një faqe sajti është shkruar me duke përdorur php ose js, atëherë përpunimi bëhet më Faqja aktuale dhe lidhjet nuk janë të nevojshme.
Për të kuptuar më mirë të gjithë pamjen e funksionimit të faqes, do të doja të shtoja se në server, puna me të dhënat tashmë kryhet duke përdorur gjuhë të tjera. Kështu, gjuhët e serverëve janë: Python, php, gjuhë të ngjashme me C (C#, C, etj.), Java dhe të tjera.
Tani do të doja të ndalem dhe të flas më shumë për elementin . Nëse shpjegoni gjuhë e thjeshtë, pastaj nevojiten për të krijuar fusha teksti, butona radio, butona të ndryshëm, fusha të fshehura, kuti kontrolli dhe objekte të tjera.
Etiketa nuk duhet të çiftohet me të , megjithatë, nëse keni nevojë të përpunoni të dhënat e përdoruesve ose t'i futni ato, për shembull, në një bazë të dhënash, atëherë nuk mund të bëni pa një kontejner.
atributet kryesore elementi i dhënë Gjuhët e shënjimit të hipertekstit janë:
- Teksti- krijon një fushë teksti;
- Paraqisni– krijon një buton për dërgimin e të dhënave në server;
- Imazhi- përgjegjës për butonin me foto;
- rivendosur– vendos butonin për pastrimin e formularit;
- Fjalëkalimi– vendos një fushë teksti posaçërisht për fjalëkalimet;
- kutia e kontrollit– përgjegjës për fushat me flamuj;
- Radio– është përgjegjës për fushat me zgjedhje të një elementi;
- butonin- krijon një buton;
- I fshehur– përdoret për fusha të fshehura;
- dosje– vendos fushën përgjegjëse për dërgimin e skedarëve.
Metodat e transferimit të informacionit
Ka 2 mënyra për të kaluar të dhënat e përdoruesit në anën e serverit: Marr dhe postim. Këto metoda kryejnë të njëjtin veprim, por ato ndryshojnë ndjeshëm nga njëra-tjetra. Prandaj, para se të vëmë në dukje ndonjë prej tyre, le të njihemi me veçoritë e tyre.
| postim | Marr | |
| Madhësia e dokumenteve të transmetuara | I kufizuar në anën e serverit. | Maksimumi - 4 KB. |
| Si të shfaqni informacionin e dërguar | E disponueshme vetëm kur shikohet përmes shtesave të shfletuesit ose produkteve të tjera softuerike speciale. | Menjëherë në dispozicion për të gjithë. |
| Përdorimi i faqeshënuesve | Nuk ka opsion për të shënuar pasi kërkesat nuk përsëriten (të gjitha faqet lidhen me të njëjtën adresë). | Çdo faqe me një kërkesë mund të shënohet dhe të shkojë në të pas një kohe. |
| caching | I bazuar paragrafi i mëparshëm të gjitha kërkesat në një faqe. | Çdo faqe mund të ruhet veçmas. |
| qëllimi | Përdoret për përcjellje skedarë të mëdhenj(libra, imazhe, video, etj.), mesazhe, komente. | E shkëlqyeshme për kërkimin e vlerave të kërkuara në një burim në internet ose për dërgimin e mesazheve të shkurtra me tekst. |
Në mënyrë që të specifikoni se cila nga dy metodat e transferimit të të dhënave të funksionojë me shfletuesin, në elementin përdorni parametrin e dhënë metodë(Për shembull, metoda = "post").
Le të shqyrtojmë shembullin e dytë. Le të krijojmë një formular në të cilin duhet të futni të dhënat tuaja personale (emrin dhe mbiemrin, datën e lindjes) dhe të dilni me një fjalëkalim. Pas gjithë kësaj, dërgohet në server duke përdorur metodën postim.
Futni të dhënat tuaja personale!
Për shembull, për të futur një datë, ka çelësa për numrin e secilit prej parametrave (dita, muaji dhe viti), si dhe një panel zbritës me vetë kalendarin për lehtësi.
Krijimi i një paneli regjistrimi
Etiketat dhe atributet kryesore janë mbuluar. Kjo është arsyeja pse është koha për të krijuar një formular regjistrimi të plotë duke përdorur stilin shënimi css dhe vërtetimin e të dhënave hyrëse. Sigurisht shiko puna e serverit ne nuk do të kemi sukses me to, por dizajni dhe detaje të rëndësishme ne do të ofrojmë.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
Unë ju këshilloj të mbani kodi i dhënë programe në një dokument me shtrirje .html dhe kodim utf-8 dhe hapni këtë të fundit në një dritare të shfletuesit. Para se të paraqiteni në të gjithë lavdinë e tij paneli për regjistrim me fusha për futjen e emrit, mbiemrit, e-mail dhe fjalëkalimin me përsëritje. Vini re se kur fillon faqja, kursori pozicionohet menjëherë në fushën e parë të tekstit. Kjo teknikë arrihet përmes atributit fokusim automatik.
Të gjitha interaktive - fushat e hyrjes, kutitë e kontrollit, butonat e radios, listat rënëse, butonat - këto janë forma të internetit dhe elementët e tyre. Në formularin që lini një koment, përdorni formularin për t'u regjistruar, përdorni formularin për të autorizuar, përdorni formularin e kërkimit, votoni në sondazhe, ngarkoni skedarë, abonoheni - të gjitha këto i bëni duke përdorur formularët e internetit.
Organizimi i brendshëm
Në fakt, formulari përbëhet nga dy pjesë: dizajn vizual dhe një skript që përpunon të dhënat e futura. Për të shkruar një skenar, duhet të dini një nga gjuhët e programimit. Ne nuk po i studiojmë ato këtu, kështu që do të analizojmë komponentin HTML - mësojmë se si të krijojmë një ndërfaqe formulari, duke supozuar se diku tashmë kemi një skript që e përpunon atë.
Një formë HTML krijohet duke përdorur etiketë e çiftuar , brenda së cilës ndodhen etiketat e elementeve të tij.
etiketa
Para se të tregojmë shembuj, le të kalojmë nëpër etiketat.
. Krijon një formë. Nëse krahasojmë formën me tabelën, atëherë etiketën kryen të njëjtin rol si etiketa Ka atribute të tjera, por ato përdoren rrallë.
. Një etiketë interesante me të cilën mund të krijoni çdo element hyrës, cili është i specifikuar tip atribut. Në mënyrë të rreptë, kjo etiketë mund të përdoret edhe jashtë formularit, por atëherë nuk do të jeni në gjendje të specifikoni adresën e mbajtësit dhe elementi i faqes do të jetë jofunksional. Kuptimi Përshkrim Kutitë e kontrollit. Me ndihmën e tyre, ju mund të zgjidhni disa opsione në të njëjtën kohë. Butoni i përzgjedhjes së skedarit Fushë e fshehur, e padukshme në shfletues Butoni me një foto Fusha e fjalëkalimit. Fushë teksti i thjeshtë, por karakteret e futura janë të fshehura pas yjeve (*) Çelësat. Pothuajse si kutitë e kontrollit, por me ndihmën e tyre mund të zgjidhni vetëm një nga opsionet e propozuara Butoni për të rivendosur të dhënat e formularit në vlerat origjinale Butoni për të dërguar të dhëna në server. Zakonisht i shtypni ato për të konfirmuar hyrjen - Ruaj, Apliko, OK Fusha e tekstit Shumë vlera të reja janë shfaqur në HTML5, por fatkeqësisht ato janë mbështetur vetëm pjesërisht deri më tani (qershor 2016). Tani që të gjitha etiketat janë të njohura, le të krijojmë një formular të vogël autorizimi, të dhënat e të cilit përpunohen nga skedari skript.php, e vendosur në dosjen me faqen HTML. Kodi do të jetë i tillë.
Le të hedhim një vështrim në disa nga pjesët e tij. - krijoni një formë të përpunuar nga skedari script.php. Të dhënat transmetohen duke përdorur metodën GET. <
br>
- etiketë për të kaluar në rreshtin tjetër. <
hyrje emri="
identifikimi"
lloji="
teksti"
madhësia="25"
gjatesia maksimale="30"
vlerë"Michael">- krijoni një fushë teksti me emrin login me një gjerësi prej 25 karakteresh. Ne specifikojmë Mikhail si vlerën e paracaktuar në mënyrë që përdoruesi të kuptojë se çfarë dhe si të futë. <
hyrje emri="
kalojnë"
lloji="
fjalëkalimin"
madhësia="25"
gjatesia maksimale="30"
vlerë="">
- krijoni një fushë futjeje fjalëkalimi (karakteret zëvendësohen me yll). Gjerësia e fushës - 25, gjatësia maksimale fjalëkalimi - 30 karaktere. <
zgjidhni><
opsion vlerë="
c1"> Mysafiropsion><
opsion vlerë="
c2"> Administratoriopsion>zgjidhni>
- krijoni një listë të thjeshtë drop-down me dy artikuj. <
hyrje emri="
ruaj"
lloji="
kutia e kontrollit"
vlerë="
po"> Mbani mend- shtoni një flamur dhe shkruani një tekst shpjegues. <
br><
hyrje lloji="
paraqesin"
emri="
hyjnë"
vlerë"Hyrja">- krijoni një buton, duke shtypur të cilin fillon procesi i përpunimit të të dhënave.
- mbyll formularin. Në një shfletues, forma e internetit do të duket si imazhi më poshtë. Mund të plotësohet, por që të fillojë të funksionojë, duhet të shkruani kodin dhe ta ruani në një skedar skript.php pranë faqes HTML. Duke marrë parasysh kryesoren Etiketat HTML nuk mund të mos prekim të tilla element i rëndësishëm si forma. Shpesh faqet e internetit kërkojnë komente. Për shembull, plotësimi i një pyetësori në faqe, regjistrimi, autorizimi, komentet, etj. Në të gjitha këto raste, përdoruesi plotëson zona të veçanta (fusha të formularit) në faqe, pas së cilës të dhënat dërgohen në server. Për krijimin reagime përdoren forma. Forma është një fragment dokument HTML për hyrjen e përdoruesit. Figura tregon formularin e regjistrimit të studentëve në faqen e internetit të institucionit arsimor. Kontejneri përdoret për të krijuar formularin Struktura e formës më të thjeshtë: Çdo formë duhet të ketë gjithashtu butonat e dorëzimit, i krijuar për të dërguar të dhëna pas plotësimit të formularit. Struktura e butonit: Pra, për të regjistruar pothuajse të gjithë elementët e formës, përdoret etiketa me atributin tip. Për të krijuar një buton që rivendos të gjitha të dhënat nga formularët, përdoret struktura e mëposhtme: Për krijimin fushë teksti(fushë teksti) ka një parametër teksti. Për këtë përdoren parametrat e mëposhtëm: emri – emri i fushës; madhësia - për fushën me karaktere; maxlength - numri maksimal i mundshëm i karaktereve në fushë; vlera - informacioni i shfaqur në formë si parazgjedhje Një shembull i një hyrje formulari me dy fusha teksti: Rezultati i formularit është paraqitur në figurë. Nëse duhet të futni në fushën e tekstit nje numer i madh i informacion, për shembull, një koment përdoret në formën e një zone teksti (textarea), e cila krijohet duke përdorur etiketën Rezultati i kodit me zonën e tekstit është paraqitur në figurë. elementi tjetër format janë lista që ju lejojnë të bëni një zgjedhje nga grupi i paraqitur i vlerave. Etiketat ju lejojnë të krijoni një formë liste Struktura e hyrjes në listë: Në mënyrë që elementi të theksohet kur ngarkohet faqja, është e nevojshme në etiketë Një metodë e ngjashme përzgjedhjeje është kutia e kontrollit dhe elementët e formës së radiobutonit. Dallimi midis këtyre elementeve është se kutia e kontrollit ju lejon të bëni zgjedhje të shumta, dhe butoni i radios vetëm i vetëm. Struktura e kutisë së kontrollit dhe hyrjes së butonit të radios: teksti Butoni i radios: teksti Në elementët e specifikuar në strukturë, atributi i kontrolluar përdoret si parazgjedhje për të theksuar kutinë e kontrollit dhe butonin e radios. Një shembull i përdorimit të një kutie kontrolli, një butoni radioje, si dhe kodi HTML është paraqitur në figurë. Një element tjetër i formës është një buton, i cili specifikohet duke përdorur atributin tip të etiketës. me vlerën e butonit: Në kodin e specifikuar për krijimin e një butoni, ekziston një parametër onclick, i cili, si rregull, specifikon një kod në një gjuhë programimi për të kryer një veprim kur klikohet ky buton: Për të shfaqur një mesazh në një dritare të veçantë, përdoret një komandë javascript, aler. Rezultati i shembullit është paraqitur në figurë. Për të futur një imazh në një buton, përdorni kodin e treguar në shembullin e mëposhtëm: Kur regjistroni dhe futni faqet, përdoret një fushë me një test të fshehur, e shfaqur si yll. Ky është elementi i formularit të fjalëkalimit: Shpesh, regjistrimi në sit ndahet në disa faqe, dhe secila pasuese duhet të përmbajë informacion nga ai i mëparshmi. Elementi i formës së fshehur përdoret për të fshehur informacionin e paraqitur: Elementi i fshehur i formës do të jetë i padukshëm në dritaren e shfletuesit. Për ngarkimin e skedarëve në server, formularët kanë një element skedari. Një kod shembull për ngarkimin e skedarëve në server është paraqitur më poshtë: Pra, në këtë temë, elementët e formës u konsideruan për krijimin e faqeve të ndryshme HTML, të cilat, së bashku me përpunuesit e skriptit në një kompjuter ose server, ju lejojnë të zhvilloni aplikacione të plota në internet. Shpesh në faqet e internetit mund të gjeni faqe me forma HTML të vendosura në to. Formularët në ueb janë një mënyrë e përshtatshme për të marrë informacion nga vizitorët e faqes suaj të internetit. Një shembull i kësaj është -, - e cila ofron reagime për vizitorët dhe zhvilluesit e faqeve. Formularët janë gjithashtu të përshtatshëm për zhvilluesit e faqeve kur zhvillojnë një CMS, i cili ju lejon të ruani pronën kryesore të faqes - rëndësinë. Ky artikull fokusohet në bazat e krijimit të formave HTML, përpunimin e tyre dhe mënyrën e kalimit të të dhënave nga format në ekran te skriptet PHP. etiketa dhe
vendosni fillimin dhe fundin e formularit. Forma e etiketës së fillimit përmban dy atribute: veprim dhe metodë. Atributi i veprimit përmban URL-në e skriptit që duhet thirrur për të përpunuar skriptin. atribut metodë i tregon shfletuesit se çfarë lloj kërkese HTTP duhet të përdorë për të dorëzuar formularin; vlerat e mundshme POST dhe MARR. Dallimi kryesor midis metodave POST dhe GET është mënyra se si transferohet informacioni. Në metodën GET, parametrat kalohen përmes shiritit të adresave, d.m.th. në fakt, në kokën HTTP të kërkesës, ndërsa në metodën POST, parametrat kalojnë nëpër trupin e kërkesës HTTP dhe nuk pasqyrohen në asnjë mënyrë në formën e shiritit të adresave.
Kjo formë html ka një element shfletoni, e cila hap një kuti dialogu për zgjedhjen e një skedari për t'u ngarkuar në server. Duke shtypur butonin "Transferimi i skedarit", skedari i kalohet skriptit të mbajtësit. Pastaj ju duhet të shkruani një mbajtës skripti veprim.php. Para se të shkruani mbajtësin, duhet të vendosni se në cilën direktori do të kopjojmë skedarin: if(isset($_FILES [ "myskedar" ])) // Nëse skedari ekziston Nëse u besoni përdoruesve që të ngarkojnë ndonjë skedar në serverin tuaj, duhet të jeni jashtëzakonisht të kujdesshëm. Sulmuesit mund të injektojnë kodin "i keq" në një imazh ose skedar dhe ta dërgojnë atë në server. Në raste të tilla, duhet të kontrolloni fort shkarkimin e skedarëve. Ky shembull demonstron krijimin e një drejtorie dhe kopjimin e një skedari në atë drejtori në server. Unë gjithashtu do të doja të demonstroja një shembull me një element kutia e kontrollit. Ky element është paksa i ndryshëm nga elementët e tjerë në atë nëse jo një nga elementët kutia e kontrollit'a nuk është zgjedhur, atëherë një ndryshore superglobale $_POST do të kthejë një vlerë boshe:
nëse (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Nëse zgjidhet të paktën 1 artikull
. Ajo vjen me atributet e mëposhtme.
Shembull i formës
elementet e formes... 
1) Krijimi i një forme të thjeshtë
Komentoni
{
$catalog = "../image/" ; // Drejtoria jonë
if (is_dir ($catalog )) // Nëse ka një drejtori të tillë
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Skedari Temp
$myfile_name = $_FILES [ "myfile" ][ "emri"]; // Emri i skedarit
if(! kopje ($myfile , $catalog )) jehonë "Gabim gjatë kopjimit të skedarit". $myfile_name // Nëse kopjimi i skedarit dështoi
}
else mkdir("../image/"); // Nëse nuk ka drejtori të tillë, ne do ta krijojmë atë
}
?>
Komentoni
jehonë "Zgjidh vlerën";
?>
Artikujt kryesorë të lidhur
