logo

Vrste vnosa obrazca HTML

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.

tip=' ' Opis
besedilo Določa enovrstično polje za vnos besedila
geslo Določa enovrstično polje za vnos gesla
predložiti Določa gumb za pošiljanje za pošiljanje obrazca strežniku
ponastaviti Definira gumb za ponastavitev za ponastavitev vseh vrednosti v obrazcu.
radio Določa izbirni gumb, ki omogoča izbiro ene možnosti.
potrditveno polje Določa potrditvena polja, ki omogočajo izbiro obrazca z več možnostmi.
gumb Določa preprost gumb, ki ga je mogoče programirati za izvedbo naloge ob dogodku.
mapa Določa izbiro datoteke iz pomnilnika naprave.
slika Določa grafični gumb za oddajo.

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

tip=' ' Opis
barva Določa vnosno polje z določeno barvo.
datum Določa vnosno polje za izbiro datuma.
datum-čas-lokalno Določa vnosno polje za vnos datuma brez časovnega pasu.
E-naslov Določa vnosno polje za vnos e-poštnega naslova.
mesec Določa kontrolnik z mesecem in letom, brez časovnega pasu.
število Določa vnosno polje za vnos številke.
url Določa polje za vnos URL-ja
teden Določa polje za vnos datuma s tednom in letom, brez časovnega pasu.
Iskanje Določa enovrstično besedilno polje za vnos iskalnega niza.
tel Določa vnosno polje za vnos telefonske številke.

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

Izhod:

Vrsta vnosa 'besedilo':

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

Vnesite ime

Vnesite priimek

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

Izhod:

Vnesite vrsto 'gesla':

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

Vnesite uporabniško ime

Vnesite geslo



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

Izhod:

Vrsta vnosa 'pošlji':

Vnesite uporabniško ime

Vnesite geslo


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

Izhod:

Vrsta vnosa 'ponastavi':

ID uporabnika: Geslo:

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
rdeča
modra
zelena
roza
Preizkusite zdaj

Izhod:

Vrsta vnosa 'radio'.

Vljudno izberite svojo najljubšo barvo

rdeča
modra
zelena
roza

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

Izhod:

Vnesite vrsto 'potrditvenega polja'


Obrazec za registracijo

Vnesite svoje ime:

Vljudno izberite svoje najljubše športe

Kriket
Tenis
Nogomet
Bejzbol
Badminton


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:

 
Preizkusite zdaj

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: 
Preizkusite zdaj

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

Izberite datoteko za nalaganje:

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

Izhod:

Vnesite vrste barv:

Izberite svojo najljubšo barvo:

Kliknite gor

Kliknite navzdol

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

Izhod:

Vnesite vrsto 'datum'

Izberite začetni in končni datum:

Začetni datum:

Končni 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> 
Preizkusite zdaj

Izhod:

Vnesite vrsto 'datetime-local'

Izberite urnik srečanja:

Izberite datum in uro:


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

Izhod:

Vnesite vrsto 'e-pošte'

Vnesi svoj elektronski naslov

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

Vnesite več e-poštnih naslovov

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: 
Preizkusite zdaj

Izhod:

Vrsta vnosa 'mesec':

Vnesite mesec rojstva-leto:

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: 
Preizkusite zdaj

Izhod:

Vnesite vrsto 'številka'

Vnesite svojo starost:

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

Izhod:

Vnesite vrsto 'url'

Vnesite URL svojega spletnega mesta:

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

Izhod:

Vnesite tip 'teden'

Izberite svoj najboljši teden v letu:


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: 
Preizkusite zdaj

Izhod:

Vnesite vrsto 'iskanje'

Išči tukaj:

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

Izhod:

Vnesite tip 'tel'

Vnesite svojo telefonsko številko (v obliki xxx-xxx-xxxx):

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.