Nya formulärinmatningstyper i HTML5 - dummies

HTML-formulär är centrerade kring det ödmjuka men flexibla inmatningselementet. HTML5 lägger till ett antal väldigt användbara former av inmatning som hjälper till att göra HTML till ett mer modernt användargränssnitt.

Även om stöd för dessa taggar inte är universellt är det säkert att börja använda dem nu. Varje webbläsare (även IE6) som inte förstår de avancerade inmatningstyperna återgår till inmatningstyp = "text", som fortfarande fungerar precis som förväntat (men inte med validering och användargränssnittets förbättringar av de nya taggarna).

Standarden indikerar att olika typer stöds, men exakt hur elementen stöds kan variera från webbläsare till webbläsare. E-postfältet kan till exempel se ut som ett vanligt textfält till en användare på en vanlig stationär dator, men det virtuella tangentbordet på en mobilenhet kan ändras för att inkludera @ när det möter ett e-postfält.

De flesta av dessa specialfält stödjer validering, så det är åtminstone användbart att ställa in en: ogiltig CSS-stil så att användaren kan avgöra om data finns i fältet. Här är inmatningstyperna med provkodning:

• färg : Tillåter användaren att välja en färg med standardwebformat - igenkända färgnamn (gul) och hexvärden föregås av en # -symbol (# FF0033).

• datum : Vissa webbläsare (Firefox 3, 5) visar ett textfält, andra (Opera 10) visar en särskild kalenderkontroll, men andra webbläsare (Chrome) innehåller både text och en popupkalender. Om datumet anges med text måste det anges i ett yyyy-mm-dd-format:

  Du kan begränsa de datum som är tillåtna för ett visst område genom att ange min- och maxattributen till elementet.

• tid : Tid lagras i hh: mm-format. Vissa webbläsare innehåller ett kolon direkt i fältet, och vissa ändrar det virtuella tangentbordet med siffror och kolonstecken. Det är också möjligt att en webbläsare dyker upp någon typ av anpassad tidväljare, men det stöds ännu inte i några större webbläsare.

• datetime : Kombinerar datum och tid i ett enda element. Det innehåller också en mekanism för att komma in i tidszonen.

  Vissa webbläsare dyker upp en kalenderkontroll för datumet och en formaterad ingång för tiden. Andra kan ändra virtuella tangentbord för datum och tid.

  Det officiella datumet för fullständigt datum och tid returneras från de olika datum- och tidselementen är en specialkod: yyyy-mm-ddThh: mm + ff: gg:

  • yyyy : Fyra siffror för år.

  • - : En faktisk strecktecken som måste placeras mellan år och månad.Ett annat streck placeras mellan månaden och dagen.

  • mm : Två siffror för månaden.

  • dd : Två siffror för dagen.

  • T : Huvudstaden T indikerar början av klockans tidsdel.

  • hh : Två siffror för timmen, i 24-timmarsformat.

  • : : Karakteren mellan timmar och minuter. Ett annat kolon visas mellan timmen och minuter av tidszonen förskjuten.

  • mm : Två siffror för protokollet.

  • + / - / Z : Tidzonens offset anges med en huvudstad Z (om tiden är zulu eller GMT-tid) eller + eller - symbolen om tiden är i en annan tidszon.

  • ff : Om tidszonen inte är zulu-tid, ange antalet timmar förskjutna från GMT.

  • gg : Antal minuter offset från zulu-tiden. Vanligtvis är detta 00, men det är möjligt att tidszonen kompenseras med 15, 30 eller 45 minuter.

  Till exempel, klockan 15:30 den 11 oktober 2011, i New York City ser så här ut:

  2011-10-11T17: 30-05: 00
  

  Datum och tid måste vara i detta format som anses vara giltigt för webbläsare som validerar ett datumTime-fält.

• datetime-local : Precis som datetime-elementet utan tidszonindikator:

• e-post : Det här ser ut som ett vanligt textfält, men det kan ändras enligt hur det är tillgängligt

• månad : Detta genererar ett fyrsiffrig år följt av en tvåsiffrig månad:

• nummer : Numeriska data kan bestå av ett textfält följt av någon form av väljaren (till exempel upp- och nedpilar), eller den här taggen kan ändra den virtuella knappsatsen för en bärbar enhet för att hantera enbart numerisk ingång.

  Nummeringångstypen stöder flera speciella attribut:

  • min : Det minsta tillåtna värdet.

  • max : Det maximala tillåtna värdet.

  • steg : Detta värde anger hur mycket de visuella gränssnittsverktygen (vanligtvis små upp och nerpilar) ändrar värdet när det aktiveras.

  • värde : Elementets numeriska värde.

  Alla attribut av talelementet kan vara heltal eller flytpunkt. Nuvarande webbläsare som stöder den här taggen (Opera och Chrome) verkar dock inte validera lika med flytande punktvärden som de gör med heltalsvärden. För mer kontroll över numerisk ingång, överväga sortimentets ingångstyp.

• intervall : De flesta verktygen för användargränssnitt har någon form av skjutreglage eller rullningsfunktion, vilket gör det enkelt för användare att ange ett numeriskt värde visuellt. Konstruktionen lägger till slut denna funktion till HTML-formulär.

  Räckviddsinmatningen har samma attribut som antal, min, max, värde och steg. Om webbläsaren stöder intervalltaggen ser användaren en scroller; Om inte, visas en vanlig textinmatningstyp.

  Typtypen visar inte det exakta värdet, och det kan vara svårare att få exakta resultat än med typingångstypen. En lösning är att para en output-tagg till intervallet och använd JavaScript för att uppdatera utgången när intervallet ändras.En samplingsform som innehåller denna idé:

  128
  

  När intervallvärdet ändras kallas det en JavaScript-funktion som heter updateOutput:

  function updateOutput () {// få element var myRange = dokument. getElementById ("myRange"); var myOutput = dokument. getElementById ("myOutput"); // kopiera värdet över myOutput. värde = myRange. värde;} // slutfunktion
  

  Liksom typingångstypen kan intervallet ges floating point-värden om du vill.

• sök : Används för att hämta text som är avsedd att användas som en del av en sökning (antingen internt eller via en söktjänst). På de flesta webbläsare visas den här taggen som ett vanligt textfält. Det har ibland lite speciellt beteende. På Safari visas sökfältet med en liten x , vilket rensar innehållet i sökningen. I Chrome tillämpas autokompletionsfunktionerna i huvud sökfältet (som också är URL-inmatningselementet i Chrome) automatiskt i sökrutan.

  Liksom de andra nya inmatningstyperna finns det ingen påföljd för att använda sökelementet i webbläsare som inte stöder det. Fallbacken är en vanlig textinmatning.

  Sökelementet gör faktiskt ingen sökning. För att göra det funktionellt måste du skriva en kod.

• tel : Detta fält förväntar sig tre siffror följt av ett streck och fyra siffror - ett lokalt telefonnummer. Du kan behöva spela med mönsterattributet om du vill tillåta en riktnummer eller tillägg att validera.

• url : Webbläsare som stöder detta element söker efter // prefixet för en webbadress. Mobila webbläsare kan också anpassa det virtuella tangentbordet till att inkludera tecken som vanligtvis finns i webbadresser: kolon (:), framåtstreck (/) och tilde (~).

• vecka : Gör det möjligt för användaren att välja en vecka från en kalenderkontroll. Den returnerar ett värde i följande format: yyyy-Wnn

  • yyyy : Representerar ett fyrsiffrig år.

  • - : Dash-tecknet.

  • W : Karaktären W .

  • nn : Veckan som ett tvåsiffrigt nummer.

  Vissa webbläsare dyker upp den vanliga kalenderkontrollen. När användaren väljer ett datum (eller en vecka) kommer endast år och vecka att returneras. Andra webbläsare validerar bara för rätt format.