Formulär i Dreamweaver

1. Inledning

Dreamweaver har också utmärkta verktyg för att skapa formulär. Här går jag igenom några av de funktioner som finns i Dreamweaver 3. Mer avancerade funktioner kommer jag att ta upp på senare sidor.

Vill du veta hur senare versioner av programmet fungerar, hittar du sådan information på startsidan för Dreamweaver >>

Man kan med fördel använda formulär ihop med tabller, som du fick lära dig om på förra sidan. Känner du dig osäker på vad formulär är kan du läsa mer på min sida om formulär >>

2. Verktygsfältet för formulär

För att arbeta med formulär måste man först och främst ta fram rätt verktyg. I Verktygspaletten, som heter Objects i den engelska versionen, finns en liten knapp som heter Common. Klickar man på den får man upp ett alternativ som heter Forms. Det är den man börjar med att aktivera.

När man väl har rätt verktyg framför sig är det bara att arbeta som vanligt. De olika knapparna avslöjar sina funktioner när man håller muspekaren ovanför dem. Vill man inte leta har jag lagt in en funktionsguide i bilden här nedanför till höger.

När man klickar på den översta knappen i verktygspaletten, lägger Dreamweaver in en röd streckad linje, samt följande kod:

<form method="post" action="" enctype="multipart/form-data">
</form>

Man behöver dock inte använda sig av verktygspaletten. Det går lika bra att gå in under menyn Insert - Form. Men den kod som då läggs in ser lite annorlunda ut:

<form method="post" action="">
</form>

Varför det är så beror på vilken typ av data formuläret skall hantera. Om det är vanlig data som skall skickas krävs ingen extra kodning (enctype), men bifogade filer kräver det. Därför ser FORM-elementet lite olika ut för olika funktioner.

FORM-elementet syns alltså som en röd streckad linje. Om man inte ser denna linje beror det på att man stängt av visningen av dolda element i programmet. Då tar man enkelt fram dem igen under menyn View - Invisible Elements.

Det går även att göra fler inställningar under menyn Edit - Preferences - Invisible Elements. Där kan man bl.a välja vilka element man vill kunna se och vilka som kan förbli dolda.

Formuläret avgränsas på båda sidor av den streckade linjen. Alla nya element man lägger in, som textrutor och knappar, kommer att lägga sig mellan linjerna. Man kan också placera enskilda formulärelement utanför FORM-elementen, men då får man upp en fråga om detta är vad man vill göra.

Anledningen till att man vill lägga in ett element utanför FORM-elementen kan vara flera, t.ex att man vill skapa en knapp för en länk. Observera dock att detta inte följer de inställningsmöjligheter som finns i Dreamweaver. Dessutom stöder inte alla webbläsare sådana finesser. Därför krävs att man går in och pillar lite i själva HTML-koden och sedan testar noggrant.

Dreamweaver är bara gjort för enkla formulär. Den som vill skapa mer avancerade funktioner måste alltid gå in i koden och ändra själv.

3. Lägg in ett enkelt formulär

Öppna ett nytt dokument, ta fram verktygen för formulär och klicka på knappen för ett formulär.

Klicka sedan på knappen för en textruta (Text Field).

Nu skall vi titta lite närmare på verktygsfältet för formulär. Du ser det på bilden här bredvid. Jag har kryssat i att jag vill ha en textruta med flera olika rader. Väljer man att ha enbart en rad, kommer verktygsfältet att se lite annorlunda ut.

Klicka på knappen för en enkelrad (Singel line). Skriv in valfri storlek (Char Width). Om du vill kan du även begränsa antalet tecken som besökaren kan skriva in. Jag väljer 100 här.

Rutan TextField är den som styr attributet name. Här skriver man in vad textrutan skall heta. Anledningen till att man vill det är för att kunna särskilja formulärets olika delar när det postats.

Rutan InitVal står för "initial value". Här skriver man in om det skall stå något redan innan besökaren skrivit något. Jag väljer att låta denna ruta vara tom.

Dreamweaver skapar nu följande kod:

<input type="text" size="50" maxlength="100">

Vill man göra ytterligare ändringar i detta objekt, kan man antingen markera det i wysiwyg-läget eller öppna HTML-editorn. (Det man t.ex kan lägga till är attributen name och value.) Så här ser det nu ut i wysiwyg-läget:

Vi skall nu skriva in lite text före rutan. Klicka strax till vänster om textrutan och skriv in Namn: eller vad du vill. Välj teckensnitt och storlek enligt eget huvud. Nu ser det ut så här:

Du kan sedan lägga till andra funktioner som du själv vill, t.ex flera textfält, knappar och liknande. Här tänkte jag hoppa över det, eftersom det inte innebär några konstigheter för den som känner till lite om formulär. Om du känner dig osäker kan du läsa mer om formulär på mina särskilda sidor om det >>

Däremot skall vi lägga in en skicka-knapp. Ställ dig efter det sista objektet (textrutan om du bara lagt in den) och klicka på verktyget för en knapp (button).

I verktygsfältet kan du ändra namn på knappen (label) och ställa in vilken typ av knapp det skall vara. Välj typen Submit. Man kan inte ändra teckensnitt och storlek på texten här. Det måste man göra med stilmallar, som jag återkommer till på en senare sida.

Nu skall vi ställa in hur formuläret skall hanteras, t.ex om det skall använda metoden POST eller GET. Då måste verktygsfältet för hela formuläret tas fram. Man gör det genom att klicka på den streckade röda linjen, eller (vilket är enklare) genom att klicka på FORM-elementet längst nere till vänster i dokumentfönstret.

Har man flera formulär på samma sida eller sajt kan man ge det ett namn. Det kan också vara bra att namnge formuläret om man använder någon form av script.

För att besökaren skall kunna skicka datan i formuläret, i det här fallet sitt namn, krävs att man använder någon form av script. Ett sådant script gör det möjligt för besökaren att skicka datan utan att behöva öppna sitt e-postprogram.

Det bästa sättet är att utnyttja något mailprogram på servern. Då väljer man metoden POST eller GET, som talar om för webbläsaren att den skall hämta mer information för formuläret på en annan plats. Oftast är denna plats en CGI-mapp (cgi-bin) på servern eller på någon annans sajts server.

Man får mer information om vilka scripts man har tillgång till från sitt webbhotell. Man kan idag också använda olika gratistjänster. Du hittar länkar till sådana på min sida om surftips >>

Man kan också använda någon form av script inne i dokumentet. Det fungerar normalt inte lika bra, eftersom webläsarna tolkar sådan kod olika. Det betyder att formuläret eventuellt inte kommer att kunna fungera i vissa webbläsare.

Dreamweaver 3 har vissa möjligheter att skapa scripts för formulär, men det återkommer jag till på en senare sida, eftersom det är ganska mycket man behöver känna till innan man ger sig på det.