HTML5 -element för formulär och data

Innehållsförteckning
HTML5 innehåller nya element för att underlätta skapandet av datafält som i många fall måste programmeras med javascript eller lägga till ett externt bibliotek på ett språk som gör det möjligt att utöka funktionerna för xhtml- och html4 -elementen.
Många programmerare fortsätter att arbeta på det traditionella sättet eftersom det stöds av de flesta webbläsare, de senaste förbättringarna stöds bara av de nyare versionerna.
HTML5 erbjuder en uppsättning nya attribut för typattributet för inmatningselementet, det vill säga de flesta elementen i ett formulär, till exempel textrutor.
Några av dessa välkända html-attribut är:
Inmatningstyp = text - Textruta
input type = password - Lösenordsfält som döljer lösenordet med asterisker.
Inmatningstyp = skicka - Knapp för att skicka formulär
NUMBER TYPE ATTRIBUTE REGISTER
Elementet som innehåller typnummerattributet tillåter inte bara att avgöra att det inmatade värdet är numeriskt, utan också att begränsa det mellan max och minimum, vi kan se på bilden hur det också har validering utan att behöva programmera något

Källkoden för exemplet för att använda detta attribut är följande
 Typnummer

Typnummer

Passage nummer (1-40):
DATE TYPE ATTRIBUTE (DATE)
Datumtypsattributet används för fält där det är nödvändigt att innehålla ett datum. Beroende på webbläsaren och det stöd de erbjuder, visas kalenderkontrollen för att kunna välja ett datum.

FÄRGTYP ATTRIBUT
Färgtypsattributet används för fält där det är nödvändigt att innehålla en färg. Beroende på webbläsaren och det stöd de erbjuder, kommer färgvalstypskontrollen att se ut att kunna välja en färg eller skriva färgen i hexadecimal. Väljaran visas som en popup när färgen klickas.

Färgtyp

Välj en färg:

E -POSTTYP ATTRIBUTE
E -posttypsattributet används för fält där det är nödvändigt att innehålla ett e -postmeddelande. Beroende på webbläsaren och det stöd de erbjuder, valideras det att den inmatade texten har ett e -postformat, annars visas ett felmeddelande, detta underlättar valideringen av ett formulär utan programmering.

E -posttyp

Skriv in e-mail:

URL TYPE ATTRIBUTE
URL -typattributet används för fält där det är nödvändigt att innehålla en domän, en url. Beroende på webbläsaren och det stöd de erbjuder, kommer det att validera att den inmatade texten har formatet för en domän, men ett felmeddelande visas, detta underlättar valideringen av ett formulär utan programmering. Det behöver inte innehålla http eller www, i så fall om vi behöver det måste vi validera det genom programmering.

Url -typ

Skriv in e-mail:

ATTRIBUTER OCH EGENSKAPER FÖR HTML5
1. Autofullständigt attribut
När vi skriver i ett fält i formuläret finner vi att webbläsaren i allmänhet kommer att ge oss möjlighet att autoslutföra det vi skriver just nu med text som vi redan har skrivit med tidigare, detta kan ge säkerhetsproblem eftersom till exempel om vi skriver flera e -postmeddelanden eftersom datorn användes av en annan användare, vi kan skriva för att se information som en annan användare har angett. I exemplet inaktiverar vi autofyllningen i posten, men inte i de andra fälten. Det kan också inaktiveras från webbläsaren men många användare vet inte att alternativet finns eller hur man inaktiverar autoslutförande.

Autofullständigt attribut

Namn:
E-post:
Vi ser att när du anger ordet Autoslutförande och skickar in när du öppnar samma formulär senare och trycker bara på bokstaven A, föreslår det i det här fallet redan det ord som vi hade skrivit tidigare.

2. Autofokusattribut
Detta attribut används för att ange i vilken inmatning av ett formulär markören ska placeras när webbsidan laddas, om den inte är närvarande börjar den med den första den hittar. Detta kan också programmeras med jQuery för att fokusera på olika kontroller efter behov.

3. Formattribut
Detta attribut är mycket användbart för att hantera element utanför ett formulär oavsett var det finns i webbstrukturen.

Formattribut

Produkt:
Beskrivning:

Lorem Ipsum är helt enkelt dummy -text från tryck- och typindustrin.

Lorem Ipsum är helt enkelt dummy -text från tryck- och typindustrin.

Lorem Ipsum är helt enkelt dummy -text från tryck- och typindustrin.

Stock:
Vi kan se i HTML -källkoden att vi har skapat ett formulär för att mata in data för en produkt, sedan lite förklarande text och slutligen lägger vi ett textfält för lagret utanför formuläret, men vi relaterar det till detta formulär genom dess identifikations -id = "FormA" i lagertextfältet kommer vi att sätta att vi relaterar det till formuläret formulär = "formA", på detta sätt när alla skickar formuläret kommer också att skickas.
4. FormAction -attribut
Detta attribut är mycket användbart för att skicka samma formulär till olika sidor, något som tidigare måste programmeras i javascript och skicka parametrar för alla element i formuläret för att kunna vidarebefordra det, i vissa fall blev det mycket krångligt, särskilt om det fanns flera former som var beroende av varandra.
Vi tar exemplet på föregående fall med en knapp som vi skickar formuläret till record.php -sidan och med det andra till stock.php

Formattribut

Produkt:
Beskrivning:

Lorem Ipsum är helt enkelt dummy -text från tryck- och typindustrin.

Lorem Ipsum är helt enkelt dummy -text från tryck- och typindustrin.

Lorem Ipsum är helt enkelt dummy -text från tryck- och typindustrin.

Stock: Bildattribut med skicka Om vi ​​vill använda en bild som en skicka -knapp för att skicka ett formulär, var det enda sättet att göra det att lägga en bild eller använda css -stilark och sedan göra funktionaliteten med javascript.

Bildtypsattribut

Produkt:
Beskrivning:

5. Lista och datalistattribut
Med detta attribut kan du definiera en lista i ett element och sedan tillämpa den på ett inmatningselement så att den gör en sökning när vi skriver.

Lista och datalisttypattribut

Vi ser att när du bara skriver en bokstav i det här fallet f, visas en lista med de möjligheter som finns, detta är mycket användbart eftersom det utför ett filter av data som datalist innehåller och det kan också återanvändas i andra kontroller eller element.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
wave wave wave wave wave