Om formulär

För att bygga sin egna gästbok här på Erimax bör man kunna lite grundläggande html. Formulär är inte nödvändigtvis något som man studerat ingående om man inte har kommit i kontakt med det tidigare, och därför beskriver vi de grundläggande funktionerna här. Vi använder oss av xhtml 1.0 (strict) för att visa hur taggarna skrivs, men du kan använda vilken html/xhtml-version du vill i din gästbok.

Detta avsnitt behandlar alltså utformningen av inmatningsformuläret och vilka möjligheter som finns där. Det finns ett antal olika typer av inmatningsfält; vi beskriver dom i tur och ordning:

Textfält

Det vanligaste inmatningsfältet är ett enkelt textfält. Ett sådant skriver du med taggen input:

<input type="text" name="email" />

Det är alltså type="text" som bestämmer att det är ett textfält. Ett textfält av den här typen har många användningsområden i gästboken. Bland annat använder du vanligtvis ett sådant fält där besökaren skriver in sitt namn, sin mailadress och sin hemsideadress!

Textarea

Det finns några till typer av <input>, men textarean är normalt sätt det mest använda inmatningsfältet, efter textfältet. Textarean är ett flerradigt textfält där du förslagsvis låter dina besökare skriva sitt meddelande som de ska posta i din gästbok.

<textarea cols="50" rows="5" name="message"></textarea>

cols bestämmer hur många kolumner (det vill säga bredden) textarean ska ha, och rows hur många rader.

Radio-button

Radio-buttons kallas de små runda knappar som bland annat används av Aftonbladets undersökningar. Besökaren kan bara välja ett alternativ i en grupp knappar. Gruppen definieras genom att ge knapparna samma namn, till exempel:

Har Erimax den bästa gästbokstjänsten?

<input type="radio" name="extra2" id="extra2-1" value="Erimax rockar kung" checked="checked" />
<label for="extra2-1">Ja, absolut</label>

<input type="radio" name="extra2" id="extra2-2" value="Föredrar trista gästboks-tjänster" />
<label for="extra2-2">Nej, men nästan</label>

Har Erimax den bästa gästbokstjänsten?

Det värde som sparas för ett inlägg från en sådan konstruktion är det som står i value="detta_sparas". Genom att sedan använda specialtaggen <%extra2%> i Inlägget, visas det värde besökaren valde. I det här fallet antagligen "Erimax rockar kung" :). Genom att använda checked="checked" är ett alternativ förhandsvalt. Man behöver inte använda detta attribut, men om man gör det kan man inte sätta det på mer än en radio-button i en grupp.

Vi har också valt att sätta den text som hör till respektive radio-button i en <label>-tagg. Detta gör att knappen väljs om man klickar på den text som står mellan <label> och </label>. Testa! Notera att värdet på for="detta_värde" kopplas samman med id="detta_värde för den radio-button texten hör till. De måste alltså vara identiskt lika, och alla id-värden måste vara unika.

<label> fungerar för övrigt på exakt samma sätt för alla andra input-typer, och är en mycket användbar tagg.

Checkbox

En checkbox påminner lite om en radio-button ovan. Det finns dock en väsentlig skillnad: här kan du välja flera alternativ samtidigt. Prova att trycka på våra radio-buttons ovan. Som du ser kan du alltså bara ha en av dessa markerade samtidigt. Checkboxarna däremot, där kan du kryssa i flera stycken samtidigt (eller ingen av dem om du så vill).

Vilken sorts godis tycker du om?

<input type="checkbox" name="extra4" id="extra4" value="Jag tycker om Ferrari." />
<label for="extra4">Ferrari</label>

<input type="checkbox" name="extra5" id="extra5" value="Jag tycker om Lotus." />
<label for="extra5">Lotus</label>

Vilken sorts godis tycker du om?

Vi har i exemplet gett checkboxarna olika namn, och detta är den variant vi rekommenderar. Det är då möjligt att skriva ut specialtaggarna var för sig, i det här fallet med <%extra4%> och <%extra5%>. Om man ger flera checkboxar samma namn kommer deras respektive value att klumpas ihop till en gemensam textmassa.

Select

Select är namnet på den typ av rullist som du antagligen har sett. Den rullar ut några av dig fördefinierade alternativ som besökaren kan välja bland. I vår gästbok har vi använt en select för att låta användaren välja färg på namnrutan. Det har vi gjort så här:

Liva upp sidan med:

<select name="extra2">
  <option value="#ffffff">vit</option>
  <option value="#fe6c5c">röd</option>
  <option value="#95f986">grön</option>
  <option value="#8983fc">blå</option>
  <option value="#8fecf3">turkos</option>
  <option value="#c24ebf">lila</option>
</select> färg

Liva upp sidan med:
färg

Detta kan sedan användas i Inlägg på detta sätt:

<td bgcolor="<%extra2%>"></option>

<option> är alltså den tagg som används för att skapa ett färdigt alternativ. Det som sparas är det valda alternativets value: value="detta_sparas". Om du vill att något annat alternativ än det översta ska vara förhandsvalt kan du skriva så här:

<option value="#8983fc" selected="selected">blå</option>

Med den ändringen skulle den ovan visade rullisten se ut så här:

Liva upp sidan med:
färg

Submit-knapp

För att skicka iväg allt det du har skrivit i de olika inmatningsfälten måste du ha en skicka-knapp av något slag. Det finns en enkel tagg för denna som ser ut så här:

<input type="submit" name="post" value="Skicka!" />

Rensa formuläret

Det finns en variant till av input, och det är en knapp som återställer formuläret till sitt ursprungsskick. I vissa fall kan den vara användbar, men se till att den inte är alltför nära submit-knappen för att undvika att besökaren trycker på fel knapp:

<input type="reset" value="Börja om från början" />

Formulärtaggen

Om du har gjort formulär förut har du använt <form>-taggen, som normalt brukar se ut så här:

<form action="nånting" method="post">

Så ska den dock inte se ut i gästboken. Det korrekta sättet att skriva taggen här är:

<%form%>

Som vanligt ska dock formuläret avslutas med </form>-taggen.

Det var en introduktion till formulär i gästboken. Mer hjälp om vilka namn inmatningsfälten kan ha hittar du hjälpsidorna när du är inloggad.