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
TypnummerDATE TYPE ATTRIBUTE (DATE)Typnummer
Passage nummer (1-40):
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.
E -POSTTYP ATTRIBUTEFärgtyp
Välj en färg:
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.
URL TYPE ATTRIBUTEE -posttyp
Skriv in e-mail:
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.
ATTRIBUTER OCH EGENSKAPER FÖR HTML5Url -typ
Skriv in e-mail:
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.
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.Autofullständigt attribut
Namn:
E-post:
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.
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.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:
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
5. Lista och datalistattributFormattribut
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:
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.
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ängLista och datalisttypattribut