HTML yra svarbus HTML formos elementas. Įvesties elemento atributas „type“ gali būti įvairių tipų, kurie apibrėžia informacijos lauką. Pavyzdžiui, suteikia teksto laukelį.

Toliau pateikiamas visų tipų HTML elementų sąrašas.

HTML5 pridėjo naujų elementų tipų. Toliau pateikiamas HTML5 elementų tipų sąrašas

Toliau pateikiamas elementų tipų aprašymas su pavyzdžiais.

1. :

„teksto“ tipo elementai naudojami vienos eilutės įvesties teksto laukui apibrėžti.

Pavyzdys:

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

Išvestis:

Įvesties „teksto“ tipas:

The 'tekstas' laukas apibrėžia vienos eilutės įvesties teksto lauką.

Pastaba: Numatytasis maksimalus simbolių ilgis yra 20.

2. :

Elementas, kurio tipas yra „slaptažodis“, leidžia vartotojui saugiai įvesti slaptažodį tinklalapyje. Įvestas slaptažodžio tekstas konvertuotas į „*“ arba „.“, kad jo negalėtų perskaityti kitas vartotojas.

Pavyzdys:

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

Išvestis:

Įveskite „slaptažodžio“ tipą:

The 'Slaptažodis' laukas apibrėžia vienos eilutės įvesties slaptažodžio lauką, kad būtų galima saugiai įvesti slaptažodį.

topologijos

3. :

Tipo „pateikti“ elementas apibrėžia pateikimo mygtuką, skirtą formai pateikti serveriui, kai įvyksta „paspaudimo“ įvykis.

Pavyzdys:

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

Išvestis:

Įvesties „pateikti“ tipas:

Paspaudus mygtuką pateikti, forma bus pateikta serveriui ir puslapis bus nukreiptas į veiksmas vertė.Apie atributą „veiksmas“ sužinosime vėlesniuose skyriuose

4. :

Tipas „nustatyti iš naujo“ taip pat apibrėžiamas kaip mygtukas, bet kai vartotojas atlieka paspaudimo įvykį, pagal numatytuosius nustatymus iš naujo nustatomos visos įvestos reikšmės.

Pavyzdys:

 User id: Password: <br> <br> 

Išvestis:

Įvesties „atstatyti“ tipas:

Pabandykite pakeisti vartotojo ID ir slaptažodžio įvesties reikšmes, tada, kai spustelėsite atstatyti, įvesties laukai bus iš naujo nustatyti su numatytosiomis reikšmėmis.

5. :

Tipas „radio“ apibrėžia radijo mygtukus, kurie leidžia pasirinkti parinktį tarp susijusių parinkčių rinkinio. Vienu metu galima pasirinkti tik vieną radijo mygtuko parinktį.

"eulerio numeris java"

Pavyzdys:

Prašome pasirinkti savo mėgstamą spalvą

Išvestis:

Įveskite „radijo“ tipą

Prašome pasirinkti savo mėgstamą spalvą

6. :

Tipas „žymimieji langeliai“ rodomi kaip kvadratiniai langeliai, kuriuos galima pažymėti arba atžymėti, kad būtų galima pasirinkti pasirinkimus iš pateiktų parinkčių.

Pastaba: „radijo“ mygtukai yra panašūs į žymimuosius langelius, tačiau yra svarbus skirtumas tarp abiejų tipų: radijo mygtukai leidžia vartotojui vienu metu pasirinkti tik vieną parinktį, o žymės langelis leidžia vartotojui vienu metu pasirinkti nuo nulio iki kelių parinkčių. .

Pavyzdys:

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

Išvestis:

stygos c

Įveskite žymės langelio tipą

Registracijos forma

Prašome pasirinkti savo mėgstamą sporto šaką

7. :

Tipas „mygtukas“ apibrėžia paprastą spaudimo mygtuką, kurį galima užprogramuoti valdyti bet kokį įvykį, pvz., paspaudimo įvykį.

Pastaba: daugiausia veikia su JavaScript.

Pavyzdys:

Išvestis:

Įveskite „mygtuko“ tipą.

Spustelėkite mygtuką norėdami pamatyti rezultatą:

Pastaba: Aukščiau pateiktame pavyzdyje naudojome JS „perspėjimą“, kurį sužinosite mūsų JS mokymo programoje. Jis naudojamas iššokančiam langui rodyti.

8. :

Elementas, kurio tipas yra „failas“, naudojamas pasirinkti vieną ar daugiau failų iš vartotojo įrenginio saugyklos. Pasirinkus failą ir po pateikimo jį galima įkelti į serverį naudojant JS kodą ir failo API.

Pavyzdys:

 Select file to upload: 

Išvestis:

Įveskite „failo“ tipą.

Galime pasirinkti bet kokio tipo failą, kol jo nenurodysime! Pasirinktas failas bus rodomas šalia parinkties „Pasirinkti failą“.

9. :

Tipas „vaizdas“ naudojamas pateikti mygtuką vaizdo pavidalu.

Pavyzdys:

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

HTML5 naujai pridėtas tipų elementas

1. :

Tipas „spalva“ naudojamas apibrėžti įvesties lauką, kuriame yra spalva. Tai leidžia vartotojui nurodyti spalvą naudojant vaizdinę spalvų sąsają naršyklėje.

Pastaba: „Spalvos“ tipas palaiko tik šešioliktainio formato spalvos reikšmę, o numatytoji reikšmė yra #000000 (juoda).

Pavyzdys:

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

Išvestis:

Įvesties „spalvos“ tipai:

Pastaba: Numatytoji 'spalvos' tipo reikšmė yra #000000 (juoda). Jis palaiko tik šešioliktainio formato spalvų reikšmę.

2. :

Tipo „data“ elementas sukuria įvesties lauką, leidžiantį vartotojui įvesti datą tam tikru formatu. Vartotojas gali įvesti datą teksto lauke arba datos rinkiklio sąsajoje.

Pavyzdys:

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

Išvestis:

Įveskite „datos“ tipą

3. :

Tipo „datetime-local“ elementas sukuria įvestį, leidžiantį vartotojui pasirinkti datą ir vietinį laiką valandomis ir minutėmis be laiko juostos informacijos.

xampp alternatyva

Pavyzdys:

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

Išvestis:

Įveskite tipą „data ir laikas-vietinis“.

4. :

Tipas „email“ sukuria įvestį, leidžiantį vartotojui įvesti el. pašto adresą su modelio patvirtinimu. Keli atributai leidžia vartotojui įvesti daugiau nei vieną el. pašto adresą.

Pavyzdys:

 <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> 

Išvestis:

Įveskite „el. pašto“ tipą

Pastaba: Vartotojas taip pat gali įvesti kelis el. pašto adresus, atskirdamas kableliais arba tarpais, kaip nurodyta toliau:

5. :

Tipas „mėnuo“ sukuria įvesties lauką, leidžiantį vartotojui lengvai įvesti mėnesį ir metus formatu „MM, YYYY“, kur MM apibrėžia mėnesio reikšmę, o YYYY – metų reikšmę. Nauja

Pavyzdys:

 Enter your Birth Month-year: 

Išvestis:

Įveskite „mėnesio“ tipą:

6. :

Elemento tipo numeris sukuria įvestį, leidžiantį vartotojui įvesti skaitinę reikšmę. Taip pat galite apriboti minimalios ir didžiausios vertės įvedimą naudodami atributą min ir max.

Pavyzdys:

 Enter your age: 

Išvestis:

Įveskite „numerio“ tipą

Pastaba: Tai leis įvesti skaičių diapazone nuo 50 iki 80. Jei norite įvesti kitą skaičių, o ne diapazoną, bus rodoma klaida.

7. :

„url“ tipo elementas sukuria įvestį, leidžiantį vartotojui įvesti URL.

Pavyzdys:

 Enter your website URL: <br> 

Išvestis:

Įveskite „url“ tipą

8. :

Tipo savaitė sukuria įvesties lauką, leidžiantį vartotojui pasirinkti savaitę ir metus iš išskleidžiamojo kalendoriaus be laiko juostos.

Pavyzdys:

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

Išvestis:

js rinkinys

Įveskite „savaitės“ tipą

9. :

Tipas „search“ sukuria įvestį, leidžiantį vartotojui įvesti paieškos eilutę. Jie yra funkciškai simetriški teksto įvesties tipui, tačiau gali būti kitokio stiliaus.

Pavyzdys:

 Search here: 

Išvestis:

Įveskite „paieškos“ tipą

10. :

Tipo ?tel? sukuria įvestį, įrašytą telefono numeriui įvesti. „Tel“ tipas neturi numatytojo patvirtinimo, pvz., el. pašto, nes telefono numerio šablonas gali skirtis visame pasaulyje.

Pavyzdys:

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

Išvestis:

Įveskite „tel“ tipą

Pastaba: Čia mes naudojame du atributus, kurie yra „paternas“ ir „required“, kurie leis vartotojui įvesti numerį tam tikru formatu, o jį reikia įvesti į įvesties lauką.