✅ HTML5 elementi formām un datiem

Satura rādītājs

HTML5 ietver jaunus elementus, lai atvieglotu datu lauku izveidi, kas daudzos gadījumos bija jāprogrammē ar javascript vai jāpievieno ārēja bibliotēka valodā, kas ļautu paplašināt xhtml un html4 elementu iespējas.
Daudzi programmētāji turpina strādāt tradicionālā veidā, jo to atbalsta lielākā daļa pārlūkprogrammu, jaunākos uzlabojumus atbalsta tikai jaunākās versijas.
HTML5 piedāvā jaunu atribūtu kopu ievades elementa tipa atribūtam, tas ir, lielākajai daļai veidlapas elementu, piemēram, tekstlodziņiem.
Daži no šiem labi zināmajiem html atribūtiem ir:
Ievades veids = teksts - teksta lodziņš
ievades veids = parole - Paroles lauks, kas paslēpj paroli ar zvaigznītēm.
Ievades veids = iesniegt - poga veidlapu iesniegšanai
NUMBER TYPE ATTRIBUTE REEGISTER
Elements, kas satur tipa numura atribūtu, ļauj ne tikai noteikt, ka ievadītā vērtība ir skaitliska, bet arī ierobežot to starp maksimālo un minimālo, attēlā redzam, kā tam ir arī validācija bez nepieciešamības neko programmēt

Šī atribūta izmantošanas piemēra avota kods ir šāds

 Tipa numurs
Tipa numurs
Ejas numurs (1-40):

DATE TYPE ATTRIBUTE (DATE)
Datuma veida atribūts tiek izmantots laukiem, kuros nepieciešams iekļaut datumu. Atkarībā no pārlūkprogrammas un piedāvātā atbalsta parādīsies kalendāra vadīkla, lai varētu izvēlēties datumu.

KRĀSU VEIDA ATTIECĪBA
Krāsu tipa atribūts tiek izmantots laukiem, kuros ir jāiekļauj krāsa. Atkarībā no pārlūkprogrammas un piedāvātā atbalsta parādīsies krāsu atlasītāja tipa vadība, kas varēs izvēlēties krāsu vai rakstīt krāsu heksadecimālā. Noklikšķinot uz krāsas, atlasītājs parādīsies kā uznirstošais logs.

Krāsu veids
Izvēlieties krāsu:

E -PASTA VEIDA ATTRIBŪTS
E -pasta veida atribūts tiek izmantots laukiem, kur nepieciešams iekļaut e -pastu. Atkarībā no pārlūkprogrammas un piedāvātā atbalsta tas apstiprinās, ka ievadītajam tekstam ir e -pasta formāts, pretējā gadījumā tiks parādīts kļūdas ziņojums, kas atvieglos veidlapas apstiprināšanu bez programmēšanas.

E -pasta veids
Ievadiet e -pastu:

URL TYPE ATTRIBUTE
Atribūts url type tiek izmantots laukiem, kur nepieciešams iekļaut domēnu, url. Atkarībā no pārlūkprogrammas un piedāvātā atbalsta tas apstiprinās, ka ievadītajam tekstam ir domēna formāts, bet parādīsies kļūdas ziņojums, kas atvieglos veidlapas apstiprināšanu bez programmēšanas. Tam nav jāsatur http vai www; tādā gadījumā, ja mums tas būs vajadzīgs, mums tas būs jāapstiprina, izmantojot programmēšanu.

URL veids
Ievadiet e -pastu:

ATTIECĪBAS UN ĪPAŠĪBAS HTML5
1. Automātiskās pabeigšanas atribūts
Rakstot veidlapas laukā, mēs atklājam, ka parasti pārlūkprogramma mums dos iespēju automātiski pabeigt to, ko mēs tajā brīdī rakstām, ar tekstu, ar kuru mēs jau esam rakstījuši, tas var radīt drošības problēmas, jo, piemēram, mēs rakstām vairākus e -pastus, jo datoru izmantoja cits lietotājs, mēs varētu rakstīt, lai redzētu cita lietotāja ievadīto informāciju. Piemērā mēs deaktivizējam automātisko pabeigšanu pastā, bet ne citos laukos. To var atspējot arī pārlūkprogrammā, taču daudzi lietotāji nezina, ka šī opcija pastāv vai kā atspējot automātisko pabeigšanu.

Automātiskās pabeigšanas atribūts
Vārds:
E-pasts:

Mēs redzam, ka, ievadot vārdu Automātiskā pabeigšana un iesniedzot, vēlāk piekļūstot tai pašai veidlapai un nospiežot tikai burtu A, šajā gadījumā tas jau liek domāt par vārdu, ko mēs jau iepriekš bijām rakstījuši.

2. Autofokusa atribūts
Šis atribūts tiek izmantots, lai norādītu, kurā veidlapas ievadītājā kursors jānovieto, kad tiek ielādēta tīmekļa lapa; ja tā nav, tā sāksies ar pirmo atrasto. To var arī ieprogrammēt ar jQuery, lai pēc vajadzības koncentrētos uz dažādām vadīklām.

3. Veidlapas atribūts
Šis atribūts ir ļoti noderīgs, lai pārvaldītu elementus ārpus formas neatkarīgi no tā atrašanās vietas tīmekļa struktūrā.

Veidlapas atribūts

Produkts:
Apraksts:

Lorem Ipsum ir vienkāršs drukas un salikšanas nozares teksts.

Krājums:

HTML avota kodā mēs redzam, ka esam izveidojuši veidlapu produkta datu ievadīšanai, pēc tam kādu paskaidrojošu tekstu un visbeidzot ievietojam krājuma teksta lauku ārpus veidlapas, bet saistām to ar šo veidlapu, izmantojot tās identifikācijas ID = "FormA" krājuma teksta laukā norādīsim, ka mēs to saistām ar formu form = "formA", tādā veidā, nosūtot veidlapu, tiks nosūtīti arī visi saistītie elementi.
4. FormAction atribūts
Šis atribūts ir ļoti noderīgs, lai nosūtītu vienu un to pašu veidlapu uz dažādām lapām, kas iepriekš bija jāprogrammē javascript un jānosūta visu veidlapas elementu parametri, lai to varētu pārsūtīt, dažos gadījumos tas kļuva ļoti apgrūtinoši, it īpaši, ja bija vairākas formas, kas bija atkarīgas viena no otras.
Mēs ņemam piemēru no iepriekšējā gadījuma ar pogu, kuru mēs nosūtām uz lapu record.php un ar otru uz stock.php

Veidlapas atribūts

Produkts:
Apraksts:

Lorem Ipsum ir vienkāršs drukas un salikšanas nozares teksts.

Krājums: attēla atribūts ar iesniegšanu Ja mēs vēlamies izmantot attēlu kā iesniegšanas pogu, lai iesniegtu veidlapu, vienīgais veids, kā to izdarīt, bija ievietot attēlu vai izmantot css stila lapas un pēc tam veikt funkcionalitāti ar javascript.

Attēla tipa atribūts

Produkts:
Apraksts:

5. Saraksts un datālista atribūts
Šis atribūts ļauj elementā definēt sarakstu un pēc tam to piemērot ievades elementam, lai tas veiktu meklēšanu, rakstot.

Saraksta un datālista tipa atribūts

Mēs redzam, ka, rakstot tikai vienu burtu šajā gadījumā f, tiek parādīts saraksts ar atrastajām iespējām, tas ir ļoti noderīgi, jo tas veic datu saraksta ietverto datu filtru, un to var arī atkārtoti izmantot citās vadīklās vai elementos.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu