V HTML je pomemben element oblike HTML. Atribut 'type' vhodnega elementa je lahko različnih vrst, kar določa informacijsko polje. Kot daje besedilno polje.

Sledi seznam vseh vrst elementov HTML.

HTML5 je elementu dodal nove vrste. Sledi seznam vrst elementov HTML5

Sledi opis vrst elementov s primeri.

1. :

element tipa 'besedilo' se uporablja za definiranje enovrstičnega polja za vnos besedila.

primer:

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

Izhod:

Vrsta vnosa 'besedilo':

The 'besedilo' definira enovrstično besedilno polje za vnos.

Opomba: Privzeta največja dolžina cahracterja je 20.

2. :

Element tipa 'geslo' omogoča uporabniku varen vnos gesla na spletni strani. Vneseno besedilo v polju za geslo se pretvori v '*' ali '.', tako da ga drug uporabnik ne more prebrati.

primer:

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

Izhod:

Vnesite vrsto 'gesla':

The 'geslo' polje definira enovrstično polje za vnos gesla za varen vnos gesla.

3. :

Element tipa 'submit' definira gumb za oddajo za pošiljanje obrazca strežniku, ko pride do dogodka 'click'.

primer:

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

Izhod:

Vrsta vnosa 'pošlji':

Po kliku na gumb za oddajo bo to poslalo obrazec na strežnik in preusmerilo stran na ukrepanje vrednost. O atributu 'dejanje' bomo izvedeli v naslednjih poglavjih

4. :

Vrsta 'ponastavi' je prav tako opredeljena kot gumb, vendar ko uporabnik izvede klik, privzeto ponastavi vse vnesene vrednosti.

primer:

 User id: Password: <br> <br> 

Izhod:

Vrsta vnosa 'ponastavi':

Poskusite spremeniti vnosne vrednosti ID-ja uporabnika in gesla, nato pa, ko kliknete na ponastavi, bodo polja za vnos ponastavljena na privzete vrednosti.

5. :

Tip 'radio' določa izbirne gumbe, ki omogočajo izbiro možnosti med naborom povezanih možnosti. Naenkrat je lahko izbrana samo ena možnost izbirnega gumba.

primer:

Vljudno izberite svojo najljubšo barvo

vaja programskega jezika java

Izhod:

Vrsta vnosa 'radio'.

Vljudno izberite svojo najljubšo barvo

6. :

Vrsta 'potrditveno polje' je prikazana kot kvadratna polja, ki jih je mogoče označiti ali počistiti, da izberete izbire med danimi možnostmi.

Opomba: »Radijski« gumbi so podobni potrditvenim poljem, vendar obstaja pomembna razlika med obema vrstama: radijski gumbi omogočajo uporabniku, da izbere samo eno možnost naenkrat, medtem ko potrditveno polje omogoča uporabniku, da izbere nič do več možnosti hkrati .

primer:

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

Izhod:

Vnesite vrsto 'potrditvenega polja'

Obrazec za registracijo

Vljudno izberite svoje najljubše športe

7. :

Vrsta 'gumb' opredeljuje preprost potisni gumb, ki ga je mogoče programirati za funkcionalen nadzor katerega koli dogodka, kot je dogodek klika.

Opomba: Deluje predvsem z JavaScriptom.

primer:

Izhod:

Vrsta vnosa 'gumb'.

Za ogled rezultata kliknite gumb:

Opomba: V zgornjem primeru smo uporabili 'opozorilo' JS, ki ga boste izvedeli v naši vadnici JS. Uporablja se za prikaz pojavnega okna.

8. :

Element z vrsto 'datoteka' se uporablja za izbiro ene ali več datotek iz pomnilnika uporabniške naprave. Ko izberete datoteko in jo po predložitvi lahko naložite na strežnik s pomočjo kode JS in API-ja za datoteke.

primer:

 Select file to upload: 

Izhod:

Vnesite vrsto datoteke.

Izberemo lahko katero koli vrsto datoteke, dokler je ne določimo! Izbrana datoteka se bo pojavila poleg možnosti »izberi datoteko«.

9. :

Tip 'image' se uporablja za predstavitev gumba za oddajo v obliki slike.

primer:

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

Na novo dodan element vrst HTML5

1. :

Vrsta 'barva' se uporablja za definiranje vnosnega polja, ki vsebuje barvo. Uporabniku omogoča določitev barve z vizualnim barvnim vmesnikom v brskalniku.

Opomba: tip 'barva' podpira samo vrednost barve v šestnajstiški obliki, privzeta vrednost pa je #000000 (črna).

primer:

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

Izhod:

Vnesite vrste barv:

Opomba: Privzeta vrednost vrste 'barva' je #000000 (črna). Podpira le vrednost barve v šestnajstiški obliki.

pretvorba niza v json v javi

2. :

Element tipa 'datum' generira vnosno polje, ki uporabniku omogoča vnos datuma v danem formatu. Uporabnik lahko vnese datum z besedilnim poljem ali z vmesnikom za izbiro datuma.

primer:

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

Izhod:

Vnesite vrsto 'datum'

3. :

Element tipa 'datetime-local' ustvari vnosno polje, ki uporabniku omogoča izbiro datuma in lokalnega časa v uri in minuti brez informacij o časovnem pasu.

primer:

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

Izhod:

Vnesite vrsto 'datetime-local'

4. :

Tip 'e-pošta' ustvari vnosno polje, ki uporabniku omogoča vnos e-poštnega naslova s ​​preverjanjem vzorca. Več atributov omogoča uporabniku, da vnese več kot en e-poštni naslov.

primer:

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

Izhod:

Vnesite vrsto 'e-pošte'

Opomba: Uporabnik lahko vnese tudi več e-poštnih naslovov, ki jih ločite z vejico ali presledkom, kot sledi:

5. :

Tip 'mesec' ustvari vnosno polje, ki uporabniku omogoča enostaven vnos meseca in leta v obliki 'MM, LLLL', kjer MM določa vrednost meseca, LLLL pa vrednost leta. Novo

primer:

 Enter your Birth Month-year: 

Izhod:

Vrsta vnosa 'mesec':

6. :

Številka vrste elementa ustvari vnosno polje, ki uporabniku omogoča vnos številske vrednosti. Omejite lahko tudi vnos najmanjše in največje vrednosti z uporabo atributa min in max.

primer:

 Enter your age: 

Izhod:

Vnesite vrsto 'številka'

Opomba: Omogoča vnos števila v območju 50-80. Če želite vnesti številko, ki ni obseg, bo prikazana napaka.

7. :

Element tipa 'url' ustvari vnosno polje, ki uporabniku omogoča vnos URL-ja.

primer:

 Enter your website URL: <br> 

Izhod:

Vnesite vrsto 'url'

8. :

Tip teden ustvari vnosno polje, ki uporabniku omogoča izbiro tedna in leta iz spustnega koledarja brez časovnega pasu.

primer:

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

Izhod:

Vnesite tip 'teden'

9. :

Tip 'iskanje' ustvari vnosno polje, ki uporabniku omogoča vnos iskalnega niza. Ti so funkcionalno simetrični glede na vrsto vnosa besedila, vendar so lahko oblikovani drugače.

pawandeep rajan

primer:

 Search here: 

Izhod:

Vnesite vrsto 'iskanje'

10. :

Element tipa ?tel? ustvari vnosno polje za vnos telefonske številke. Vrsta »tel« nima privzetega preverjanja, kot je e-pošta, ker se lahko vzorec telefonske številke po svetu razlikuje.

primer:

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

Izhod:

Vnesite tip 'tel'

Opomba: Tukaj uporabljamo dva atributa, in sicer 'vzorec' in 'zahtevan', ki bosta uporabniku omogočila vnos številke v danem formatu, številko pa je treba vnesti v vnosno polje.