✅ HTML5 elementi za obrasce i podatke

Sadržaj

HTML5 uključuje nove elemente koji olakšavaju stvaranje podatkovnih polja koja su u mnogim slučajevima morala biti programirana pomoću javascripta ili dodati vanjsku knjižnicu na jeziku koji bi omogućio proširenje mogućnosti elemenata xhtml i html4.
Mnogi programeri nastavljaju raditi na tradicionalan način jer to podržava većina preglednika, a najnovija poboljšanja podržavaju samo novije verzije.
HTML5 nudi skup novih atributa za atribut tipa ulaznog elementa, odnosno većinu elemenata obrasca, poput tekstualnih okvira.
Neki od ovih dobro poznatih html atributa su:
Vrsta unosa = tekst - Tekstualni okvir
vrsta unosa = lozinka - Polje lozinke koje skriva lozinku sa zvjezdicama.
Vrsta unosa = pošalji - Gumb za slanje obrazaca
REGISTAR TIPA BROJA
Element koji sadrži atribut broja tipa, omogućuje ne samo da se utvrdi da je unijeta vrijednost numerička, već i da se ograniči između maksimalnog i minimalnog, na slici možemo vidjeti kako ima i provjeru valjanosti bez potrebe za programiranjem bilo čega

Izvorni kôd za primjer korištenja ovog atributa je sljedeći

 Tip broja
Tip broja
Broj prolaza (1-40):

DATUM TIP ATRIBUT (DATUM)
Atribut vrste datuma koristi se za polja u kojima je potrebno sadržavati datum. Ovisno o pregledniku i podršci koju nude, prikazat će se da kalendarska kontrola može odabrati datum.

ATRIBUT TIPA BOJE
Atribut vrste boje koristi se za polja u kojima je potrebno sadržavati boju. Ovisno o pregledniku i podršci koju nude, prikazat će se da tip kontrolera može odabrati boju ili upisati boju u heksadecimalnom obliku. Birač će se pojaviti kao skočni prozor kada se klikne na boju.

Vrsta boje
Odaberite boju:

ATRIBUT TIPA E -POŠTE
Atribut vrste e -pošte koristi se za polja u kojima je potrebno sadržavati e -poruku. Ovisno o pregledniku i podršci koju nude, provjerit će se da li uneseni tekst ima oblik e -pošte, u protivnom će se pojaviti poruka o pogrešci, što će olakšati provjeru valjanosti obrasca bez programiranja.

Vrsta e -pošte
Unesite email:

URL TIP ATRIBUTA
Atribut vrste url koristi se za polja gdje je potrebno sadržavati domenu, url. Ovisno o pregledniku i podršci koju nude, provjerit će se da li uneseni tekst ima format domene, ali pojavit će se poruka o pogrešci, što će olakšati provjeru valjanosti obrasca bez programiranja. Ne mora sadržavati http ili www. U tom slučaju, ako nam je potrebno, morat ćemo ga potvrditi programiranjem.

Vrsta URL -a
Unesite email:

ZNAČAJKE I SVOJSTVA ZA HTML5
1. Atribut automatskog dovršavanja
Kad upisujemo u polje obrasca, otkrivamo da će nam općenito preglednik dati mogućnost automatskog dovršavanja onoga što u tom trenutku pišemo tekstom s kojim smo već pisali, to može uzrokovati sigurnosne probleme jer, na primjer, ako pišemo nekoliko e -poruka jer je računalo koristio drugi korisnik, mogli bismo pisati da vidimo podatke koje je drugi korisnik unio. U primjeru deaktiviramo automatsko dovršavanje u pošti, ali ne i u drugim poljima. Također se može onemogućiti iz preglednika, ali mnogi korisnici ne znaju da ta opcija postoji ili kako onemogućiti automatsko dovršavanje.

Atribut automatskog dovršavanja
Ime:
E-mail:

Vidimo da prilikom unosa riječi Automatsko dovršavanje i podnošenja prilikom kasnijeg pristupa istom obrascu i pritiskom samo na slovo A, u ovom slučaju već se sugerira riječ koju smo prethodno napisali.

2. Atribut autofokusa
Ovaj se atribut koristi za označavanje unosa u obrazac koji bi pokazivač trebao biti pozicioniran prilikom učitavanja web stranice, ako nije prisutan, počet će s prvim koji pronađe. To se također može programirati pomoću jQueryja kako bi se po potrebi usredotočio na različite kontrole.

3. Atribut obrasca
Ovaj je atribut vrlo koristan za upravljanje elementima izvan obrasca, bez obzira na to gdje se nalazi u strukturi weba.

Atribut obrasca

Proizvod:
Opis:

Lorem Ipsum jednostavno je lažni tekst tiskarske i slovoslovne industrije.

Zaliha:

U izvornom kodu HTML -a možemo vidjeti da smo stvorili obrazac za unos podataka o proizvodu, zatim neki tekst s objašnjenjima i na kraju smo stavili tekstualno polje za zalihu izvan obrasca, ali ga povezujemo s ovim obrascem putem identifikacijskog ID -a = "FormA" u tekstualno polje stavit ćemo da ga povezujemo s form form = "formA", na taj način će se prilikom slanja obrasca poslati i svi povezani elementi.
4. Atribut FormAction
Ovaj je atribut vrlo koristan za slanje istog obrasca na različite stranice, nešto što je prethodno moralo biti programirano u javascriptu i slanje parametara svih elemenata obrasca da biste ga mogli proslijediti, u nekim je slučajevima postao vrlo glomazan, osobito ako postojalo je više oblika koji su međusobno ovisili.
Uzimamo primjer prethodnog slučaja s gumbom koji šaljemo obrazac na stranicu record.php, a drugim na stock.php

Atribut obrasca

Proizvod:
Opis:

Lorem Ipsum jednostavno je lažni tekst tiskarske i slovoslovne industrije.

Zaliha: Image attribute with submit Ako želimo koristiti sliku kao gumb za slanje za slanje obrasca, jedini način da to učinimo bio je da stavimo sliku ili upotrijebimo css tablice sa stilovima, a zatim to učinimo pomoću javascripta.

Atribut vrste slike

Proizvod:
Opis:

5. List i atribut Datalist
Ovaj atribut vam omogućuje da definirate popis u elementu, a zatim ga primijenite na ulazni element tako da izvrši pretraživanje dok tipkamo.

Atribut popisa i vrste podataka

Vidimo da se pri pisanju samo jednog slova u ovom slučaju f prikazuje popis s nađenim mogućnostima, što je vrlo korisno jer izvodi filtar podataka koje sadrži datalist, a može se i ponovno upotrijebiti u drugim kontrolama ili elementima.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod