Från författaren: Jag välkomnar er, kära läsare, till vår blogg om webbplatsbyggande. För att fortsätta med htm5-specifikationen, föreslår jag idag att prata om formulär och vilka nya funktioner som har dykt upp i detta avseende. Tyvärr på det här ögonblicket Inte alla webbläsare stöder fortfarande dessa funktioner, men html5-formulär börjar fortfarande användas.
Innovationer
HTML5 har så många alternativ för att utöka funktionaliteten hos formulär att de bör ägnas åt ett separat avsnitt i boken, snarare än en artikel. Idag ska vi titta på bara några av de nya funktionerna.
Nya inmatningsfält
Många nya fälttyper har dykt upp. De är alla inställda med hjälp av ingångselementet med olika typer. Några av dem:
Typ = "e-post" – det här ser ut som ett vanligt textfält, men i själva verket har det automatisk validering inbyggd. Om webbläsaren inte hittar @-tecknet, som är huvudattributet för någon e-postadress, tillåter den helt enkelt inte att ett sådant formulär skickas. Låt oss kolla in det senaste versionen Chrome, där allt detta stöds perfekt.
< form > < input type = "text" value = "Ange något" > < input type = "email" value = "Skriv in e-mail" > < input type = "submit" value = "Redo" > < / form > |
Vi skapade den enklaste formen. Öppna den här koden i en webbläsare och du kommer att se två helt identiska inmatningselement och en skicka-knapp. Tja, kom igen, försök att skriva in något slumpmässigt i det andra fältet och skicka in formuläret. Ingenting kommer att fungera, webbläsaren visar att den måste ha @-ikonen.
Det är det, och från och med nu behövs ingen validering med javascript. Detta gäller de webbläsare som stöder html5 korrekt.
Skriv = “tel” – för att ange ett telefonnummer. I allmänhet har den inte sådan validering, men det är intressant att om du fyller i ett sådant formulär från mobila enheter, när du klickar på det, kan tangentbordslayouten ändras (siffror kommer att visas). Samma sak händer i fallet med typ = e-post.
Typ = "färg" - du behöver inte ange något här. Vi är intresserade av detta av den anledningen att här kan du välja en färg, och göra det i en intuitiv palett, som i färg. Så här ser det ut:
Detta är naturligtvis inte ett obligatoriskt attribut av någon form, men idag finns det många idéer för att använda detta element.
Naturligtvis, där det inte stöds, kommer ett vanligt textfält att visas. I sådana webbläsare är det ingen mening med att visa det, användaren skriver inte manuellt vilken färg han väljer (och kanske kommer han att göra det).
Typ = datum. Urvalsfält kalenderdatum. Om det stöds av webbläsaren, så mycket bekväma verktyg, där du kan bestämma datumet, och när du klickar på triangeln expanderar kalendern till och med.
Egentligen finns det samma fält datetime och datetime-local. De är utformade för att indikera tid i dem (och tid med en explicit tidszon, respektive).
Webbläsarstöd
Faktum är att jag skulle kunna lista många fler sådana fält här, det finns verkligen många av dem, men vi måste prata om en annan viktig faktor - stöd för allt det här i webbläsare.
I denna plan Google Chrome och Opera är ett exempel för alla eftersom de stödjer absolut alla nya värderingar. Tyvärr ligger Mozilla och IE på allvar efter dem. I Explorer, endast från den tionde versionen, stöds ett par nya fält.
Välj obligatoriska fält
Kanske är en av de viktigaste möjligheterna för formulärvalidering på användarens sida. För att markera ett fält som obligatoriskt måste du lägga till ett tomt fält i det. obligatoriskt attribut.
I HTML5 räcker det att markera de obligatoriska formulärfälten med detta attribut, inga skript behöver användas. Om detta stöddes i alla webbläsare skulle det vara bra.
< input type = "date" required > |
Nu, om vi inte väljer ett datum och försöker skicka vårt formulär, kommer webbläsaren att varna att vi först måste fylla i datumfältet, eftersom det är obligatoriskt.
Ledtråd
Tidigare, om någon text behövde placeras i standardinmatningsfältet, skrevs den in där med värdeattributet. Vi gjorde likadant nu också. Men det finns ett problem - användaren måste radera den här texten själv om han vill skriva något annat, och det är inte särskilt bekvämt.
Om du skriver ett platshållarattribut istället för värde försvinner texten när användaren börjar skriva in sitt värde. Det är bekvämare.
Lista över möjliga värden
Med hjälp av datalisttaggen kan du ange en lista med möjliga värden för ett textfält. Detta implementeras så här:
< input type = "text" placeholder = "namn" list = "names" > < datalist id = "names" > datalista > |
För att binda ett fält till ett ark, skriv bara listattributet i det, vars värde kommer att vara namnet på identifieraren. Naturligtvis måste du komma ihåg att ställa in själva identifieraren.
Vi kontrollerar att allt fungerar. Nu är ägarna till dessa namn de lyckliga - de behöver inte skriva sitt namn manuellt)))
Det är också enkelt att validera formuläret i HTML5. För att göra detta finns det ett mönsterattribut som kan läggas till i alla inmatningsfält på sidan. Det avgör vilka tecken som får skrivas in i fältet och om något är trasigt tillåter det inte att det skickas.
Det skulle ta väldigt lång tid att beskriva alla värden för mönsterattributet. Du kan leta upp dem själv i katalogen.
Dessutom har många små finesser dykt upp när man arbetar med formulär. Till exempel, genom att ge ett fält ett tomt autofokusattribut, kan du säkerställa att när sidan laddas kommer den automatiskt att få ingångsfokus utan att behöva klicka där.
Max- och min-attributen låter dig ställa in de maximala och lägsta numeriska värdena som kan definieras i motsvarande fält. Det finns många sådana små möjligheter, och de uppfanns främst för att arbeta med dessa nyaste element.
Slutsats
Följaktligen, när allt detta stöds bättre (även om det redan är ganska bra), kommer det att vara möjligt att säga att HTML5 har gjort en revolution i arbetet med formulär. Bakom ytterligare information Jag skickar dig till, och med detta tror jag att jag avslutar artikeln. Jag hoppas att du själv kunde se de nya funktionerna i märkningsspråket för att arbeta med formulär.
Själva formuläret är vanligtvis avsett att ta emot information från användaren för att vidare skicka den till servern, där formulärdata tas emot av hanterarprogrammet. Ett sådant program kan skrivas i vilken som helst serverspråk programmering som PHP, Perl, etc. Programadressen anges i taggens action-attribut
I det här exemplet kommer formulärdata som indikeras av namnattributet (inloggning och lösenord) att skickas till filen på /example/handler.php. Om åtgärdsattributet inte är specificerat sker överföringen till adressen för den aktuella sidan.
Överföring till servern sker i två delar olika metoder: GET och POST, för att ställa in en metod i en tagg