A HTML-ben a HTML-forma fontos eleme. A bemeneti elem 'type' attribútuma többféle típusú lehet, ami meghatározza az információs mezőt. Például ad egy szövegdobozt.

Az alábbiakban felsoroljuk a HTML összes elemét.

A HTML5 új típusokat adott az elemhez. Az alábbiakban a HTML5 elemtípusainak listája található

Az alábbiakban az elemtípusok leírása található példákkal.

1. :

A 'text' típusú elem egysoros beviteli szövegmező meghatározására szolgál.

Példa:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Kimenet:

Szöveg beviteli típusa:

A 'szöveg' mező egy egysoros beviteli szövegmezőt határoz meg.

Jegyzet: Az alapértelmezett maximális karakterhossz 20.

2. :

A „password” típusú elem lehetővé teszi a felhasználó számára, hogy biztonságosan beírja a jelszót a weboldalon. A beírt jelszót „*” vagy „.” karakterré alakították át, így más felhasználó nem tudja elolvasni.

Példa:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Kimenet:

Adja meg a „jelszó” típusát:

A 'Jelszó' mező meghatároz egy egysoros beviteli jelszómezőt a jelszó biztonságos megadásához.

3. :

A „submit” típusú elem egy küldés gombot határoz meg, amellyel elküldi az űrlapot a szervernek, amikor a „click” esemény bekövetkezik.

Példa:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Kimenet:

Beviteli 'elküldés' típusa:

A küldés gombra kattintás után elküldi az űrlapot a szervernek, és átirányítja az oldalt akció érték.Az 'action' attribútumról a későbbi fejezetekben fogunk tanulni

4. :

A „reset” típus szintén gombként van definiálva, de amikor a felhasználó kattintási eseményt hajt végre, akkor alapértelmezés szerint visszaállítja az összes bevitt értéket.

Példa:

 User id: Password: <br> <br> 

Kimenet:

Beviteli 'reset' típus:

Próbálja meg megváltoztatni a felhasználói azonosító és jelszó beviteli értékeit, majd amikor a reset gombra kattint, a beviteli mezőket alapértékre állítja vissza.

5. :

A „rádió” típus határozza meg a választógombokat, amelyek lehetővé teszik a választást a kapcsolódó opciók halmaza között. Egyszerre csak egy rádiógomb opció választható ki.

Példa:

Kérjük, válassza ki kedvenc színét

Kimenet:

Adja meg a „rádió” típusát

Kérjük, válassza ki kedvenc színét

6. :

A 'checkbox' típus négyzet alakú négyzetként jelenik meg, amelyek bejelölésével vagy kipipálásával kiválaszthatja a lehetőségeket a megadott lehetőségek közül.

Megjegyzés: A 'rádió' gombok hasonlóak a jelölőnégyzetekhez, de van egy fontos különbség a két típus között: a választógombok lehetővé teszik a felhasználó számára, hogy egyszerre csak egy opciót válasszon, míg a jelölőnégyzet lehetővé teszi, hogy a felhasználó egyszerre nullától több beállítást válasszon. .

Példa:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Kimenet:

Írja be a „jelölőnégyzet” típusát

Regisztrációs űrlap

Kérjük, válassza ki kedvenc sportágait

7. :

A 'button' típus egy egyszerű nyomógombot definiál, amely programozható bármely esemény, például kattintási esemény funkcionális vezérlésére.

sorozat a postgres

Megjegyzés: Főleg JavaScripttel működik.

Példa:

Kimenet:

Írja be a „gomb” típusát.

Kattintson a gombra az eredmény megtekintéséhez:

Megjegyzés: A fenti példában a JS „figyelmeztetését” használtuk, amelyet a JS oktatóanyagunkból fog megtudni. Egy felugró ablak megjelenítésére szolgál.

8. :

A „file” típusú elem egy vagy több fájl kiválasztására szolgál a felhasználói eszköz tárhelyéről. Miután kiválasztotta a fájlt, és a beküldést követően ez a fájl feltölthető a szerverre a JS kód és a fájl API segítségével.

Példa:

 Select file to upload: 

Kimenet:

Írja be a 'fájl' típusát.

Bármilyen típusú fájlt választhatunk, amíg nem adjuk meg! A kiválasztott fájl megjelenik a „fájl kiválasztása” opció mellett

9. :

Az „image” típus a beküldő gomb kép formájában történő megjelenítésére szolgál.

Példa:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

HTML5 újonnan hozzáadott típusú elem

1. :

A „szín” típus egy színt tartalmazó beviteli mező meghatározására szolgál. Lehetővé teszi a felhasználó számára, hogy a böngésző vizuális színfelületén adja meg a színt.

Megjegyzés: A „szín” típus csak hexadecimális formátumú színértéket támogat, az alapértelmezett érték pedig #000000 (fekete).

Példa:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Kimenet:

Beviteli „szín” típusok:

Jegyzet: A „szín” típus alapértelmezett értéke #000000 (fekete). Csak hexadecimális formátumban támogatja a színértéket.

konvertálja a logikai értéket karakterláncra

2. :

A „date” típusú elem egy beviteli mezőt generál, amely lehetővé teszi a felhasználó számára, hogy adott formátumban adja meg a dátumot. A felhasználó megadhatja a dátumot szöveges mezőben vagy dátumválasztó felületen.

Példa:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Kimenet:

Adja meg a „dátum” típusát

3. :

A 'datetime-local' típusú elem olyan beviteli fájlt hoz létre, amely lehetővé teszi a felhasználó számára a dátum és a helyi idő kiválasztását órában és percben, időzóna információ nélkül.

Példa:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Kimenet:

Adja meg a „datetime-local” típust

4. :

Az 'e-mail' típus egy bemenetet hoz létre, amely lehetővé teszi a felhasználó számára az e-mail cím megadását a minta érvényesítésével. A több attribútum lehetővé teszi, hogy a felhasználó egynél több e-mail címet adjon meg.

Példa:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

Kimenet:

Adja meg az „e-mail” típusát

Jegyzet: A felhasználó több e-mail címet is megadhat vesszővel vagy szóközzel elválasztva a következőképpen:

5. :

A „hónap” típus létrehoz egy beviteli mezőt, amely lehetővé teszi a felhasználó számára, hogy könnyen beírja a hónapot és az évet „HH, ÉÉÉÉ” formátumban, ahol a MM a hónap értéket, az ÉÉÉÉ pedig az év értékét határozza meg. Új

Példa:

 Enter your Birth Month-year: 

Kimenet:

'Hónap' beviteli típusa:

6. :

Az elemtípus száma bemenetet hoz létre, amely lehetővé teszi a felhasználó számára a számérték megadását. Korlátozhatja a minimális és maximális érték megadását a min és max attribútum használatával.

Példa:

 Enter your age: 

Kimenet:

Írja be a „szám” típusát

Jegyzet: Lehetővé teszi számok bevitelét 50-80 tartományban. Ha a tartománytól eltérő számot szeretne megadni, hibaüzenet jelenik meg.

7. :

Az „url” típusú elem egy bemeneti fájlt hoz létre, amely lehetővé teszi a felhasználó számára az URL megadását.

Példa:

 Enter your website URL: <br> 

Kimenet:

Adja meg az „url” típust

8. :

A hét típus létrehoz egy beviteli mezőt, amely lehetővé teszi a felhasználó számára, hogy időzóna nélkül válasszon egy hetet és évet a legördülő naptárból.

Példa:

 <b>Select your best week of year:</b> <br> <br> 

Kimenet:

Írja be a „hét” típust

9. :

A 'search' típus egy bemenetet hoz létre, amely lehetővé teszi a felhasználó számára, hogy beírjon egy keresési karakterláncot. Ezek funkcionálisan szimmetrikusak a szövegbeviteli típushoz, de eltérő stílusúak lehetnek.

Példa:

 Search here: 

Kimenet:

Írja be a „keresés” típusát

10. :

A ?tel? létrehoz egy bevitelt a telefonszám megadásához. A „tel” típusnak nincs alapértelmezett érvényesítése, például e-mail, mivel a telefonszámok mintája világszerte változhat.

Példa:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Kimenet:

Írja be a „tel” típust

Jegyzet: Itt két attribútumot használunk, amelyek a 'minta' és a 'kötelező', amelyek lehetővé teszik a felhasználó számára a szám megadását az adott formátumban, és kötelező a szám megadása a beviteli mezőben.