Fälttyper underlättar för mobilbesökaren

Det virtuella tangentbordet på en smartphone med touchskärm har både för- och nackdelar. Troligtvis kan de flesta skriva snabbare på ett fysiskt tangentbord, men å andra sidan kan det virtuella tangentbordet ändra skepnad för att passa den situation du är i.

Detta är något som du som webbutvecklare kan utnyttja genom att ange passande fälttyper för dina formulär.

Om du har ett formulär för kortbetalning kan det vara smidigt att låta det numeriska tangentbordet poppa upp för besökaren när kortnumret ska fyllas i. Det gör du genom att ange type=”number” i input-taggen enligt följande:

<input type="number" name="cardnr" />

Numeriskt tangentbord på iPhone till vänster och Android till höger.

Det numeriska tangentbordet ser olika ut beroende på om du har t ex en iPhone eller Android (se bilden nedan), och personligen föredrar jag att använda type=”tel” istället då detta fungerar bättre för de som använder iPhone. Beroende på vilka tecken besökaren behöver tillgång till kan detta dock vara fel, så prova dig fram.

Några av de fälttyper du kan ange:

  • number – Numeriskt tangentbord.
  • tel – En variant av det numeriska tangentbordet för telefonnummer (som faktiskt funkar bättre än “number” på en iPhone om du endast är ute efter siffror).
  • url – Visar tangentbord med knappar som “.”, “/” och “.com”.
  • email – Ser till att bl a “.” och “@” är lättillgängliga.
  • date – Plockar fram en datumväljare.

För att se alla fälttyper och hur du använder dem besök gärna w3schools.com.

Kompatibilitet

De flesta moderna webbläsare har stöd för många av fälttyperna, och om de inte har stöd så kommer de att agera som type=”text”. Med andra ord får alla besökare med kompatibla webbläsare en bättre upplevelse, och de utan märker inga konstigheter.

Vill du se vilka webbläsare som stödjer vad, ta gärna en titt på Caniuse.com som vi tipsat om tidigare. Informationen är tyvärr inte fullständig, så det bästa är att prova sig fram.

Stäng av autokorrigering

För att ytterligare förbättra formulärupplevelsen för de besökare med iOS (iPhone/iPad) så kan du stänga av autokorrigering och automatisk stor bokstav i början av ord i de fält du önskar.

Har du till exempel ett inloggningsformulär kan det vara superirriterande om telefonen hela tiden försöker rätta ditt användarnamn genom att sätta stor bokstav i början och köra rättstavning.

<input type="text" name="username" autocorrect="off" autocapitalize="off" />

Har du fler tips på hur man enkelt kan förenkla för mobilbesökaren? Tipsa gärna i kommentarerna.

7 reaktion på “Fälttyper underlättar för mobilbesökaren

  1. per

    Intressantatt se hur illa just denna sida fungerar…;-)

    Exempelraderna klippa och mycket av skärmens bredd försvann av alla marginaler.

  2. Tård Inläggsförfattare

    Hej Per,

    Vi arbetar just nu med att göra om alla våra sajter till ”responsive”, så att de ska fungera bra oavsett vilken enhet du besöker oss med.

    Här kan du läsa mer om det, och beta-testa nya loopia.se (bloggen är dock inte responsive än):
    http://blogg.loopia.se/2013/01/28/beta-testa-nya-loopia-se-med-responsive-web-design/

    I samband med detta ser vi även över marginaler och andra delar som kan förbättras jämfört med den nuvarande mobil-versionen av bloggen.

    Vi tar tacksamt emot feedback på vår nya responsive-sajt.

  3. Daniel

    Det finns inget som heter kompabilitet. Den formen förutsätter att det finns ett adjektiv som heter kompabel, och det gör det ju inte. Det rätta är: kompatibel -> kompatibilitet.
    Extra minuspoäng för att det felaktiga ordet dessutom är en rubrik. ;)

  4. Tård Inläggsförfattare

    Hej Daniel,

    Tack för att du uppmärksammade detta slarv, det är nu justerat ;)

  5. Pingback: Beställ domännamn eller webbhotell i mobilen eller på surfplattan | Loopia Blogg

  6. Pingback: Beta-testa nya Loopia.se med responsive web design | Loopia Blogg

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Följande HTML-taggar och attribut är tillåtna: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>