OtthonLeckékHTML űrlapok. A HTML formák Példák a HTML űrlapokra
HTML űrlapok. A HTML formák Példák a HTML űrlapokra
A HTML-űrlap egy dokumentum része, amely lehetővé teszi a felhasználó számára érdeklődésre számot tartó információk bevitelét, amelyeket utólag elfogadhat és feldolgozhat a szerver oldalon. Más szavakkal, az űrlapokat a felhasználók által bevitt információk gyűjtésére használják.
Feladva két egysoros szövegmezők ( ), hogy a felhasználó beírja vezeték- és utónevét. Ezekhez a mezőkhöz egyedi neveket rendeltek a name attribútummal ( az űrlap helyes továbbítása és feldolgozása érdekében minden elemnél feltétlenül jelezze ezt az attribútumot). Ezenkívül az érték attribútumot ezekhez a mezőkhöz az alapértelmezett értékekre állítottuk be (a mezők kitöltésekor ennek az attribútumnak az értéke megfelel a felhasználói bevitelnek).
Feladva két rádiógombok ( ) a korlátozott számú lehetőség kiválasztásához. Kérjük, vegye figyelembe, hogy a rádiógombokhoz ugyanazt a nevet kell megadni hogy a felkínált lehetőségek közül csak egyet tudjon választani.
Mert első rádiógombokon megadtuk az attribútumot
Az űrlapok a HTML-ben a legösszetettebb, de másrészt talán a legérdekesebb téma a HTML-ben.
A webes űrlapok lehetővé teszik a webhely látogatói számára, hogy bizonyos információkat speciális mezőkbe írjanak be, és a fejlesztő megkapja azokat a számára kényelmes formában.
Az űrlapra példa lehet egy vendégkönyv, egy kérdőív, online teszt. Az űrlapok kitöltése a weboldalon történő regisztrációkor, webáruházban történő megrendeléskor stb.
A HTML használatával űrlapkeretet hozhat létre: szövegmezők, menük, listák, gombok, jelölőnégyzetek és választógombok. Vagyis azok az elemek, amelyek segítségével bizonyos információk bekerülnek az űrlapba.
Ezután az űrlapba bevitt adatok a szerverre kerülnek feldolgozásra. De a HTML itt tehetetlen – a hozzá csatolt program vagy szkript már dolgozik az űrlap feldolgozásán. Az ilyen programok általában be vannak írva php nyelv vagy javascriptet.
Űrlap attribútumok - címke
.
Az action attribútum minden űrlapnál kötelező - megadja az űrlapot kiszolgáló fájl címét ( feldolgozza a benne megadott adatokat).
A metódus attribútum határozza meg, hogyan kell elküldeni az űrlap tartalmát. Két módszer létezik - GET és POST. Most nincs értelme elmélyülni ezekben a paraméterekben, mivel a GET és POST módszerekkel történő információküldés témája az adatfeldolgozási nyelvekhez kapcsolódik ( például a PHP). Elég, ha tudjuk, hogy az űrlapokon a legtöbb esetben a POST adatátviteli módot alkalmazzák.
Címkenév attribútum
Többsoros szövegmező - címke
Ha a mező tartalma meghaladja a méretét, megjelenik egy csúszka.
Példa űrlap használatára
Most lássuk, hogyan működik az űrlap.
Oktatóvideó megrendelőlap:
Leírás
Címke
Igen
A tartály belsejében megengedett
helyezzen el más címkéket, de maga az űrlap semmilyen módon nem jelenik meg a weboldalon, csak az elemei és a beágyazott címkék eredményei láthatók.
Szintaxis
Beállítja azt a kódolást, amelyben a szerver adatokat fogadhat és dolgozhat fel.
Az űrlapadatokat feldolgozó program vagy dokumentum címe.
Kívánt.
HTML5 IE Cr Op Sa Fx
Jó napot kívánok a webfejlesztés rajongóinak és azoknak, akik szeretnének saját weboldalt készíteni. Ezt megelőzően minden publikációmat a nyelv alapelemeivel, a különféle tartalmi objektumok létrehozásának módjaival, azok formázásával, strukturálásával stb. Az előző témák elsajátításával máris egy elég jó weboldalt készíthet. Ez azonban hiányos lesz a mai téma nélkül: „Űrlapok létrehozása html-ben”.
A nyelvnek ez a része nagyon fontos. Ezért fordítson különös figyelmet a tanulmányozására, különben az Ön által létrehozott webes erőforrás nem kerül termelésbe. Így a cikk elolvasása után megtudhatja, hogy miért kell űrlapokat használni, milyen címkéket használnak azok létrehozásához, illetve konkrét példákat is ki lehet majd próbálni a gyakorlatban. Kezdjük is!
Mi az a forma és hogyan működik?
Forma– ez az egyik legfontosabb objektum, amely a szerver és a felhasználó közötti információs adatcserére szolgál.
Egyszerűen fogalmazva, ha olyan online áruházat szeretne létrehozni, amely képes termékeket rendelni a webhelyen, regisztrációt kérni egy webes erőforráson és fiókokkal dolgozni, vagy visszajelzést adni az ügyfeleknek a cégvezetőktől, akkor nem nélkülözheti az űrlapokat.
Az űrlapot a html nyelv egy speciális eleme adja meg .
Vegye figyelembe, hogy a kóddokumentum több címkedeklarációt is tartalmazhat azonban csak egy kérés küldhető a szervernek az adatok feldolgozására. Éppen ezért a felhasználó által az erre szolgáló mezőkbe beírt és különböző űrlapokra vonatkozó információk nem lehetnek függőek. Ezenkívül nem megengedett a formák egymásba ágyazása.
Azok számára, akik türelmetlenek és szívesen megnézik a kódábrázolást, csatoltam egy egyszerű példát egy szövegmezővel ellátott panel használatára egy gombos jelszóhoz:
1
2
3
4
5
6
7
8
9
10
11
12
Példa
Példa
Lehet, hogy most nem egészen világos, hogy mi és hogyan működik együtt ebben a kis programban, de garantálom, hogy a teljes cikk elolvasása után sokkal összetettebb alkalmazásokat tud majd létrehozni.
Adatok küldése a szerver oldalra
A beírt (vagy kiválasztott) információk párbeszédpanelen való elküldéséhez a szabványos mechanizmust kell használnia - Küldés gomb.
Egy ilyen módszer kódja így néz ki:
A bemutatott sor futtatásakor megjelenik egy gomb a következő felirattal: „Küldés”.
Egy másik módja annak, hogy adatokat küldjön a szerveroldalra, ha megnyomja az Enter billentyűt a párbeszédablakban.
A megadott információ elküldésének megerősítése után nem érkezik meg azonnal a szerverre. Először is a böngésző dolgozza fel, ami a „név=érték” alakot eredményezi.
Az attribútum paraméter felelős a névért típus címke , az értéknél pedig a felhasználó által megadott adat. Ezután a konvertált karakterlánc átadásra kerül a kezelőnek, amelyet leggyakrabban az attribútumban adnak meg , ami azt jelzi, hogy a kódolás megegyezik az elemet tartalmazó dokumentum kódolásával elem .
Magára a műveleti paraméterre nincs szükség, sőt bizonyos esetekben egyáltalán nincs is rá szükség. Például, ha egy webhely oldala php vagy js használatával készült, akkor a feldolgozás az aktuális oldalon történik, és nincs szükség hivatkozásokra.
Az oldal működéséről alkotott összkép jobb megértése érdekében szeretném hozzátenni, hogy a szerveren az adatok feldolgozása más nyelveken történik. Így a szerveroldali nyelvek a következők: Python, php, C-szerű nyelvek (C#, C stb.), Java és mások.
Most szeretnék megállni és többet beszélni az elemről . Akkor egyszerű szavakkal elmagyarázni szövegmezők, választógombok, különféle gombok, rejtett mezők, jelölőnégyzetek és egyéb objektumok létrehozásához szükséges.
A címkét nem kell párosítani Ha azonban felhasználói rekordokat kell feldolgoznia vagy be kell vinnie őket például egy adatbázisba, akkor nem nélkülözheti a tárolót.
Ennek a hipertext jelölőnyelvi elemnek a fő attribútumai a következők:
Szöveg– szövegmezőt hoz létre;
Beküld– létrehoz egy gombot az adatok szerverre küldéséhez;
Kép– felelős a képpel ellátott gombért;
Reset– beállít egy gombot az űrlap törléséhez;
Jelszó– beállít egy szövegmezőt kifejezetten a jelszavakhoz;
Jelölőnégyzet– felelős a jelölőnégyzetekkel ellátott mezőkért;
Rádió– felelős az egy elem kiválasztásával rendelkező mezőkért;
Gomb– létrehoz egy gombot;
Rejtett– rejtett mezőkhöz használható;
Fájl– beállítja a fájlok küldéséért felelős mezőt.
Az információtovábbítás módszerei
A felhasználói adatok szerveroldalra való átvitelének két módja van: KapÉs Hozzászólás. Ezek a módszerek ugyanazt a műveletet hajtják végre, de jelentősen különböznek egymástól. Ezért, mielőtt bármelyiket megemlítené, ismerkedjünk meg jellemzőikkel.
Hozzászólás
Kap
A továbbított dokumentumok mérete
A szerveroldalra korlátozódik.
Maximum – 4 KB.
Hogyan jelennek meg az elküldött információk
Csak böngészőbővítményeken vagy más speciális szoftvertermékeken keresztül érhető el.
Azonnal elérhető mindenki számára.
Könyvjelzők használata
Nincs mód a könyvjelzők hozzáadására, mivel a kérések nem ismétlődnek (minden oldal egy címre hivatkozik).
Bármelyik oldal, amelyre kért, elmenthető könyvjelzőként, és később visszatérhet rá.
Gyorsítótárazás
Az előző bekezdés alapján az összes kérés egy oldalon található.
Minden oldal külön-külön gyorsítótárazható.
Cél
Nagy fájlok (könyvek, képek, videók stb.), üzenetek, megjegyzések küldésére szolgál.
Kiválóan alkalmas a kért értékek kereséséhez egy webes erőforráson vagy rövid szöveges üzenetek küldéséhez.
Annak jelzésére, hogy a két adatátviteli mód közül a böngészőnek melyiket kell használnia, az elemben használja a megadott paramétert application/x-www-form-urlencoded(Például, method="post").
Nézzük a második példát. Hozzon létre egy űrlapot, amelyben meg kell adnia személyes adatait (utó- és vezetéknév, születési dátum), és létre kell hoznia egy jelszót. Utána a metódus segítségével mindezt elküldjük a szerverre Hozzászólás.
POST módszer
Adja meg személyes adatait!
Például egy dátum megadásához az egyes paraméterek számának (nap, hónap és év) kapcsolói vannak, valamint a kényelem kedvéért egy legördülő panel a naptárral.
Regisztrációs panel létrehozása
Az alapvető címkéket és attribútumokat ismertettük. Éppen ezért itt az ideje egy teljes értékű regisztrációs űrlap elkészítésének css stílusú jelöléssel és a megadott adatok érvényesítésével. Természetesen nem fogjuk látni a szerver működését velük, de a tervezést és a fontos részleteket megadjuk.
Azt tanácsolom, hogy ezt a programkódot mentse el egy dokumentumba .html kiterjesztéssel és utf-8 kódolással, és nyissa meg az utóbbit egy böngészőablakban. Látni fog egy regisztrációs panelt a maga teljes pompájában, ahol a keresztnév, vezetéknév, e-mail cím és ismételt jelszó megadására szolgáló mezők találhatók. Figyelje meg, hogy amikor elindítja az oldalt, a kurzor azonnal az első szövegmezőbe kerül. Ez a technika az attribútum révén érhető el autofókusz.
HTML űrlapok olyan vezérlők, amelyek a webhely látogatóitól származó információk gyűjtésére szolgálnak.
A webes űrlapok szövegmezők, gombok, listák és egyéb vezérlők gyűjteményéből állnak, amelyeket egy egérkattintás aktivál. Technikailag az űrlapok adatokat adnak át a felhasználótól egy távoli kiszolgálóhoz.
Űrlapadatok fogadásához és feldolgozásához webes programozási nyelvek, mint pl PHP, Perl.
A HTML5 megjelenése előtt a webes űrlapok több elem gyűjteményét alkották , gombbal végződik . Sok erőfeszítést igényelt az űrlapok stílusa a különböző böngészőkben. Ezenkívül az űrlapokhoz JavaScriptre volt szükség a bevitel ellenőrzéséhez, és hiányoztak a specifikus beviteli mezőtípusok a mindennapi információk, például a dátumok, e-mail címek és URL-ek megadásához.
HTML5 űrlapok ezeknek a gyakori problémáknak a többségét új attribútumok jelenlétével oldotta meg, lehetővé téve az űrlapelemek megjelenésének megváltoztatását CSS3.
. Nem igényel semmilyen bevitelt, mivel egy tároló, amely az összes űrlapvezérlőt együtt tartja - mezőket. Ennek az elemnek az attribútumai olyan információkat tartalmaznak, amelyek minden űrlapmezőre jellemzőek, ezért a logikailag kombinált mezőket egy űrlapba kell foglalni.
1. táblázat Címke attribútumok
2. Űrlapelemek csoportosítása
formaelemek
Az egymáshoz kapcsolódó elemek csoportosítására tervezték, így logikai töredékekre osztva a formát.
Az elem segítségével minden elemcsoport elnevezhető
Rizs. 1. Továbbfejlesztett webes űrlapok HTML5-tel