Bevezetés a HTML űrlapvezérlésbe
A HTML a weblapok létrehozásának jelölő nyelve. Meghatározza a weboldal szerkezetét és viselkedését. A HTML olyan címkékből és elemekből áll, amelyek segítenek a weboldalak felépítésében. Ezeket az elemeket egy űrlapon belül lehet csoportosítani, hogy adatot gyűjtsenek a felhasználótól felhasználóbarát módon. Vegye figyelembe azonban, hogy a HTML állapot nélküli protokoll, ami azt jelenti, hogy nem tárolhat semmit, és elveszíti az adatokat egy oldalfrissítéskor.
HTML űrlap-ellenőrzés
Különböző típusú űrlapvezérlés van definiálva a HTML-ben, ezek a vezérlők felelősek a Felhasználói bevitel meghatározott módon történő elfogadásáért. Vessen egy pillantást a HTML formátumban elérhető különféle űrlap-vezérlőkre.
1) Beviteli szövegvezérlés
A beviteli szöveg vezérlőelemei felhasználják a felhasználói adatok szabad szövegként történő gyűjtését. A weboldalon egy téglalap alakú mezőt alkot, amelybe a felhasználók bevihetik az adatokat.
Különböző típusú beviteli szövegvezérlők léteznek, amelyek felhasználhatók a HTML űrlapokban. Vessen egy pillantást a különféle beviteli szövegvezérlőkre.
- Egysoros beviteli szövegvezérlés
Ez lehetővé teszi a felhasználó számára, hogy csak egyetlen adatsort írjon be. Az ilyen beviteli szövegvezérlők tipikus példája a név, a keresőmező, a város stb. Beírása.
- Több soros beviteli szövegvezérlés
Ez a bemeneti vezérléstípus lehetővé teszi a felhasználó számára, hogy több sor adatait adja meg. Az ilyen bemeneti vezérlők tipikus használata a megjegyzések, címek, leírás és így tovább.
Itt a sorok a sorban a szöveges területen jelennek meg, a col pedig az oszlopok számát.
- Jelszóbeviteli vezérlés
Ahogy a neve is sugallja, ezt általában a jelszó mezőben használják. Ez ugyanúgy működik, mint a bemeneti szövegmező, de a szöveg biztonsági okokból maszkolt.
2) Beviteli típus benyújtása
Ha a beviteli típus benyújtása, akkor végrehajtja az űrlapműveletben meghatározott műveletet, és elküldi az űrlapadatokat a szervernek.
Itt a felhasználónév és jelszó értékeket továbbítják a szerverre a Küldés gomb kattintási eseményén. Az űrlapban szereplő művelet a bemenetet elfogadó szerver módszer.
3) Bemeneti típusú rádió
A rádiógombokat akkor használják, ha azt várja el, hogy a felhasználók logikai értékként töltsék ki az adatokat, vagy ha a több lehetőség közül csak egy bemeneti valós értékre számít. A rádiógombok egyik leggyakoribb esete a nemek meghatározása, az alkalmazott típusa (rendes / ideiglenes) és így tovább.
4) Bemeneti típus jelölőnégyzet
A jelölőnégyzet segítségével a Felhasználó kiválaszthatja az esetére vonatkozó információkat. Ez egy nagyon kényelmes módszer az adatok elfogadására, ha a lehetséges bevitel már ismert.
Például, ha szeretné összegyűjteni az egyén által biztosított biztosítás típusát, akkor ezt könnyen megteheti a jelölőnégyzetekkel, mivel a lehetőségek korlátozottak lennének.
5) Bemeneti típus legördülő lista
A legördülő lista lehetővé teszi a felhasználó számára, hogy több lehetőség közül válasszon egyet. Ez egy nagyon felhasználóbarát módszer a részletek beszerzésére a felhasználótól, mivel kimerítően felsorolja a lehetséges lehetőségeket, amely segít a felhasználónak azonosítani a neki legmegfelelőbb lehetőséget.
Például legördülő listával felsorolhatja azt a várost, amelybe az alkalmazott tartozik
6) Bemeneti típus Optgroup
Az Optgroup ugyanúgy működik, mint a legördülő lista, az egyetlen különbség az, hogy az optgroup lehetővé teszi, hogy logikusan csoportosítson bizonyos lehetőségeket egy esernyő alatt. Ez segít a felhasználónak, hogy az optgroup címke segítségével gyorsan azonosítsa a releváns opciót.
Például legördülő listák az egyes indiai államok városai felsorolására, államok szerint csoportosítva.
7) fieldset
A Fieldet egy másik hasznos címke a Html formátumban, amely lehetővé teszi a fejlesztőnek, hogy logikailag csoportosítson bizonyos vezérlőelemeket egy jelmagyarázat alá. Ez segíti a fejlesztőt, hogy világos utasításokat adjon a Felhasználónak arról, hogy mit várhat ebben a szakaszban.
Például a bejelentkezési oldal mezőkészlete
8) HTML kimeneti címke
Ez a kimeneti címke bekerült a HTML5-be. Ez lehetővé teszi, hogy azonnal megjelenítse a számítás eredményét. Ez nagyon hasznos, ha a felhasználónak azonnal elvégeznie kell a számítást és meg kell látnia az eredményeket. Az ilyen esetek tipikus példája az, amikor a felhasználó ellenőrzi a kosárban található összes elem összegét.
A fenti példában az ár ártartományát 0 és 100 között határoztuk meg, és futásidejűleg megváltoztatható. A másik 12 mezőben lévő szövegmező az adott tételre kivetett adó, a futásidejűleg is megváltoztatható. Az 58 kimeneti eredmény mindkét érték összege.
Megjegyzés: Ezt a címkét nem támogatja a korábbi verziók 12-es verziója vagy az Internet Explorer.
9) Bemeneti típus Szín
Az űrlap gyakran megköveteli, hogy a szöveg helyett csak a színt mutassa meg. A HTML 5 beviteli típusának színe lehetővé teszi ezt. Megmutatja a színt, amelyet megjeleníteni szeretne az űrlapon. A tipikus forgatókönyv, ahol használják, a projekt vagy egy szakasz állapotának megmutatása.
Megjegyzés : az Internet Explorer és az Edge egyes verziói nem támogatják a színt.
10) Beviteli típus dátuma
A beviteli típus dátumát általában akkor használják, amikor a dátumtípus mezőt a beviteltől a felhasználó várja el, például születési dátum, bérleti dátum, befejezési dátum stb. Bevezetésre kerül a HTML 5 formátumban, és a dátum formátuma kissé változik a böngésző változásával.
Következtetés
- A HTML 5 bevezetésével óriási növekedés történt a támogatott HTML vezérlők számában. Ezeknek a HTML űrlap-vezérlőknek különféle effektusok és színek adhatók a CSS 3 és a JavaScript / jQuery / Angular JS segítségével.
- Ebben a cikkben lefedtük az összes általánosan használt HTML űrlapvezérlőt. Számos olyan vezérlőelem létezik, mint például a rejtett, alaphelyzetbe állítás, hét, URL, idő, e-mail, fájl, DateTime-local, kép, tel, amelyre ez a cikk nem vonatkozik. Nagyon fontos ellenőrizni ezen vezérlők böngészővel való kompatibilitását, mielőtt ezt bevezetnék a projektbe, mivel sok böngészőverzió nem támogatja a HTML 5 űrlapvezérlőket.
Ajánlott cikkek
Ez egy útmutató a HTML űrlap-vezérléshez. Itt tárgyaljuk a bevezetést és a HTML-ben meghatározott űrlapvezérlés különféle típusait. A további javasolt cikkeken keresztül további információkat is megtudhat -
- HTML attribútumok
- HTML formátumú címkék
- HTML stíluslapok
- Karrier HTML-ben
- HTML keretek
- HTML blokkok
- Html5 új elemek
- Állítsa be a háttér színét HTML-ben a Példa segítségével