Űrlap létrehozása HTML -ben

Űrlap létrehozása HTML -ben

Adatgyűjtés egy webhely felhasználójától többféle módon történhet. A weboldalakon található űrlapoknak egyszerű funkciójuk lehet, például feliratkozni egy felhasználóra hírlevélre, vagy egy bonyolultabb célra, például álláspályázati űrlapként.





Mindazonáltal egy dolog, ami ezekben az egyszerű és összetett formákban közös, a HTML, pontosabban a HTML címke.





Az űrlapcímke használata

Az A címke egy HTML elem, amelyet tárolóként használnak az űrlapok építőköveinek tekinthető egyéb elemek bezárására. Ezen alapvető elemek közül néhány a címke, a címke, és a címke.





Az A címke fontos tulajdonsággal rendelkezik, amely hozzájárul a funkcionalitásához. Ezt az attribútumot action -nak hívják, és azonosítja azt a fájlt, amelyhez az űrlapon megadott adatokat továbbítják.

Példa a címkére





A fenti példa bemutatja, hogyan kell használni az űrlapcímkét a projektjeiben. Az egyik fő kivonat az, hogy ha megnyit egy űrlapcímkét, ne felejtse el bezárni. Ez létrehoz egy űrlapstruktúrát, és biztosítja az űrlapba bevitt adatok helyes feldolgozását.



A címke használata

Az címke az egyes beviteli mezők adatainak leírására szolgál egy formában. Ez a címke a számára attribútum, amely az űrlap funkcionalitásának javítására szolgál.

Összefüggő: A legjobb ingyenes online HTML -szerkesztők a kód teszteléséhez





Ha a megfelelő beviteli mezőhöz rendelt azonosító megegyezik a számára érték a címke, akkor ez a beviteli mező automatikusan kiemelésre kerül, ha rákattint a címkére.

Példa a címkére


First Name:

A fenti példában láthatja, hogy a számára attribútumhoz van hozzárendelve az érték f név . Ezért ha a beviteli mezőt a f név id, ez a mező minden alkalommal kiemelve lesz, amikor rákattint Első Név címke.





A címke használata

A legalapvetőbb formájában a címke szövegdoboznak tekinthető. Az címke rögzíti a felhasználó adatait, és egyik legfontosabb jellemzője a típus tulajdonság. Az típus attribútum azt jelzi, hogy milyen típusú adatokat gyűjthet ez a szövegmező.

Összefüggő: Halmozott űrlap létrehozása CSS -ben

Számos különböző értéket rendelhet hozzá típus attribútum, de néhány népszerűbb a következő.

  • Szöveg
  • Szám
  • Email
  • Kép
  • Dátum
  • Jelölőnégyzet
  • Rádió
  • Jelszó

Példa a címke használatával


First Name:

Az címke a fenti kódban három különböző attribútummal rendelkezik, amelyek mindegyike egyedi funkcióval rendelkezik. Az típus attribútumhoz szövegérték tartozik, ami azt jelenti, hogy a szövegdoboz csak karaktereket fogad el.

Az id attribútum a szövegmező egyedi azonosítója, és fontos, mert hozzáférést biztosít ehhez az elemhez egy CSS -fájlból. Az név attribútum is egyedi azonosító; azonban a name attribútum a fejlesztés szerveroldali elemével való interakcióra szolgál.

Az id és név az attribútumok általában ugyanazt az értéket kapják, mint ahogy az egyik hozzáférést biztosít egy elemhez a kliens oldalról, a másik pedig szerver oldalról.

A jelölőnégyzet elem használata

A jelölőnégyzet eleme nagyon egyedi a többi elemhez képest, amelyeket a címke. Lehetővé teszi a felhasználó számára, hogy egy vagy több lehetőséget válasszon ki a kapcsolódó lehetőségek listájából. A jelölőnégyzetek könnyen azonosíthatók, mert apró négyzet alakú négyzetek jelölik, amelyek bejelölve jelölőnégyzetet tartalmaznak.

Példa a jelölőnégyzet elemre


Programming Languages:
Java
JavaScript
Python

A fenti példában minden jelölőnégyzet -elem rendelkezik értékattribútummal, és ez azért fontos, mert segít megkülönböztetni az egyes jelölőnégyzet -beállításokat a gyűjteménytől. Ezért ha a felhasználó a „Java” lehetőséget választja a fenti lehetőségek közül, az adatok ezt tükrözik.

A címke és a rádióelemek használata

Az a címke és a rádióelemek hasonlóak abban az értelemben, hogy egyszerre csak egyetlen érték kiválasztását teszik lehetővé a felhasználó számára; ezért mondhatjuk, hogy ugyanaz a funkciójuk. Azonban megjelenésükben nagyon különbözőek.

A rádióelem megjelenésében közelebb van a jelölőnégyzet elemhez, azonban a rádióelemnél négyzetek helyett körök vannak.

Az címke lényegében egy legördülő mezőt hoz létre, amely lehetővé teszi a felhasználó számára egyetlen érték kiválasztását.

Példa a címke és a rádióelem használatára


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

A Dátum elem használata

A dátum elem egy kis szövegdobozt hoz létre, amely kattintásra naptárat generál. Használata dátum űrlapjainak beviteli típusaként biztosítják, hogy a felhasználó esetleg helytelen dátumot írjon be, ami hibás adatok gyűjtéséhez vezethet.

Példa a dátum elemre


Az e -mail és jelszó elem használata

Amikor egy fejlesztő az e -mail vagy a jelszó értékeket rendeli az an típusú attribútumhoz címkét, mindegyikük azonos szövegdobozt készít. Amikor azonban elkezdi használni ezeket a dobozokat, a különbségek nyilvánvalóvá válnak.

Az e -mail elem figyeli a szövegmezőbe bevitt adatokat, és biztosítja, hogy minden beküldés megfelel az e -mail címre vonatkozó szabványos követelményeknek; ami azt jelenti, hogy van egy helyi része, amelyet a @ szimbólum követ, és domain -re végződik.

Példa az e -mail elemre


A fenti példában megismerkedhet egy új attribútummal helykitöltő , és ez az attribútum olyan szövegértéket vesz fel, amely halvány szürkén jelenik meg a szövegmezőben. Ez a szöveg a fenti példában látható adatok jelzésére szolgál, amelyeket a szövegmezőbe kell helyezni.

A jelszó elem a karaktereket csillagokká alakítja, amikor azokat a szövegmezőbe írja be. Ezért ha a számítógép képernyőjét mások látják, akkor nem látják a megadott jelszót.

Példa a jelszóelemre


A Button Tag használata

Egy űrlapon általában két különböző típusú gomb található. Az első a Küldés gomb, amely elküldi az űrlapon megadott adatokat az action attribútumhoz rendelt értékhez (amely a < űrlap> címke).

Példa a Küldés gombra

Submit

A második típusú gomb, amelyet általában űrlapon használnak, egy reset gomb, amely törli az adatokat egy űrlapon, így a felhasználó friss adatokat vihet be. Az címke a típus attribútum, amely a gomb funkciójának jelzésére szolgál. A fenti példában a típus attribútum az érték hozzárendelése Beküldés , ezért egy olyan gomb, amelynek a típus értéke Visszaállítás az űrlap visszaállítására szolgál.

Példa a Reset gombra

Reset

Űrlap létrehozása

Egy egyszerű űrlap létrehozásához HTML -ben csatolnia kell a fent említett elemeket a címke.

Példa az űrlap létrehozására






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




A fenti kód a következő formátumot hozza létre:

miért nevezik azt törpfióknak

Most létrehozhat egyszerű űrlapot HTML -ben

Ez a cikk az összes eszközt tartalmazza a funkcionális HTML űrlap létrehozásához. Azonosítja a különböző HTML -címkéket, amelyeket az űrlapkészítés során használnak, és feltárja a címkékkel használható különböző attribútumokat.

A webhelyeken látható legtöbb űrlapnak azonban van egy további összetevője; CSS, amely a forma életre keltésére és esztétikusabbá tételére szolgál.

Részvény Részvény Csipog Email Az alapvető CSS3 tulajdonságok csalólapja

Az alapvető CSS szintaxis elsajátítása a CSS3 tulajdonságok csalólapjával.

Olvassa tovább
Kapcsolódó témák
  • Programozás
  • HTML
  • Webfejlesztés
  • Kódolási oktatóanyagok
A szerzőről Kadeisha Kean(21 cikk megjelent)

Kadeisha Kean Full Stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legösszetettebb technológiai fogalmakat; olyan anyagot állít elő, amelyet minden technológiai kezdő könnyen megért. Szenvedélyesen ír, érdekes szoftvereket fejleszt és utazik a világban (dokumentumfilmeken keresztül).

Bővebben: Kadeisha Kean

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide