Formulär i HTML5

Var på en föreläsning igår med Peter Lubbers som skrivit Pro HTML5 Programming. Stort tack till er på HiQ som fixade dit honom, nu älskar jag HTML5.

En sak jag blev speciellt imponerad av är formulär. Det här är något jag implementerat JavaScript för i alla webbprojekt jag gjort. Det behövs alltid och implementationen av t.ex. validering av en e-postadress skiljer sig mycket mellan olika siter. Ofta sker validering inte ens i JavaScript utan först när man postat formuläret. Urk.

Validering

Det går att sätta typen på ett formulärfält till e-postadress, URL, telefonnummer eller heltal. Skriver man in något annat får man ett felmeddelande.

Placeholders

Beskrivande text i ett formulärfält som försvinner när man klickar på det.

Obligatoriska fält

Fält kan sättas som obligatoriska, formuläret kan inte skickas om obligatoriska fält inte fyllts i.

Nya fälttyper

Fält för datum med en liten kalender. Sliders, alltså dragreglage för numeriska fält.

Konsekvent och utökat beteende i formulär är en liten del av HTML5 men den som jag tror kommer innebära störst skillnad i användbarhet hos webbsidor, i alla fall till en början. Det är superenkelt att implementera och jag kan (när alla browsers stödjer HTML5 formulär, mer om detta här) slänga bort alla gamla fula JavaScript.

Mer om HTML5-formulär här.

2 thoughts on “Formulär i HTML5

  1. Adam november 24, 2010 / 13:08

    Jag tror att du har rätt i att förbättringarna för formulär kan ha den största positiva effekten för användbarhet i HTML5.
    Tyvärr har de ovanligt dåligt stöd i moderna webbläsare så det kan dröja ett tag innan det slår igenom. Till råga på allt hanteras de funktioner som finns olika i olika webbläsare.

  2. Dan december 1, 2010 / 20:10

    Ja, jag fattar inte riktigt varför formulärtaggarna inte stöds. Borde vara jobbigare att implementera saker som canvas och websockets, spontant.

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s