Skapa webbformulär

Formulär indikeras med en prickad röd ram i designläge. Om du inte ser ramen väljer du Visa > Visuella hjälpmedel > Osynliga element.

Ange HTML-formulärets egenskaper i Egenskapskontrollen (Fönster > Egenskaper):

a. Markera formuläret genom att klicka på ramen runt det i dokumentfönstret.

b. Ange ett unikt namn för formuläret i rutan Formulärnamn.

Om ett formulär ges ett namn går det att referera till eller styra det med ett skriptspråk, till exempel JavaScript eller VBScript. Om du inte tilldelar formuläret ett namn, genererar Dreamweaver ett namn med syntaxen formulärn, och ökar värdet n för varje formulär som läggs till på sidan.

c. Ange vilken sida eller vilket skript som ska behandla informationen från formuläret genom att fylla i rutan Händelse eller genom att klicka på mappikonen och bläddra fram till rätt sida eller skript. Exempel: behandlaorder.php.

d. Ange vilken metod som ska användas för att skicka formulärdata till servern på snabbmenyn Metod.

Ange något av följande alternativ:

Standard Använder webbläsarens standardinställning för att skicka formulärdata till servern. Standardvärdet brukar vara metoden GET.

GET Innebär att värdet läggs till efter adressen till sidan.

POST Innebär att formulärinformationen bäddas in i HTTP-begäran.

Använd inte metoden GET för att skicka långa formulär. En webbadress kan bara vara 8 192 tecken lång. Om mängden data som skickas är för stor kastas delar av dem bort, vilket kan leda till oväntad eller misslyckad behandling.

Dynamiska sidor som genereras av parametrar skickade med metoden GET kan markeras med bokmärken, eftersom alla värden som behövs för att återskapa sidan finns i den URL som visas i webbläsarens adressfält. Däremot kan bokmärken inte skapas för dynamiska sidor som genereras av parametrar som har skickats från POST-metoden.

Om du samlar in konfidentiella användarnamn och lösenord, kreditkortsnummer eller annan konfidentiell information, kan POST-metoden verka säkrare än GET-metoden. Information som skickas av POST-metoden är emellertid inte krypterad och kan enkelt fångas upp av en hackare. Vill du vara på den säkra sidan bör du använda en säker anslutning till en säker server.

e. (Valfritt) Ange MIME-kodningstypen för uppgifterna som skickas till servern för behandling på snabbmenyn Kodningstyp.

Standardinställningen för application/x-www-form-urlencode används normalt tillsammans med metoden POST. Om du skapar ett filöverföringsfält anger du MIME-typen multipart/form‑data.

f. (Valfritt) Ange i vilket fönster de data som returneras av programmet som anropas på snabbmenyn Mål ska visas.

Om det namngivna fönstret inte redan visas öppnas ett nytt fönster med detta namn. Ange något av följande målvärden:

_blank Öppnar måldokumentet i ett nytt fönster utan namn.

_parent Öppnar måldokumentet i det överordnade fönstret där det aktuella dokumentet visas.

_self Öppnar måldokumentet i det fönster dit formuläret skickats.

_top Öppnar måldokumentet i det aktuella fönstret. Det här värdet kan du använda för att se till att måldokumentet visas i hela fönstret även om ursprungsdokumentet bara visades i en ram.

Infoga formulärobjekt på sidan:

a. Placera insättningspunkten där formulärobjektet ska infogas i formuläret.

b. Välj objektet på menyn Infoga > Formulär eller i kategorin Formulär på panelen Infoga.

c. Fyll i dialogrutan Hjälpattribut för inmatningskod. Klicka på Hjälp i dialogrutan om du vill ha mer information.

d. Ange objektens egenskaper.

e. Ange ett objektnamn i egenskapskontrollen.

Varje textfält, dolt fält, kryssruta och list/menyobjekt måste ha ett unikt namn som gör att det går att identifiera i formuläret. Formulärobjektens namn kan innehålla mellanslag och specialtecken. Du kan använda vilken kombination av alfanumeriska tecken som helst och understrykningstecknet (_). Etiketten som du tilldelar objektet är variabelnamnet som lagrar fältets värde (de data som har angetts). Det är det värde som skickas till servern för behandling.

f. Ge textfält, kryssrutor och alternativknappar etiketter genom att klicka bredvid objektet och skriva texten för etiketten.

Använd radbrytningar, styckebrytningar, förformaterad text eller tabeller då du formaterar formulären. Det går inte att infoga ett formulär i ett annat (taggarna kan alltså inte överlappa), men du kan infoga mer än ett formulär på en sida.

Tänk på att göra etiketterna begripliga när du utformar formulär, så att användarna vet vad de svarar på. Vill du ha reda på namn, kan du till exempel låta etikettens text vara ”Ange ditt namn”.

Använd tabeller om du vill strukturera formulärobjekten och fältetiketterna. Om du använder tabeller i formulär bör du se till att alla table-taggar omges av form-taggar.

Dialogrutan Välj bildkälla visas.

Välj Infoga > Formulär > Grupp med alternativknappar.

Fyll i dialogrutan och klicka på OK.

a. Ange ett namn på gruppen med alternativknappar i rutan Namn.

 Om du anger att alternativknapparna ska skicka tillbaka parametrar till servern, kopplas de till namnet. Om du tilldelar gruppen namnet minGrupp och anger formulärmetoden GET (vilket innebär att URL-parametrar skickas i stället för formulärparametrar när användaren klickar på knappen Skicka) skickas uttrycket minGrupp=”CheckedValue” i URL:en för servern.

b. Klicka på plusknappen (+) om du vill lägga till en alternativknapp i gruppen. Ange en etikett och ett markeringsvärde för den nya knappen.

c. Ordna om knapparna genom att klicka på upp- eller nedpilarna.

d. Om du vill ange att en viss alternativknapp ska vara markerad när sidan öppnas i en webbläsare anger du samma värde som alternativknappen har i rutan Välj ett värde som är lika med.

Ange ett oföränderligt eller dynamiskt värde genom att klicka på blixtikonen bredvid rutan och välja en postmängd som innehåller möjliga markeringsvärden. I bägge fallen måste värdet som du anger motsvara markeringsvärdet för en av alternativknapparna i gruppen. Du kan undersöka alternativknapparnas markeringsvärden genom att markera dem och öppna egenskapskontrollen för varje knapp (Fönster > Egenskaper).

e. Välj vilket format du vill att Dreamweaver ska visa knapparna i. Ordna knapparna med hjälp av radbrytningar eller en tabell. Om du väljer att använda en tabell skapar Dreamweaver en tabell med en kolumn och placerar alternativknapparna till vänster och etiketterna till höger.

Du kan även ange egenskaperna i egenskapskontrollen eller direkt i kodläge.

Välj Infoga > Formulär > Grupp med kryssrutor.

Fyll i dialogrutan och klicka på OK.

a. Ange ett namn för gruppen med kryssrutor i rutan Namn.

Om du anger att kryssrutorna ska skicka tillbaka parametrar till servern, kopplas de till namnet. Om du tilldelar gruppen namnet minGrupp och anger formulärmetoden GET (vilket innebär att URL-parametrar skickas i stället för formulärparametrar när användaren klickar på knappen Skicka) skickas uttrycket minGrupp=”CheckedValue” i URL:en för servern.

b. Klicka på plusknappen (+) om du vill lägga till en kryssruta i gruppen. Ange en etikett och ett markeringsvärde för den nya kryssrutan.

c. Ordna om kryssrutorna genom att klicka på upp- eller nedpilarna.

d. Om du vill ange att en viss kryssruta ska vara markerad när sidan öppnas i en webbläsare anger du samma värde som kryssrutan har i rutan Välj ett värde som är lika med.

Ange ett oföränderligt eller dynamiskt värde genom att klicka på blixtikonen bredvid rutan och välja en postmängd som innehåller möjliga markeringsvärden. I bägge fallen måste värdet som du anger motsvara markeringsvärdet för en av kryssrutorna i gruppen. Du kan undersöka kryssrutornas markeringsvärden genom att markera dem och öppna egenskapskontrollen för varje kryssruta (Fönster > Egenskaper).

e. Välj vilket format du vill att Dreamweaver ska visa kryssrutorna i.

Ordna rutorna med hjälp av radbrytningar eller en tabell. Om du väljer att använda en tabell skapar Dreamweaver en tabell med en kolumn och placerar kryssrutorna till vänster och etiketterna till höger.

Du kan även ange egenskaperna i egenskapskontrollen eller direkt i kodläge.

Infoga ett HTML-list/menyformulärobjekt på sidan:

    a. Klicka inuti HTML-formuläret på sidan (Infoga > Formulär > Formulär).

    b. Välj Infoga > Formulär > Lista/meny för att infoga formulärobjektet.

Gör något av följande:

• Välj det nya eller ett befintligt HTML-list/menyformulärobjekt, och klicka sedan på Dynamiskt i egenskapskontrollen.

• Välj Infoga > Dataobjekt > Dynamiska data > Dynamisk listruta.

Fyll i dialogrutan Dynamisk lista/meny och klicka på OK.

  a. Välj den postmängd du vill använda som innehållskälla på snabbmenyn Alternativ från postmängd. Den här menyn använder du även om du vill redigera statiska eller dynamiska list/menyalternativ längre fram.

  b. Ange listans eller menyns standardalternativ i området Statiska alternativ. Använd även det här alternativet om du vill ändra statiska alternativ i ett list/menyformulärobjekt efter att du har lagt till dynamiskt innehåll.

  c. (Valfritt) Använd plusknappen (+) för att lägga till alternativ i listan eller minusknappen (-) för att ta bort alternativ från listan. Alternativen står i samma ordning som i dialogrutan Redigera listvärden. Det första alternativet på listan är markerat när sidan läses in av en webbläsare. Använd upp- och nedpilarna om du vill ordna om alternativen i listan.

  d. Markera fältet som innehåller menyalternativens värde på snabbmenyn Värden.

  e. Markera fältet som innehåller menyalternativens etiketter på snabbmenyn Etiketter.

  f. (Valfritt) Om du vill ange att ett visst menyalternativ ska vara markerat när sidan öppnas i en webbläsare eller när en post visas i formuläret anger du samma värde som menyalternativet har i rutan Välj ett värde som är lika med.

    Du kan ange ett statiskt eller dynamiskt värde genom att klicka på blixtikonen bredvid rutan och välja ett dynamiskt värde i listan med datakällor. I bägge fallen bör värdet som du anger motsvara värdet på ett av menyalternativen.

Datakällan bör innehålla text. Om det inte finns några datakällor i listan eller om de tillgängliga datakällorna inte uppfyller dina behov klickar du på plusknappen (+) och definierar en ny datakälla.

• Klicka på blixtikonen bredvid rutan Markera om och välj fältet i listan med datakällor.

  Datakällan måste innehålla booleska data, till exempel Ja och Nej eller sant och falskt. Om det inte finns några datakällor i listan eller om de tillgängliga datakällorna inte uppfyller dina behov klickar du på plusknappen (+) och definierar en ny datakälla.

• Ange värdet som fältet måste ha för att kryssrutan ska markeras i rutan Lika med.

  Om du till exempel vill att kryssrutan ska markeras när ett visst fält i en post har värdet Ja anger du Ja i rutan Lika med.

I rutan Värde för alternativknappar visas värdena för alla alternativknappar i gruppen.

Postmängden som du väljer innehåller värden som matchar alternativknapparnas värden. Du kan undersöka alternativknapparna markeringsvärden genom att markera dem i tur och ordning och se på deras egenskaper i egenskapskontrollen (Fönster > Egenskaper).

Fyll i dialogrutan Dynamiska data och klicka på OK.

  a. Välj en datakälla i listan med datakällor.

  b. (Valfritt) Välj ett dataformat för texten.

  c. (Valfritt) Ändra den kod som Dreamweaver infogar på sidan för att visa den dynamiska texten.

Kontrollera att alla textfält som du vill verifiera har unika namn.

Du skulle till exempel kunna ange att ett textfält med en persons ålder bara får innehålla siffror.

Du kan till exempel ange namnet på en funktion som ännu inte finns, till exempel bearbetaMittFormulär()

Du kan till exempel definiera följande JavaScript-funktion i dokumentets head-avsnitt om du vill visa ett meddelande när användaren klickar på knappen Skicka:

Det behöver du bara göra en gång.

Dialogrutan Hjälpattribut för inmatningskod visas.

Formulärobjektet dyker upp i dokumenten.

• Redigera lämpliga attribut i kodläge.

• Högerklicka (Windows) eller Ctrl-klicka (Macintosh) och välj sedan Redigera kod.