Skapa webbformulär

Sök
Gå till Adobe Dreamweaver Användarhandbok
Obs!

Stödet för HTML-formulärelement har förbättrats i uppdateringar av Dreamweaver Creative Cloud. Information finns i Förbättrat HTML5-stöd för formulärelement.

Webbformulär

När en besökare matar in information i ett webbformulär som visas i en webbläsare och skickar in det, överförs informationen till en server, där ett serverskript eller ett program behandlar den. Servern svarar genom att skicka tillbaka den behandlade informationen till användaren (eller klienten) eller genom att utföra någon åtgärd med ledning av formulärets innehåll.

Du kan skapa formulär som skickar in data till de flesta applikationsservrar, inklusive PHP, ASP och ColdFusion. Om du använder ColdFusion kan du också lägga till ColdFusion-specifika formulärskontroller i formulären.

Obs!

Du kan även skicka formulärdata direkt till en e-postmottagare.

Formulärobjekt

Formulärindatatyperna i Dreamweaver kallas formulärobjekt. Formulärobjekt är de mekanismer som ger användarna möjlighet att ange data. Du kan lägga till följande formulärobjekt i ett formulär:

Textfält

Kan fyllas med valfri alfanumerisk text. Texten kan visas på en eller flera rader eller i ett lösenordsfält, där den text som matas in ersätts med asterisker eller punkter så att ingen som står bredvid kan läsa den.

Obs!

Lösenord och annan information som skickas till en server från ett lösenordsfält är inte krypterad. Den överförda informationen kan fångas upp och avläsas som alfanumerisk text. Av den anledningen bör du alltid kryptera data som du vill hålla hemliga.

Dolda fält

Lagrar information som en användare matar in, till exempel ett namn, en e-postadress eller en visningsinställning. Informationen används nästa gång besökaren kommer till webbplatsen.

Knappar

Utför åtgärder när de klickas. Du kan lägga till ett eget namn eller en etikett på en knapp eller använda några av de fördefinierade etiketterna ”Skicka” eller ”Återställ”. Använd en knapp för att skicka iväg formulärdata till servern eller för att återställa formuläret. Du kan även koppla andra uppgifter till knappen. Dem definierar du i ett skript. Genom att trycka på knappen skulle till exempel saldot för alla artiklar som har valts kunna beräknas.

Kryssrutor

Möjliggör flera val i en grupp med alternativ. Användaren kan välja så många alternativ han eller hon vill. I följande exempel visas tre markerade kryssruteobjekt: Surfing, Mountain Biking och Rafting.

Alternativknappar

Representerar ömsesidigt uteslutande valmöjligheter. Om en knapp i en alternativknappgrupp markeras, avmarkeras alla de övriga i gruppen (en grupp består av två eller flera knappar med samma namn). I exemplet här nedanför är Flottfärd det markerade alternativet. Om användaren klickar på Surfning, avmarkeras knappen Flottfärd automatiskt.

Listmenyer

Visar alternativ i en rullbar lista. Användaren kan markera flera alternativ. Alternativet Lista visar alternativvärdena på en meny där användaren bara kan välja en rad. Använd menyer om utrymmet är begränsat och du behöver visa många artiklar eller om du vill ha kontroll över vilka värden som returneras till servern. Till skillnad från textfält, där användaren kan skriva vad han eller hon vill, även ogiltiga data, är resultaten från en meny exakta värden.

Obs!

En snabbmeny i ett HTML-formulär är inte detsamma som en grafisk snabbmeny. Information om hur du skapar, redigerar och visar en grafisk snabbmeny finns på länken i slutet av det här avsnittet.

Hoppmenyer

Är navigeringslistor eller snabbmenyer som gör det möjligt att infoga en meny där varje alternativ är en länk till ett dokument eller en fil.

Filfält

Gör det möjligt att bläddra till en fil på användarens dator och skicka in den som formulärdata.

Bildfält

Gör det möjligt att infoga en bild i ett formulär. Använd bildfält om du vill skapa grafiska knappar för att exempelvis skicka eller återställa formuläret. Om du vill använda en bild för att utföra andra åtgärder än att skicka in data måste du koppla ett beteende till formulärobjektet.

Skapa ett HTML-formulär

(Endast Creative Cloud-användare): Som en del av HTML5-stödet har nya attribut lagts till på panelen Egenskaper för formulärelement. Dessutom har fyra nya formulärelement (E-mail, Search, Telephone, URL) lagts till i avsnittet Formulär på panelen Infoga. Mer information finns i Förbättrat HTML5-stöd för formulärelement.

  1. Öppna en sida och placera insättningspunkten där du vill att formuläret ska visas.
  2. Välj Infoga > Formulär eller välj kategorin Formulär på panelen Infoga och klicka på ikonen Formulä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.

  3. 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.

  4. 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.

    Obs!

    Om dialogrutan Hjälpattribut för inmatningskod inte visas kan det ha funnits en inmatningspunkt i kodvyn när du försökte att infoga formulärobjektet. Se till att inmatningspunkten är i designvyn och försök igen. Mer information finns i artikeln Skapa HTML-formulär i Dreamweaver av David Powers.

    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.

    Obs!

    Alla alternativknappar i en grupp måste ha samma namn.

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

  5. Anpassa formulärets layout.

    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.

En självstudiekurs om hur du skapar formulär finns på www.adobe.com/go/vid0160_se.

En självstudiekurs om hur du formaterar formulär med CSS finns på www.adobe.com/go/vid0161_se.

Textfältobjekts egenskaper

Markera textfältobjektet och ange någon av följande alternativ i egenskapskontrollen:

Teckenbredd

Anger det maximala antalet tecken som fältet kan visa. Talet måste vara mindre än Max. tecken, ett värde som anger det maximala antalet tecken som går att mata in i fältet. Om Teckenbredd exempelvis har värdet 20 (standardvärdet) och användaren matar in 100 tecken går det bara att se 20 av dem i textfältet. Även om det inte går att se tecknen i fältet sparar fältobjektet dem och de skickas till servern för bearbetning.

Max. tecken

Anger det maximala antalet tecken som användaren kan mata in i ett textfält på en rad. Använd Max. tecken om du vill begränsa postnummer till fem siffror, lösenord till tio tecken och så vidare. Om du låter rutan Max. tecken vara tom kan användaren mata in hur mycket text som helst. Om texten är längre än fältets teckenbredd skrollas texten i sidled. Om användaren försöker skriva in fler än det tillåtna antalet tecken ger formuläret ifrån sig en signal.

Antal rader

(Tillgänglig då alternativet Flera rader har angetts) Anger fälthöjden för textfält med flera rader.

Inaktiverad

Inaktiverar textområdet.

Skrivskyddad

Gör att textområdet blir skrivskyddat.

Typ

Betecknar att fältet är ett enkel- eller flerradigt textfält eller ett lösenordsfält.

En rad

Resulterar i en input-tagg med ett type-attributet med värdet text. Inställningen Teckenbredd är kopplad till size-attributet och inställningen Max. tecken är kopplad till maxlength-attributet.

Flera rader

Resulterar i en textarea-tagg. Inställningen Teckenbredd är kopplad till cols-attributet och inställningen Antal rader är kopplad till rows-attributet.

Lösenord

Resulterar i en input-tagg med ett type-attributet med värdet password. Inställningarna Teckenbredd och Max. tecken avbildas på samma attribut i enkelradiga textfält. När en användare skriver i ett lösenordsfält visas texten som punkter eller asterisker så att ingen annan ska kunna läsa den.

Startvärde

Tilldelar det visade värdet till fältet när formuläret läses in. Du kan till exempel visa att användaren måste ange information i fältet genom att infoga en anmärkning eller ett exempelvärde.

Klass

Gör att du kan tillämpa CSS-regler på objektet.

Alternativ för knappar

Knappnamn

Tilldelar knappen ett namn. Två reserverade namn, Submit och Reset, gör att formuläret skickar formuläruppgifterna till det bearbetande programmet eller skriptet respektive återställer alla formulärfält till ursprungsvärdena.

Värde

Är texten som visas på knappen.

Åtgärd

Avgör vad som händer när knappen klickas.

Skicka formulär

Gör att formuläruppgifterna skickas för bearbetning när användaren klickar på knappen. Uppgifterna skickas till sidan eller skriptet som anges i formuläregenskapen Åtgärd.

Återställ formulär

Rensar innehållet i formuläret då knappen klickas.

Ingen

Är åtgärden som ska utföras när knappen klickas. Du kan till exempel lägga till ett JavaScript-beteende som gör att en annan sida öppnas när användaren klickar på knappen.

Klass

Tillämpar CSS-regler på objektet.

Alternativ för kryssruteobjekt

Värde vid markering

Anger vilket värde som ska skickas till servern då kryssrutan är markerad. I en enkät skulle du till exempel kunna ange värdet 4 för ”Jag håller med till fullo” och värdet 1 för ”Jag håller inte alls med”.

Ursprungligt läge

Avgör om kryssrutan markeras då formuläret läses in i webbläsaren.

Dynamisk

Innebär att servern dynamiskt kan bestämma kryssrutans ursprungsvärde. Du kan till exempel använda kryssrutor för att visuellt presentera information av ja/nej-typ i en databaspost. I designläge har du inte tillgång till den informationen. Vid körning läser servern databasposten och markerar kryssrutan om värdet är Ja.

Klass

Använder CSS-regler (Cascading Style Sheets) på objektet.

Alternativ för enskilda alternativknappar

Värde vid markering

Anger vilket värde som ska skickas till servern då alternativknappen är markerad. Du kan till exempel skriva skidåkning i rutan Värde vid markering för att ange att en användare valde skidåkning.

Ursprungligt läge

Avgör om alternativknappen ska vara markerad då formuläret läses in i webbläsaren.

Dynamisk

Innebär att servern dynamiskt kan ta reda på alternativknappens ursprungsvärde. Du kan till exempel använda alternativknappar för att visuellt presentera information i en databaspost. I designläge har du inte tillgång till den informationen. Vid körning läser servern databasposten och markerar alternativknappen om värdet motsvarar det du angav.

Klass

Tillämpar CSS-regler på objektet.

Lista/meny

Tilldelar menyn ett namn. Namnet måste vara unikt

Typ

Indikerar huruvida menyn rullar ned då användaren klickar på den (alternativet Meny) eller visar en bläddringsbar lista med objekt (alternativet Lista). Välj alternativet Meny om du bara vill att ett alternativ ska vara synligt då formuläret visas i en webbläsare. Användaren måste klicka på den nedåtriktade pilen för att visa övriga alternativ.

Välj alternativet Lista om du vill lista vissa eller alla alternativ då formuläret visas i en webbläsare. Användarna kan markera flera poster.

Höjd

(Endast typen Lista) Anger hur många alternativ på menyn som visas.

Markeringar

(Endast typen Lista) Indikerar huruvida användaren kan markera flera alternativ i listan.

Listvärden

Öppnar en dialogruta där du kan lägga till alternativ på en formulärmeny.

  1. Lägg till och ta bort objekt på listan med plus- och minusknapparna.

  2. Ange en etikett och eventuellt ett värde för varje menyalternativ.

    Varje alternativ i listan har en etikett (den text som visas i listan) och ett värde (värdet som skickas till programmet om alternativet väljs). Om du inte har angett något värde skickas etiketten till programmet i stället.

  3. Använd upp- och nedpilarna om du vill ordna om alternativen i listan.

    Alternativen visas i samma ordning på menyn som de visas i dialogrutan Listvärden. Det första alternativet på listan är markerat när sidan läses in av en webbläsare.

Dynamisk

Innebär att servern dynamiskt väljer ett alternativ på en meny då den visas första gången.

Klass

Gör att du kan tillämpa CSS-regler på objektet.

Markerat från början

Anger de alternativ på listan som är markerade från början. Klicka på alternativet eller alternativen i listan.

Infoga filöverföringsfält

Du kan skapa ett filöverföringsfält där användarna kan välja en fil på sina datorer (till exempel ett ordbehandlingsdokument eller en grafikfil) och skicka den till servern. Ett filfält ser precis ut som andra textfält, förutom att det finns en bläddringsknapp. Användaren skriver antingen själv sökvägen till filen som hon vill skicka eller klickar på Bläddra och letar reda på och väljer filen.

Innan du kan använda ett filöverföringsfält måste det finnas ett serverskript eller en sida som klarar av att ta emot filer. Läs dokumentationen om den serverteknik som du använder för att bearbeta data från formulär. Om du till exempel använder PHP kan du läsa mer under Hantera filöverföringar i den PHP-handbok som finns på http://us2.php.net/features.file-upload.php.

Filfält kräver metoden POST för att överföra filerna från webbläsaren till servern. Filen skickas till den adress som du anger i rutan Åtgärd i formuläret.

Obs!

Kontakta serveradministratören och bekräfta att anonym filöverföring är tillåten innan du använder filfältet.

  1. Infoga ett formulär på sidan (Infoga > Formulär).
  2. Markera formuläret så att det visas i egenskapskontrollen.
  3. Ange formulärmetoden POST.
  4. På snabbmenyn Kodningstyp väljer du multipart/form-data.
  5. Ange serverskriptet eller en sida som kan hantera filöverföringar i rutan Åtgärd.
  6. Placera insättningspunkten innanför formulärets ram och välj Infoga > Formulär > Filfält.
  7. Ange följande alternativ i egenskapskontrollen:

    Filfältsnamn

    Är namnet på filfältobjektet.

    Teckenbredd

    Anger det maximala antalet tecken som fältet kan visa.

    Max. tecken

    Anger det maximala antalet tecken som fältet rymmer. Om användaren bläddrar efter filen kan filnamnet och sökvägen överskrida det angivna värdet på Max. tecken. Om användaren emellertid försöker skriva in filnamnet och sökvägen rymmer filfältet bara det antal tecken som anges i värdet Max. tecken.

Infoga en bildknapp

Du kan använda bilder som knappikoner. Om du vill använda en bild för att utföra andra åtgärder än att skicka in data måste du koppla ett beteende till formulärobjektet.

  1. Placera insättningspunkten innanför formulärets ram i dokumentet.
  2. Välj Infoga > Formulär > Bildfält.

    Dialogrutan Välj bildkälla visas.

  3. Välj bilden till knappen i dialogrutan Markera bildkälla och klicka på OK.
  4. Ange följande alternativ i egenskapskontrollen:

    Bildfält

    Tilldelar knappen ett namn. Två reserverade namn, Submit och Reset, gör att formuläret skickar formuläruppgifterna till det bearbetande programmet eller skriptet respektive återställer alla formulärfält till ursprungsvärdena.

    Källa

    Anger den bild du vill ha på knappen.

    Alt

    Gör det möjligt att ange en beskrivning om bilden inte går att läsa in i webbläsaren.

    Justera

    Ställer in objektets justeringsattribut.

    Redigera bild

    Startar standardbildprogrammet och bildfilen öppnas för redigering.

    Klass

    Gör att du kan tillämpa CSS-regler på objektet.

  5. Du kan koppla ett JavaScript-beteende till knappen genom att markera bilden och sedan välja beteendet på panelen Beteenden (Fönster > Beteenden).

Alternativ för dolda fält

Dolt fält

Är namnet på fältet.

Värde

Ger fältet ett värde. Värdet skickas till servern när formuläret skickas iväg.

Infoga en grupp av alternativknappar

  1. Placera insättningspunkten innanför formulärets ram.

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

  3. 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.

Infogar en grupp kryssrutor

  1. Placera insättningspunkten innanför formulärets ram.

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

  3. 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.

Om dynamiska formulärobjekt

Ett dynamiskt formulärobjekt är ett objekt vars ursprungliga tillstånd bestäms av servern då sidan hämtas från servern, inte av formulärets designer under designen. Om en användare exempelvis hämtar en PHP-sida med ett formulär med en meny, fyller ett PHP-skript på sidan automatiskt menyn med värden som lagras i en databas. Servern skickar sedan den färdigställda sidan till användarens webbläsare.

Det kan bli enklare att administrera webbplatsen genom att göra formulärobjekt dynamiska. Många webbplatser utnyttjar exempelvis menyer för att ge användarna ett antal valmöjligheter. Om menyn är dynamisk kan du lägga till, ta bort eller ändra menyalternativ från ett och samma ställe (databastabellen där alternativen lagras) och uppdatera alla instanser av samma meny på webbplatsen.

Infoga eller ändra en dynamisk HTML-formulärmeny

Du kan fylla en HTML-formulärmeny eller en listmeny dynamiskt med information från en databas. På de flesta sidor kan du använda ett HTML-menyobjekt.

Innan du börjar måste du infoga ett HTML-formulär på en ColdFusion-, PHP- eller ASP-sida, och du måste definiera en postmängd eller någon annan dynamisk innehållskälla för menyn.

  1. 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.

  2. 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.

  3. 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.

     

Göra befintliga HTML-formulärmenyer dynamiska

  1. Markera list/menyformulärobjektet i designläge.
  2. Klicka på knappen Dynamisk i egenskapskontrollen.
  3. Fyll i dialogrutan och klicka på OK.

Visa dynamiskt innehåll i HTML-textfält

Du kan visa dynamiskt innehåll i HTML-textfält då formuläret visas i en webbläsare.

Innan du börjar måste du skapa formuläret på en ColdFusion-, PHP- eller ASP-sida, och du måste definiera en postmängd eller någon annan dynamisk innehållskälla för textfältet.

  1. Markera textfältet i HTML-formuläret på sidan.
  2. Klicka på blixtikonen bredvid rutan Startvärde i egenskapskontrollen. Då visas dialogrutan Dynamiska data.
  3. Välj den kolumn i postmängden där textfältets värde ska hämtas och klicka sedan på OK.

Ange alternativen i dialogrutan Dynamiskt textfält

  1. Markera fältet som du vill göra dynamiskt på snabbmenyn Textfält.
  2. Klicka på blixtikonen bredvid rutan Sätt värdet till, välj en datakälla i listan med datakällor och klicka på OK.

    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.

Markera en HTML-kryssruta dynamiskt i förväg

Du kan låta servern ta beslutet om huruvida en kryssruta ska vara markerad när formuläret visas i en webbläsare.

Innan du börjar måste du skapa formuläret på en ColdFusion-, PHP- eller ASP-sida, och du måste definiera en postmängd eller någon annan dynamisk innehållskälla för kryssrutorna. Det är bäst om källan innehåller booleska data, till exempel Ja/Nej eller sant/falskt.

  1. Markera en kryssruta på sidan.
  2. Klicka på knappen Dynamisk i egenskapskontrollen.
  3. Fyll i dialogrutan Dynamisk kryssruta och klicka på OK:

    • 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.

    Obs!

    Värdet returneras till servern om användaren klickar på Skicka.

Markera en HTML-alternativknapp dynamiskt

Markera en HTML-alternativknapp dynamiskt när en post visas i HTML-formuläret i en webbläsare.

Innan du börjar måste du skapa formuläret på en ColdFusion-, PHP- eller ASP-sida och infoga åtminstone en grupp med HTML-alternativknappar (Infoga > Formulär > Alternativknappar). Du måste även definiera en postmängd eller någon annan källa med dynamiskt innehåll för alternativknapparna. Det är bäst om källan innehåller booleska data, till exempel Ja/Nej eller sant/falskt.

  1. Markera en alternativknapp i gruppen i designläge.
  2. Klicka på knappen Dynamisk i egenskapskontrollen.
  3. Fyll i dialogrutan Grupp med dynamiska alternativknappar och klicka på OK:

Ange alternativen i dialogrutan Grupp med dynamiska alternativknappar

  1. Välj ett formulär och en grupp med alternativknappar på snabbmenyn Grupp med dynamiska alternativknappar.

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

  2. Välj ett värde som ska markeras dynamiskt i värdelistan. Värdet visas i rutan Värde.
  3. Klicka på blixtikonen bredvid rutan Välj ett värde som är lika med och välj en postmängd som innehåller de tänkbara värdena för alternativknapparna 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).

  4. Klicka på OK.

Ange alternativen i dialogrutan Grupp med dynamiska alternativknappar (ColdFusion)

  1. Markera en grupp med alternativknappar och ett formulär på snabbmenyn Grupp med alternativknappar.
  2. Klicka på blixtikonen bredvid rutan Välj ett värde som är lika med.

  3. 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.

  4. Stäng dialogrutan Grupp med dynamiska alternativknappar genom att klicka på OK och infoga platshållaren för dynamiskt innehåll i gruppen med alternativknappar.

Verifiera data i HTML-formulär

Dreamweaver kan lägga till JavaScript-kod som kontrollerar innehållet i angivna textfält och ser till att användaren har angett data i rätt format.

Du kan använda Spry-formulärwidgetar för att skapa formulär och verifiera innehållet i angivna formulärelement. Mer information finns i Spry-avsnitten nedan.

Du kan även ställa samman ColdFusion-formulär i Dreamweaver som verifierar innehållet i angivna fält. Mer information finns i ColdFusion-avsnitten nedan.

  1. Skapa ett HTML-formulär med åtminstone ett textfält och en Skicka-knapp.

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

  2. Markera Skicka-knappen.
  3. Klicka på plusknappen på panelen Beteenden (Fönster > Beteenden) och välj beteendet Validera formulär i listan.
  4. Ange verifieringsreglerna för varje textfält och klicka på OK.

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

    Obs!

    Beteendet Validera formulär är bara tillgängligt om ett textfält har infogats i dokumentet.

Koppla JavaScript-beteenden till HTML-formulärobjekt

Du kan koppla JavaScript-beteenden som lagras i Dreamweaver till HTML-formulärobjekt som knappar.

  1. Markera HTML-formulärobjektet.
  2. Klicka på plusknappen på panelen Beteenden (Fönster > Beteenden) och välj ett beteende i listan.

Koppla egna skript till HTML-formulärknappar

Vissa formulär utnyttjar JavaScript eller VBScript för att behandla formulär eller göra andra åtgärder på klienten i stället för att skicka formulärdata till servern för behandling. Du kan använda Dreamweaver om du vill konfigurera en formulärknapp så att den kör ett specifikt klientskript när användaren klickar på knappen.

  1. Välj knappen Skicka i ett formulär.
  2. Klicka på plusknappen på panelen Beteenden (Fönster > Beteenden) och välj Anropa JavaScript i listan.
  3. Ange namnet på JavaScript-funktionen som ska köras då användaren klickar på knappen i rutan Anropa JavaScript och klicka på OK.

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

  4. Om JavaScript-funktionen inte finns i dokumentets head-avsnitt ännu lägger du till den nu.

    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:

    function processMyForm(){ 
    alert('Thanks for your order!'); 
}

Skapa tillgängliga HTML-formulär

När du infogar ett HTML-formulärobjekt kan du göra det tillgängligt och sedermera ändra tillgänglighetsattributen.

Lägga till ett tillgängligt formulärobjekt

  1. Första gången som du lägger till tillgängliga formulärobjekt visar du dialogrutan Hjälpmedel för formulärobjekt (se Optimera arbetsytan för visuell utveckling).

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

  2. Placera insättningspunkten där du vill att formulärobjektet ska visas i dokumentet.
  3. Välj Infoga > Formulär och välj ett formulärobjekt som du vill infoga.

    Dialogrutan Hjälpattribut för inmatningskod visas.

  4. Fyll i dialogrutan och klicka på OK. Nedan visas en lista med en del av alternativen:
    Obs!

    Skärmläsaren läser upp namnet som du anger som etikettattribut för objektet.

    ID

    Tilldelar formulärfältet ett ID. Det här värdet kan användas för att referera till fältet från JavaScript. Det används också som värde för for-attributet om du markerar alternativet Koppla etikettkod med attributet 'for' under alternativen för format.

    Radbryt med etikettagg

    Gör att en label-tagg infogas runt formulärobjektet på följande sätt:

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    Koppla etikettagg med attributet 'for'

    Använder for-attributet för att infoga en label-tagg runt formulärobjektet på följande sätt:

    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

    Det här valet gör att webbläsaren utformar texten som hör till en kryssruta och en alternativknapp med en fokusrektangel och ger användaren möjlighet att markera kryssrutan och alternativknappen genom att klicka var som helst inom texten i stället för bara på kryssrutan eller alternativknappen.

    Obs! Det här alternativet rekommenderas för tillgänglighet, men funktionen varierar i olika webbläsare.

    Ingen etikettkod

    Innebär att ingen label-tagg används:

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    Snabbtangent

    Innebär att det går att välja formulärobjektet med en bokstav och Alt-tangenten (Windows) eller Kontroll-tangenten (Macintosh) i webbläsaren. Om du till exempel anger B som snabbtangent kan användare med en Macintosh-webbläsare skriva Kontroll+B när de vill markera formulärobjektet.

    Tabbindex

    Anger en tabbordning för formulärobjekten. Om du anger en tabbordning för ett objekt måste du ange ordningen för alla övriga objekt.

    Det är en god idé att ange tabbordningen om det finns andra länkar och formulärobjekt på sidan och du vill att användaren ska gå igenom dem i en viss ordning.

  5. Infoga en formulärtagg genom att klicka på Ja.

    Formulärobjektet dyker upp i dokumenten.

    Obs!

    Om du trycker på Avbryt visas formulärobjektet i dokumentet men Dreamweaver kopplar ingen tillgänglighetskod och inga attribut till den.

Redigera tillgänglighetsvärden för ett formulärobjekt

  1. Markera objektet i dokumentfönstret.
  2. Gör något av följande:

    • Redigera lämpliga attribut i kodläge.

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

Mer

Adobes logotyp

Logga in på ditt konto

Snabblänkar

Visa dina program Hantera dina planer

Juridiska meddelanden    |    Onlinesekretesspolicy