Részletes útmutató a HTML-űrlapok használatának megkezdéséhez

Áttekintés

HTML-űrlapokra van szükség, ha adatokat szeretne gyűjteni a webhelyét felkereső személytől. Például amikor olyan alkalmazásokhoz regisztrál / bejelentkezik, mint az Uber, a Netflix vagy a Facebook, akkor HTML- űrlapokon keresztül ad meg olyan információkat, mint a Név , az E-mail és a Jelszó .

Most megtanuljuk az űrlap létrehozásához szükséges elemeket.

MEGJEGYZÉS: A CSS használatával már hozzáadtam a Styling-et, így az elemeim másképp fognak kinézni, de pontosan ugyanúgy fognak működni.

Ha azt szeretné, hogy az elemei az enyémnek tűnjenek, megtalálja a CSS fájlomat az alábbi linkeken:

Egyéni CSS: //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

A CSS normalizálása:

//gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Form Element

Ez az első elem, amelyet megtanulunk. Ez az elem beburkolja az összes többi elemet, amely a formánkba esik. Ez a forma elem.

Az űrlapunk sehol nem küldi el az adatokat, mert nem kapcsolódik szerverhez. Az űrlapunk kiszolgálóhoz való csatlakoztatásához és az adatok feldolgozásához bármilyen kiszolgálóoldali nyelvet használhatunk, például Node, Python, Ruby vagy PHP. Az adatok feldolgozásának része két fontos attribútumot tartalmaz, amelyek az űrlap elemhez vannak csatolva. Vessünk egy pillantást ezekre az attribútumokra.

Tulajdonságok:

  1. action: Az action attribútum egy olyan program webcíme (URL), amely feldolgozza az űrlapunk által beküldött információkat.
  2. módszer: A böngésző az űrlap elküldéséhez a HTTP metódust használja, a lehetséges értékek a POST és a GET.
  • POST - Az űrlap törzséből származó adatokat elküldjük a szervernek.
  • GET - Az adatokat az URL belsejében küldi el, és a paramétereket kérdőjellel választják el.
Megjegyzés: Nem lehet űrlapok beágyazva másik űrlapba . Ez azt jelenti, hogy nem lehet elem egy másik elemen belül.

Bemeneti elem

A beviteli elem a leggyakrabban használt űrlapelem. Arra használják, hogy egy szöveges mező , ahol a felhasználó beírhatja néhány információt , például e-mail , jelszó , stb

Készítsünk egy szövegmezőt, ahová a felhasználó beírhatja a nevét.

Megjegyzés: A beviteli elem egy önzáró címke, ezért nem kell beírni egy záró címkét, hogy megfeleljen a nyitó címkének.

Három attribútumot adtam hozzá a fenti bemeneti címkéhez. Vessünk egy pillantást mindegyikre részletesen.

típus

A type attribútum jelzi, hogy milyen típusú adatbevitelt szeretnénk. Ha a type attribútumnak szövegértéket adunk , akkor itt azt értjük, hogy az az érték, amelyet beírunk a beviteli mezőbe, típusú típusú. Ennek a tulajdonságnak sok lehetséges értéke van. Néhány lehetséges érték az e-mail, a telefon és a jelszó stb.

Példa: Ha bármelyik fiókjába (Amazon / Netflix) bejelentkezik, két dolgot kell megadnia: e-mailt és jelszót . Tehát ebben a konkrét esetben a bemeneti elemet használják. A type attribútumot az e-mail és a jelszó értékével együtt adjuk meg .

id

Az ID attribútum nem kötelező, de érdemes hozzáadni egyet. Bizonyos esetekben ez hasznos lehet az elemek CSS / JavaScript használatával. Az ID attribútumot adunk, hogy mi lehet társítani címkéket a konkrét űrlapvezérlők .

név

A név attribútum szükséges. Amikor egy űrlapot elküldenek a kiszolgálóoldali kódhoz, a kiszolgáló megérti az űrlap adatait és megfelelően feldolgozza az értékeket.

helykitöltő

Ez egy rövid utalás, amely megjelenik a beviteli mezőben, mielőtt a felhasználó megadna egy értéket. Amint a felhasználó elkezdi beírni a beviteli mezőt, a helyőrző eltűnik.

Lássuk, hogyan néz ki néhány további alapvető bemeneti elem.

Megjegyzés: A különböző értékeket a type attribútum fog különböző eredményeket. Például megadhatja, hogy a bevitel típusú legyen e-mail, szöveg vagy jelszó, stb. Mindegyik kissé eltérő viselkedést mutat, amit alább láthat.

Több bemeneti elem (szöveg, e-mail, jelszó)

Több bemeneti elem (szöveg, e-mail, jelszó)

Textarea elem

Néha egyetlen szövegsor nem elegendő, és egy egyszerű beviteli elem nem fog működni. Például egyes webhelyeken van kapcsolatfelvételi űrlap az emberek számára, hogy beírják kérdéseiket vagy üzeneteiket. Ezekben az esetekben a legjobb az textareaelem használata .

A Az ea> nem önzáró címke, ezért be kell írnunk a nyitó és a záró címkét is. ()

Tulajdonságok:

  • id: Ugyanaz, mint fent említettük az elemben.
  • név: Ugyanaz, mint fent említettük az elemben.
  • cols: Megadja a szövegterület látható szélességét.
  • sorok: Megadja a szövegek területén látható sorok számát.

Láthatja, hogy a textarea lehetővé teszi számunkra, hogy több sort írjunk. Egy textarea átméretezhető a felhasználó által, a fenti ábrán láthatja, hogy átméretezem a textarea méretét.

Megjegyzés: A legtöbb böngészőben a textarea elem átméretezhető.

Gomb elem

A gombelem az egyik legfontosabb űrlapelem. Gomb nélkül nem küldhet semmilyen űrlapot a kiszolgálóhoz feldolgozásra.

A gombelem elfogadja a type nevű attribútumot . Ez az attribútum elfogadja a beküldés , visszaállítás és gomb három értékét .

Tulajdonságok:

  • type = ”reset”: Az összes űrlapadatot törli, amikor rákattint.
  • type = ”button”: Nincs alapértelmezett viselkedése, és többnyire a JavaScript-szel használják az egyéni viselkedés programozásához .
  • type = ”submit”: A beküldési típus alapértelmezett viselkedése , amint a neve is mutatja, az űrlap elküldése és az összes adat elküldése a kiszolgálónak.

Címkeelem

Jelenleg lehetetlen, hogy a felhasználó megmondja, melyik űrlapvezérlő mit csinál. Nem lehet tudni, hogy hová írja be az e-mailt, és hová írja be a jelszót. Az űrlap nagyon hiányos és rendetlen.

Az űrlapvezérlőink mindegyikét felcímkézhetjük a label elem segítségével.

A leggyakrabban használt attribútum egy címkét is az.

Tulajdonságok:

  • for: A for attribútum társítja a címkét egy adott űrlapelemmel. Az egyezés az azonosító szerint történik . Amint a fenti példában látható , a bemeneti elemnek adott ID attribútum értéke e-mail. A címkeelemnek adott for attribútum értéke szintén e-mail, így mindkettő társítva van egymással.
Megjegyzés: Amikor rákattintunk a címkére, automatikusan a címkéhez társított beviteli mezőre fókuszálunk. Ez egy alapértelmezett viselkedés.

Most nagyon jól néz ki a formánk?

Válassza a Menük lehetőséget

Az űrlap létrehozásakor néha nem akarja, hogy a felhasználó be tudja írni a szöveget. Inkább azt szeretné, ha néhány előre beállított opció közül választanának .

Bármikor van egy listája olyan opciókról, amelyek hosszabbak, mint például négy vagy öt dolog, a legjobb, ha a select menübe megy, mert ez helyet takarít meg.

Tegyük fel, hogy a formanyomtatványa azoknak a hallgatóknak szól, akik felvételt akarnak kérni egy egyetemen. Szeretnénk lehetővé tenni a hallgatók számára, hogy az egyetemi programok előre meghatározott listájából válogathassanak.

A select menüelem nyitás és zárás segítségével készül ct> tag.

ct> - A select elem megjeleníti a legördülő menüt, amely választható opciókat tartalmaz . A select elem önmagában nem fog semmit tenni. Ez a forma elem valójában szüksége van további elemek belsejében is, pontosan lik e

    ele ment szükségletei
  • elemek. Azokat az elemeket, amelyeket a kiválasztott elem belsejébe helyezünk, opcióelemeknek nevezzük.

    Tulajdonságok:

    • név: Ugyanaz, mint fent említettük az elemben.

    on> - Az opció elem egyike annak a választásnak, amelyet a felhasználó választhat a select menüben . Az & l t; option> elem egy attri bute c all értéket használ .

    Tulajdonságok:

    • érték: Ha egy űrlapot elküld a kiszolgálóoldali kódhoz, minden űrlapelemhez tartozik egy érték a szövegbevitelhez és a szövegterületekhez. Ez az érték bármi, amit a felhasználó beír a mezőbe. Mivel azonban ezeket az előre definiált opciókat készítjük, meg kell határoznunk, hogy az értéknek hogyan kell kinéznie a beküldéskor. Tehát az érték attribútummal adjuk meg az értékeket az előre definiált opciókhoz.

    Most megvan a Kurzusok kiválasztása címke a most létrehozott kiválasztási menüvel. Most a listánkat logikai csoportokba is rendezhetjük a fel> elem.

    Tulajdonságok:

    • címke: Az opciók csoportjának neve. Az alábbi példában a lehetőségek listáját két csoportra osztottuk a Mérnöki és menedzsment címkével.

    Az alábbi példában

    Rádió gombok

    Kiválasztott menük nagyszerűek, ha rengeteg lehetősége van. Ha van valami, mint 5 vagy kevesebb lehetőség, akkor jobb, ha rádiógombokat használ.

    A Menü kiválasztása és a Rádió gomb közötti különbség az, hogy a választógombok egyszerre mutatják be az összes lehetőséget. A kiválasztott menühöz hasonlóan a felhasználó is csak az egyik közül választhat.

    Tulajdonságok:

    • név: Ugyanaz, mint fent említettük az elemben.
    • érték: Mivel ezeket az előre definiált opciókat készítjük, meg kell adnunk, hogy az értéknek hogyan kell kinéznie a beküldéskor. Tehát az érték attribútummal adjuk meg az értékeket az előre definiált opciókhoz.
    Megjegyzés: Ha kiválaszt egy opciót, majd megpróbál másik lehetőséget választani, akkor látni fogja, hogy az eltávolítja az előző opciót. Az is, hogy tudja, hogy ezt, hogy azért van, mert a név attribútum pontosan ugyanaz. Tehát tudja, hogy ez a két rádiógomb ugyanazon csoport része. Megjegyzés: A névnek meg kell egyeznie, ha azt akarjuk, hogy a rádiógombok ugyanazon rádiógombcsoport részei legyenek.

    Jelölőnégyzetek

    Előfordulhat, hogy előre definiált opciók csoportja van. Azt szeretné, hogy a felhasználó több lehetőséget is választhasson, és ne csak egyet. A jelölőnégyzetek itt hasznosak.

    Tulajdonságok:

    • név: Ugyanaz, mint fent említettük az elemben.
    • érték: Mivel ezeket az előre definiált opciókat készítjük, meg kell adnunk, hogy az értéknek hogyan kell kinéznie a beküldéskor. Tehát az érték attribútummal adjuk meg az értékeket az előre definiált opciókhoz.
    • bejelölt: Alapértelmezés szerint nincs bejelölve egy jelölőnégyzet bevitele. Beállíthatja az alapértelmezett állapotot ellenőrizni az ellenőrzőnek nevezett attribútum használatával . Ne feledje, hogy ez egy logikai attribútum.

    Az alábbi példában az egyes opciókhoz használtam a címkét. Én csatlakozik a négyzetet és egy címke segítségével az attribútum címke és id attribútuma a négyzetet .

    Megjegyzés: Nehéz lehet egy kis jelölőnégyzetre kattintani. Javasoljuk, hogy egy elemet tekerjen a jelölőnégyzet köré. Ha rákattintunk a címkére, akkor a jelölőnégyzetünk is be lesz jelölve vagy nincs bejelölve. Az alábbiakban nem tettem meg, de megteheti az UX b etter elkészítéséhez.

    Különbség a Jelölőnégyzet és a Rádió gomb között

    1. Jelölőnégyzetet létezhet önmagában , míg a rádió gombok csak akkor jelennek meg, mint egy csoport (minimum 2 rádió gombok legyen ott).
    2. A jelölőnégyzet kiválasztása nem kötelező, de a választógomb egyikének kiválasztása kötelező .

    A teljes űrlap

    Megtanultunk sok HTML-űrlap elemet, és áttekintettük az alapvető dolgokat.

    Ne aggódjon, hogy mindent megjegyez. Szinte egyetlen professzionális webfejlesztő sem nevezhet meg minden attribútumot vagy elemet. A memorizálásnál fontosabb megtanulni, hogyan keressük fel a dolgokat a dokumentációban, amikor szükség van rájuk.

    Megpróbálhatja hozzáadni a saját CSS-jét, hogy ez az űrlap úgy nézzen ki, ahogyan szeretné.

    Az űrlapokról az alábbi linken tudhat meg többet

    HTML űrlapok

    Ez a modul cikkeket tartalmaz, amelyek segítenek elsajátítani a HTML-űrlapokat. A HTML-űrlapok nagyon hatékony eszközök a ... developer.mozilla.org számára

    Remélem, hogy ezt a bejegyzést informatívnak és hasznosnak találta. Szeretném hallani visszajelzését!

    Köszönöm, hogy elolvasta!