Frenetic - HTML/Introduktion till formulär

Introduktion till formulär

Introduktion: Formulär används idag i stor usträckning, för att t.ex. hämta information från databaser, hantera inloggning eller att göra undersökningar. Detta är bara början och om du ska göra en större sida med databaskopplingar, hinner du inte skriva många rader kod innan du är tvungen att titta närmare på hur formulär fungerar. Med detta dokument vill jag på ett snabbt sätt förklara hur du hanterar formulären, vilka de olika indatatyperna är, samt hur data hanteras när formuläret väl skickas.

till att börja med, formulär håller sig inom <form>-taggen och alla input-fält måste finnas inom dess start- och sluttaggar. Koden ser ut enligt följande:

Vi återkommer till form-taggarna lite senare, men för tillfället koncentrerar vi oss på de olika input-typerna.

De olika input-typerna

Radio: Den första typen är "radio". Bara en knapp inom samma namngrupp kan vara aktiv åt gången. Det är därför väldigt viktigt att man använder "name" korrekt. Du kan ha flera olika radio-grupper inom samma formulär, tack vare att den bara tittar på just name-attributet.

<input type="radio" name="val1">Röd
<input type="radio" name="val1">Grön
<input type="radio" name="val1" checked="checked">Blå

Röd Grön Blå

Som du ser, är attributet checked satt till checked på valet Blå, vilket gör att blå är förmarkerat i formuläret. Om du ändrar någon färg, kommer Blå att kryssas ur. Egentligen räcker det med att bara skriva <input type="radio" name="val1" checked>, men för kompatibilitet av XML och XHTML, bör du lära dig att skriva det långa sättet på en gång.

Checkbox erbjuder samma funktionalitet, med skillnaden att man kan kryssa för fler alternativ. annan lösning. Här kan du markera flera alternativ inom samma namngrupp.

<input type="checkbox" name="val2">Röd
<input type="checkbox" name="val2" checked="checked">Grön
<input type="checkbox" name="val2" checked="checked">Blå

Röd Grön Blå

Som du ser, så gäller samma sak med Checked här som med radio.

Text används om du vill att användaren ska skriva in något själv, som får plats på en rad. Det kan vara till exempel en e-postadress, ett användarnamn, eller någon annan kort text. Om du vill kan du skriva in vad som ska stå i rutan från början med hjälp av attributet value. För att begränsa antalet tecken som kan skrivas in, anges detta med attributet Maxlength. I exemplet nedan kan du skriva in max 20 tecken.

Skriv in e-postadress: <input type="text" name="val3" value="E-post" size="20" maxlength="20">

Skriv in e-postadress:

Password fungerar som ovanstående, men istället för ren text skrivs stjärnor ut. Som namnet säger, är fältet till för att skriva in lösenord, observera dock att man fortfarande kan fördefinera ett värde. Information i ett "password"-fält är inte krypterad, den skickas i klartext från användaren. Även password stödjer användandet av maxlength.

Skriv in ditt lösenord: <input type="password" name="val4" value="lösenord" size="10" maxlength="20">

Skriv in ditt lösenord:

Submit används för att skicka iväg de ifyllda formulären. "Value" anger vad som ska stå på knappen.

Reset återställer formuläret till standardvärdena. "Value" anger även här vad som ska stå på knappen.

Textarea är den första i de avvikande typerna. Här kan du skriva in en längre text. Med "rows" och "cols" kan du ange hur stor textytan ska vara. Det är viktigt att du avslutar denna tag!

Select är nästa "special"-val. Med denna får du upp en lista över valen. Det är viktigt att du avslutar denna tag!

Hur skickad data hanteras

Då har vi gått igenom de olika typerna av indata, nu ska vi ta reda på hur data skickas. Vi återgår till det första kodexemplet:

Det viktiga för oss nu är dels action, dels method. Action är det script som ska ta hand om informationen. För att göra något vettigt av data, är det oftast något form av script som tar hand om data, som till exempel en ASP-sida, PHP eller CGI. Action anger helt enkelt vilket script vi vill skicka vidare data till. Du kan om du vill skicka data till en helt annan domän, men på grund av säkerhetsriskerna är det idag en del browsers som inte stödjer detta längre. Däremot kan du alltid ange relativa eller absoluta sökvägar inom din egen domän. För att du ska ange korrekt HTML-syntax, måste action alltid vara med.

Nästa del är method. Detta anger på vilket vis data skickas. Det finns två olika sätt, post och get. Get använder sig av URL:en för att skicka med data, nackdelen med detta är att man inte kan skicka med särskilt mycket data, ca 4kb har jag hört, men det beror på klient och server. Om du någon gång sett en URL som sett ut ungefär som http://www.doman.se/sida.asp?val1=bla (för att ta data från tidigare exempel), så är detta med största sannorlikhet resultatet av en get-query. Om du däremot behöver skicka med en större mängd data, måste du använda dig av post. Den skickar med data som en http-header, vilket gör att den klarar av betydligt större datamängder, du kan till och med ladda upp hela dokument eller filer på detta sätt.

Detta är grunderna i formulär och har du läst så här långt, kommer du troligtvis hålla på en hel del med detta. Lycka till!