HTML5 elementai formoms ir duomenims

HTML5 apima naujus elementus, kad būtų lengviau kurti duomenų laukus, kurie daugeliu atvejų turėjo būti užprogramuoti naudojant „JavaScript“ arba pridėti išorinę biblioteką kalba, kuri leistų išplėsti xhtml ir html4 elementų galimybes.
Daugelis programuotojų ir toliau dirba tradiciniu būdu, nes tai palaiko dauguma naršyklių, o naujausius patobulinimus palaiko tik naujesnės versijos.
HTML5 siūlo naujų atributų rinkinį įvesties elemento tipo atributui, tai yra daugumai formos elementų, pvz., Teksto laukelių.
Kai kurie iš šių gerai žinomų html atributų yra šie:
Įvesties tipas = tekstas - teksto laukelis
įvesties tipas = slaptažodis - Slaptažodžio laukas, kuris slepia slaptažodį su žvaigždutėmis.
Įvesties tipas = pateikti - Formų pateikimo mygtukas
NUMERIO TIPO ATTRIBUTŲ REGISTRAS
Elementas, kuriame yra tipo numerio atributas, leidžia ne tik nustatyti, kad įvesta vertė yra skaitinė, bet ir apriboti ją nuo didžiausios iki minimalios, paveikslėlyje matome, kaip ji taip pat turi patvirtinimą, nereikia nieko programuoti

Šio atributo naudojimo pavyzdžio šaltinio kodas yra toks

 Tipo numeris
Tipo numeris
Praėjimo numeris (1-40):

DATE TYPE ATTRIBUTE (DATE)
Atributas datos tipas naudojamas laukams, kuriuose būtina nurodyti datą. Atsižvelgiant į naršyklę ir jų siūlomą palaikymą, pasirodys kalendoriaus valdiklis, galintis pasirinkti datą.

SPALVOS TIPO ATTRIBUTAS
Spalvos tipo atributas naudojamas laukams, kuriuose būtina nurodyti spalvą. Atsižvelgiant į naršyklę ir jų siūlomą palaikymą, pasirodys, kad spalvų parinkiklio tipo valdiklis galės pasirinkti spalvą arba parašyti spalvą šešioliktainiu. Spustelėjus spalvą, parinkiklis pasirodys kaip iššokantis langas.

Spalvos tipas
Pasirinkite spalvą:

PAŠTO TIPO ATTRIBUTAS
El. Pašto tipo atributas naudojamas laukams, kuriuose būtina nurodyti el. Atsižvelgiant į naršyklę ir jų siūlomą palaikymą, ji patvirtins, kad įvestas tekstas yra el. Laiško formato, kitaip pasirodys klaidos pranešimas, tai palengvins formos patvirtinimą be programavimo.

El. Pašto tipas
Įveskite el. Pašto adresą:

URL TIPO ATTRIBUTAS
Atributas „url type“ naudojamas laukams, kuriuose būtina nurodyti domeną, URL. Priklausomai nuo naršyklės ir jų siūlomos paramos, ji patvirtins, kad įvestas tekstas yra domeno formato, tačiau pasirodys klaidos pranešimas, kuris palengvins formos patvirtinimą be programavimo. Jame nebūtinai turi būti http arba www, tokiu atveju, jei to reikalaujame, turėsime jį patvirtinti programuodami.

URL tipas
Įveskite el. Pašto adresą:

HTML5 PRIEMONĖS IR SAVYBĖS
1. Automatinio užbaigimo atributas
Kai rašome formos lauke, pastebime, kad paprastai naršyklė suteiks mums galimybę automatiškai užbaigti tai, ką tuo metu rašome, su tekstu, su kuriuo jau rašėme anksčiau, tai gali sukelti saugumo problemų, nes, pvz. rašome kelis el. laiškus, nes kompiuterį naudojo kitas vartotojas, galėjome rašyti norėdami pamatyti informaciją, kurią įvedė kitas vartotojas. Pavyzdyje mes išjungiame automatinį užbaigimą laiškuose, bet ne kituose laukuose. Jį taip pat galima išjungti naršyklėje, tačiau daugelis vartotojų nežino, kad ši parinktis egzistuoja, arba kaip išjungti automatinį užbaigimą.

Automatinio užbaigimo atributas
Vardas:
El. Paštas:

Matome, kad įvedus žodį Automatinis užbaigimas ir pateikiant, kai vėliau pasiekiama ta pati forma ir paspaudžiama tik raidė A, šiuo atveju jis jau siūlo žodį, kurį buvome parašę anksčiau.

2. Automatinio fokusavimo atributas
Šis atributas naudojamas nurodyti, kurioje formos įvestyje žymeklis turi būti padėtas, kai įkeliamas tinklalapis, o jei jo nėra, jis prasidės nuo pirmojo, kurį jis randa. Tai taip pat galima užprogramuoti naudojant „jQuery“, kad prireikus būtų galima sutelkti dėmesį į skirtingus valdiklius.

3. Formos atributas
Šis atributas yra labai naudingas valdant elementus už formos ribų, neatsižvelgiant į tai, kur jis yra žiniatinklio struktūroje.

Formos atributas
Produktas:
Apibūdinimas:


„Lorem Ipsum“ yra tiesiog netikras spausdinimo ir spausdinimo pramonės tekstas.
„Lorem Ipsum“ yra tiesiog netikras spausdinimo ir spausdinimo pramonės tekstas.
„Lorem Ipsum“ yra tiesiog netikras spausdinimo ir spausdinimo pramonės tekstas.
Sandėlyje: 

HTML šaltinio kode matome, kad sukūrėme formą, skirtą įvesti produkto duomenis, tada tam tikrą paaiškinamąjį tekstą ir galiausiai įdėjome akcijos teksto lauką už formos ribų, tačiau susiejame jį su šia forma per jo identifikavimo ID = "FormA" pagrindiniame teksto laukelyje nurodysime, kad susiesime ją su forma form = "formA", tokiu būdu siunčiant formą taip pat bus siunčiami visi susiję elementai.
4. FormAction atributas
Šis atributas yra labai naudingas siunčiant tą pačią formą į skirtingus puslapius, ką anksčiau reikėjo užprogramuoti „JavaScript“ ir siųsti visų formos elementų parametrus, kad būtų galima ją persiųsti, kai kuriais atvejais ji tapo labai sudėtinga, ypač jei buvo daug formų, kurios priklausė viena nuo kitos.
Paimame ankstesnio atvejo pavyzdį mygtuku, kurį siunčiame į įrašą.php, o kitą - į atsargos.php

Formos atributas
Produktas:
Apibūdinimas:


„Lorem Ipsum“ yra tiesiog netikras spausdinimo ir spausdinimo pramonės tekstas.

„Lorem Ipsum“ yra tiesiog netikras spausdinimo ir spausdinimo pramonės tekstas.
„Lorem Ipsum“ yra tiesiog netikras spausdinimo ir spausdinimo pramonės tekstas.
Atsarga: vaizdo atributas su pateikimu Jei norime naudoti atvaizdą kaip formos pateikimo mygtuką, vienintelis būdas tai padaryti buvo įdėti vaizdą arba naudoti css stiliaus lapus ir tada atlikti funkcijas naudojant „javascript“.
Vaizdo tipo atributas
Produktas:
Apibūdinimas:

5. Sąrašas ir Datalisto atributas
Šis atributas leidžia apibrėžti elemento sąrašą ir pritaikyti jį įvesties elementui, kad jis atliktų paiešką, kai rašome.

Sąrašo ir duomenų sąrašo tipo atributas

Matome, kad rašant tik vieną raidę šiuo atveju f, rodomas sąrašas su rastomis galimybėmis, tai labai naudinga, nes jis atlieka duomenų sąraše esančių duomenų filtrą ir gali būti pakartotinai naudojamas kituose valdikliuose ar elementuose.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką