Webformulieren maken

Zoeken
Ga naar Adobe Dreamweaver Handboek
Opmerking:

Ondersteuning voor HTML-formulierelementen is verbeterd in Dreamweaver Creative Cloud-updates. Zie Verbeterde HTML5-ondersteuning voor formulierelementen voor meer informatie.

Over webformulieren

Wanneer een bezoeker informatie invoert in een webformulier dat in een webbrowser wordt weergegeven, en op de verzendknop klikt, wordt de informatie verstuurd naar de server waar deze wordt verwerkt door een script of toepassing op de server. De server antwoordt door de verwerkte informatie weer naar de gebruiker (of client) terug te sturen of door een andere actie uit te voeren op basis van de inhoud van het formulier.

U kunt formulieren maken die gegevens verzenden naar de meeste toepassingsservers, waaronder PHP, ASP en ColdFusion. Als u ColdFusion gebruikt, kunt u ook specifieke ColdFusion-formulierbesturingselementen aan uw formulieren toevoegen.

Opmerking:

U kunt de formuliergegevens ook rechtstreeks naar een e-mailontvanger versturen.

Formulierobjecten

In Dreamweaver worden formulierinvoertypen formulierobjecten genoemd. Formulierobjecten zijn de mechanismen waarmee gebruikers gegevens invoeren. U kunt de volgende formulierobjecten aan een formulier toevoegen:

Tekstvelden

Accepteren elk type alfanumerieke tekstinvoer. De tekst kan worden weergegeven op een enkele regel, op meerdere regels of als een wachtwoordveld waarin ingevoerde tekst wordt vervangen door sterretjes of opsommingstekens om het wachtwoord voor anderen te verbergen.

Opmerking:

Wachtwoorden en andere informatie die via een wachtwoordveld naar een server worden verzonden, worden niet versleuteld. De overgebrachte gegevens kunnen worden onderschept en als alfanumerieke tekst worden gelezen. Daarom moet u gegevens die u wilt beveiligen, altijd versleutelen.

Verborgen velden

Slaan informatie op die een gebruiker heeft ingevoerd, zoals naam, e-mailadres of weergavevoorkeur. Deze gegevens worden opnieuw gebruikt wanneer de gebruiker de site nogmaals bezoekt.

Knoppen

Voeren acties uit wanneer erop wordt geklikt. U kunt een aangepaste naam of label voor een knop toevoegen, of een van de vooraf gedefinieerde tags 'Verzenden' of 'Beginwaarden' gebruiken. Gebruik een knop om formuliergegevens naar de server te verzenden of de beginwaarden van het formulier te herstellen. U kunt ook andere verwerkingstaken toekennen die u in een script definieert. U kunt bijvoorbeeld een knop invoegen om de totale kosten van geselecteerde items te berekenen op basis van toegewezen waarden.

Selectievakjes

Hiermee maakt u meerdere antwoorden in een enkele groep opties mogelijk. Een gebruiker kan net zoveel opties selecteren als van toepassing kunnen zijn. In het volgende voorbeeld ziet u hoe drie selectievakjes zijn geselecteerd: Surfen, Mountainbiken en Raften.

Keuzerondjes

Hiermee worden exclusieve keuzen voorgesteld. Wanneer u een optie in een groep keuzerondjes selecteert, worden alle andere opties in de groep uitgeschakeld (een groep bestaat uit twee of meer knoppen met dezelfde naam). In het onderstaande voorbeeld is de optie Raften geselecteerd. Als de gebruiker op Surfen klikt, wordt de optie Raften automatisch uitgeschakeld.

Lijstmenu's

Geven optiewaarden weer in een bladerlijst waarin gebruikers meerdere opties kunnen selecteren. De optie Lijst geeft de optiewaarden weer in een menu waarin gebruikers slechts één item kunnen selecteren. Gebruik menu's wanneer u beperkte ruimte hebt en toch veel items moet weergeven, of als u de waarden die aan de server worden geretourneerd, moet controleren. In tegenstelling tot tekstvelden, waarin gebruikers alles kunnen typen wat ze willen, zelfs ongeldige gegevens, stelt u de exacte waarden in die door een menu worden geretourneerd.

Opmerking:

Een pop-upmenu in een HTML-formulier is niet hetzelfde als een grafisch pop-upmenu. Voor informatie over het maken, bewerken en weergeven of verbergen van een grafisch pop-upmenu volgt u de koppeling aan het einde van deze sectie.

Snelmenu's

Navigeerbare lijsten of pop-upmenu's waarmee u een menu kunt invoegen waarin elke optie is gekoppeld aan een document of bestand.

Bestandsvelden

Hiermee kunnen gebruikers naar een bestand op hun computer bladeren en het bestand als formuliergegevens uploaden.

Afbeeldingsvelden

Kunt u een afbeelding in een formulier invoegen. Gebruik afbeeldingsvelden om grafische knoppen te maken zoals de knoppen Verzenden of Beginwaarden. Wanneer u een afbeelding gebruikt om andere taken dan het verzenden van gegevens uit te voeren, moet u een gedrag aan het formulierobject koppelen.

Een HTML-formulier maken

(Alleen Creative Cloud-gebruikers): Er zijn nieuwe kenmerken aan het deelvenster Eigenschappen voor formulierelementen toegevoegd als onderdeel voor ondersteuning van HTML5. Daarnaast zijn er vier nieuwe formulierelementen (E-mail, Zoeken, Telefoon, URL) toegevoegd aan de sectie Formulieren van het deelvenster Invoegen. Zie Verbeterde HTML5-ondersteuning voor formulierelementen voor meer informatie.

  1. Open een pagina en plaats de invoegpositie op de plaats waar u het formulier wilt weergeven.
  2. Kies Invoegen > Formulier of selecteer de categorie Formulieren in het deelvenster Invoegen en klik op het pictogram Formulier.

    In de ontwerpweergave worden formulieren aangeduid met een gestippelde rode omtrek. Als u deze omtrek niet ziet, kiest u Weergave > Visuele hulpmiddelen > Onzichtbare elementen.

  3. Stel de eigenschappen van het HTML-formulier in de eigenschappencontrole in (Venster > Eigenschappen):

    a. Klik in het documentvenster op de formulieromtrek om het formulier te selecteren.

    b. Typ in het vak Formuliernaam een unieke naam voor het formulier.

    Door een formulier een naam te geven, kunt u er met een scripttaal, zoals JavaScript of VBScript, naar verwijzen of het besturen. Als u het formulier geen naam geeft, genereert Dreamweaver een naam volgens het patroon formn, waarbij de waarde van n wordt verhoogd voor elk formulier dat aan de pagina wordt toegevoegd.

    c. Geef in het vak Actie de pagina of het script op dat de formuliergegevens verwerkt. Daartoe typt u het pad of klikt u op het mappictogram om naar de desbetreffende pagina of het juiste script te navigeren. Voorbeeld: processorder.php.

    d. Geef in het pop-upmenu Methode de methode op waarmee de formuliergegevens naar de server worden overgebracht.

    Stel vervolgens de volgende opties naar wens in:

    Standaard Met deze optie wordt de standaardinstelling van de browser gebruikt om de formuliergegevens naar de server te verzenden. De methode GET is de standaardmethode.

    GET Hiermee wordt de waarde toegevoegd aan de URL die de pagina opvraagt.

    POST Hiermee worden de formuliergegevens in het HTTP-verzoek ingesloten.

    Gebruik GET niet om lange formulieren te verzenden. URL's zijn beperkt tot 8192 tekens. Als de hoeveelheid verzonden gegevens te groot is, worden gegevens afgekapt, wat onverwachte of geen resultaten oplevert.

    U kunt bladwijzers toevoegen aan dynamische pagina's die zijn gegenereerd door parameters doorgegeven via de methode GET, omdat alle benodigde waarden voor het opnieuw genereren van de pagina zijn opgenomen in de URL die in het adresvak van de browser wordt weergegeven. Dynamische pagina's die worden gegenereerd door parameters die met de methode POST zijn doorgegeven, kunnen echter niet met een bladwijzer worden gemarkeerd.

    Als u vertrouwelijke gebruikersnamen en wachtwoorden, creditcardnummers of andere vertrouwelijke informatie verzamelt, lijkt de methode POST misschien veiliger dan de methode GET. De informatie die met de methode POST wordt verzonden, is echter niet gecodeerd en kan eenvoudig door een hacker worden onderschept. Gebruik een beveiligde verbinding met een beveiligde server als u veiligheid wilt waarborgen.

     

    e. (Optioneel) Geef in het pop-upmenu Enctype het MIME-coderingstype op van de gegevens die voor verwerking naar de server worden verzonden.

    De standaardinstelling van application/x-www-form-urlencode wordt gewoonlijk gebruikt in combinatie met de methode POST. Als u een veld voor het laden van een bestand maakt, geeft u het MIME-type multipart/form‑data op.

     

    f. (Optioneel) Geef in het pop-upmenu Doel het venster op waarin u de gegevens wilt weergeven die door het geactiveerde programma worden geretourneerd.

    Als het genoemde venster nog niet is geopend, wordt een nieuw venster met die naam geopend. Stel een van de volgende doelwaarden in:

    _blank Hiermee wordt het doeldocument in een nieuw, naamloos venster geopend.

    _parent Hiermee wordt het doeldocument geopend in het bovenliggende venster van het venster waarin het huidige document wordt weergegeven.

    _self Hiermee wordt het doeldocument geopend in hetzelfde venster als het venster waarin het formulier is verzonden.

    _top Hiermee wordt het doeldocument geopend in het huidige venster. Deze waarde kan worden gebruikt om ervoor te zorgen dat het doeldocument het volledige venster overneemt, zelfs als het originele document in een frame wordt weergegeven.

  4. Voeg formulierobjecten op de pagina in:

    a. Plaats de invoegpositie op de plaats waar het formulierobject in het formulier moet worden weergegeven.

    b. Selecteer het object in het menu Invoegen > Formulier of in de categorie Formulieren van het deelvenster Invoegen.

    c. Geef de waarden op in het dialoogvenster Toegankelijkheidskenmerken van de invoertag. Klik in het dialoogvenster op Help voor meer informatie.

    Opmerking:

    Als het dialoogvenster Toegankelijkheidskenmerken van de invoertag niet wordt weergegeven, was mogelijk de codeweergave actief voor het invoegpunt toen u hebt geprobeerd om het formulierobject in te voegen. Controleer of de ontwerpweergave actief is voor het invoegpunt en probeer het opnieuw. Meer informatie over dit onderwerp vindt u in het artikel van David Powers, Creating HTML forms in Dreamweaver.

    d. Stel de eigenschappen van de objecten in.

    e. Voer een naam voor het object in de eigenschappencontrole in.

    Elk tekstveld, verborgen veld, selectievakje en lijst-/menuobject moet een unieke naam hebben die het object in het formulier aanduidt. Namen van formulierobjecten mogen geen spaties of speciale tekens bevatten. U kunt elke combinatie van alfanumerieke tekens en een onderstrepingsteken (_) gebruiken. De label die u aan het object toekent, is de naam van de variabele waarin de waarde van het veld (het ingevoerde gegeven) is opgeslagen. Dit is de waarde die voor verwerking naar de server wordt verzonden.

    Opmerking:

    Alle keuzerondjes in een groep moeten dezelfde naam hebben.

    f. Als u het tekstveld-, selectievakje- of keuzerondje-object op de pagina een label wilt geven, klikt u naast het object en typt u de label.

  5. Pas de indeling van het formulier aan.

    Gebruik regeleinden, alinea-einden, vooraf opgemaakte tekst of tabellen om uw formulieren op te maken. U kunt geen formulier in een ander formulier invoegen (u kunt tags dus niet overlappen), maar u kunt wel meer dan één formulier op een pagina opnemen.

    Vergeet niet om bij het ontwerpen van formulieren de formuliervelden van een beschrijvende tekstlabel te voorzien, zodat gebruikers weten wat ze moeten invoeren, bijvoorbeeld “Typ uw naam” als u de naam wilt verkrijgen.

    Gebruik tabellen om formulierobjecten en veldlabels te structureren. Wanneer u tabellen in formulieren gebruikt, moet u ervoor zorgen dat alle table-tags zijn opgenomen tussen form-tags.

Ga naar www.adobe.com/go/vid0160_nl voor een zelfstudie over formulieren maken.

Ga naar www.adobe.com/go/vid0161_nl voor een zelfstudie over stijlformulieren met CSS.

Objecteigenschappen tekstveld

Selecteer het tekstveldobject en stel de volgende opties in de eigenschappencontrole in:

Tekenbreedte

Hiermee geeft u het maximaal aantal tekens op dat in het veld kan worden weergegeven. Deze waarde kan kleiner zijn dan Maximum aantal tekens, het maximum aantal tekens dat in het veld kan worden ingevoerd. Als Tekenbreedte bijvoorbeeld is ingesteld op 20 (de standaardwaarde) en een gebruiker 100 tekens invoert, zijn slechts 20 tekens in het tekstveld zichtbaar. De tekens worden wel door het veldobject herkend en voor verwerking naar de server verzonden, ook al kunt u ze niet in het veld zien.

Maximum aantal tekens

Hiermee bepaalt u het maximum aantal tekens dat de gebruiker in het veld kan invoeren voor tekstvelden die uit één regel bestaan. Gebruik Maximum aantal tekens bijvoorbeeld om postcodes te beperken tot 6 tekens, om wachtwoorden te beperken tot 10 tekens enzovoort. Als u het vak Maximum aantal tekens leeg laat, kunnen gebruikers een willekeurige hoeveelheid tekst invoeren. Als de tekst langer is dan de tekenbreedte van het veld, loopt de tekst door. Als een gebruiker het maximum aantal tekens overschrijdt, is een signaal hoorbaar.

Aantal lijnen

Met deze optie, die beschikbaar is wanneer de optie Meerdere regels is geselecteerd, stelt u de hoogte in van het veld voor tekstvelden met meerdere regels.

Uitgeschakeld

Hiermee schakelt u het tekstgebied uit.

Alleen-lezen

Hiermee verandert u het tekstgebied in een alleen-lezen tekstgebied.

Type

Hiermee geeft u aan of het veld een veld van één regel, een veld van meerdere regels of een wachtwoordveld is.

Eén regel

Dit resulteert in een input-tag waarvan het kenmerk type is ingesteld op text. De instelling Tekenbreedte komt overeen met het kenmerk size en de instelling Maximum aantal tekens komt overeen met het kenmerk maxlength.

Meerdere regels

Dit resulteert in een textarea-tag. De instelling Tekenbreedte komt overeen met het kenmerk cols en de instelling Aantal regels komt overeen met het kenmerk rows.

Wachtwoord

Dit resulteert in een input-tag waarvan het kenmerk type is ingesteld op text. De instellingen Tekenbreedte en Maximum aantal tekens komen overeen met dezelfde kenmerken als in tekstvelden van één regel. Wanneer een gebruiker tekst in een wachtwoordveld typt, wordt de invoer als sterretjes of opsommingstekens weergegeven zodat anderen de invoer niet kunnen zien.

Beginwaarde

Hiermee kent u de waarde toe die in het veld wordt weergegeven wanneer het formulier de eerste keer wordt geladen. U kunt bijvoorbeeld opgeven dat de gebruiker informatie in het veld invoert door een opmerking of voorbeeldgegeven op te nemen.

Klasse

Hiermee kunt u CSS-regels op het object toepassen.

Opties van knopobjecten

Knopnaam

Hiermee geeft u de knop een naam. Met de twee gereserveerde namen, Verzenden en Beginwaarden, kunt u respectievelijk opgeven dat de formuliergegevens moeten worden verzonden naar de toepassing of het script dat de gegevens verwerkt, of dat alle formuliervelden moeten worden teruggezet op hun beginwaarden.

Waarde

Hiermee geeft u de tekst op die op de knop moet worden weergegeven.

Actie

Hiermee bepaalt u wat er gebeurt wanneer op de knop wordt geklikt.

Formulier verzenden

Wanneer de gebruiker op de knop klikt, worden de formuliergegevens voor verwerking verzonden. De gegevens worden verzonden naar de pagina of het script dat in de eigenschap Actie van het formulier is opgegeven.

Formulier op beginwaarden instellen

Wanneer de gebruiker op de knop klikt, wordt de inhoud van het formulier gewist.

Geen

Hiermee bepaalt u de actie die moet worden uitgevoerd wanneer op de knop wordt geklikt. U kunt bijvoorbeeld een JavaScript-gedrag toevoegen dat een andere pagina opent wanneer de gebruiker op de knop klikt.

Klasse

Hiermee worden CSS-regels op het object toegepast.

Objectopties selectievakje

Geselecteerde waarde

Hiermee stelt u de waarde in die naar de server wordt verzonden wanneer het selectievakje is ingeschakeld. In een onderzoek kunt u bijvoorbeeld de waarde 4 instellen voor 'Helemaal mee eens' en de waarde 1 voor 'Helemaal niet mee eens'.

Status bij openen

Hiermee bepaalt u of het selectievakje is ingeschakeld wanneer het formulier in de browser wordt geladen.

Dynamisch

Hiermee laat u de server dynamisch de begintoestand van het selectievakje bepalen. U kunt selectievakjes bijvoorbeeld gebruiken om de Ja/Nee-informatie die in een databaserecord is opgeslagen, visueel voor te stellen. Die informatie is in de ontwerpfase nog niet bekend. In runtime leest de server de databaserecord en wordt het selectievakje ingeschakeld als de waarde Ja is.

Klasse

Hiermee worden de CSS-regels (Cascading Style Sheets) op het object toegepast.

Opties van enkelvoudige keuzerondje-objecten

Geselecteerde waarde

Hiermee stelt u de waarde in die naar de server wordt verzonden wanneer het keuzerondje is ingeschakeld. Typ bijvoorbeeld skiën in het vak Geselecteerde waarde om aan te geven dat een gebruiker skiën heeft gekozen.

Status bij openen

Hiermee bepaalt u of het keuzerondje is ingeschakeld wanneer het formulier in de browser wordt geladen.

Dynamisch

Hiermee laat u de server dynamisch de begintoestand van het keuzerondje bepalen. Met keuzerondjes kunt u bijvoorbeeld informatie die in een databaserecord is opgeslagen, visueel voorstellen. Die informatie is in de ontwerpfase nog niet bekend. In runtime leest de server de databaserecord en wordt het keuzerondje ingeschakeld als de waarde overeenkomt met een door u opgegeven waarde.

Klasse

Hiermee worden CSS-regels op het object toegepast.

Lijst/Menu

Hiermee geeft u het menu een naam. De naam moet uniek zijn.

Type

Hiermee geeft u aan of het menu wordt geopend wanneer erop wordt geklikt (optie Menu), of als een lijst met items wordt weergegeven (optie Lijst). Kies de optie Menu als u wilt dat maar één optie zichtbaar is wanneer het formulier in een browser wordt weergegeven. Om de andere opties weer te geven, moet de gebruiker op de vervolgkeuzepijl klikken.

Kies de optie Lijst als u enkele of alle opties wilt weergeven wanneer het formulier in een browser wordt weergegeven, en als gebruikers meerdere items kunnen selecteren.

Hoogte

(Alleen type Lijst) Hiermee stelt u in hoeveel items in het menu worden weergegeven.

Selecties

(Alleen type Lijst) Hiermee geeft u aan of de gebruiker meerdere items in de lijst kan selecteren.

Lijstwaarden

Hiermee opent u een dialoogvenster waarmee u de items aan een formuliermenu kunt toevoegen:

  1. Gebruik de plus- en minknop (+ en -) om items aan de lijst toe te voegen of uit de lijst te verwijderen.

  2. Voer labeltekst en een optionele waarde voor elk menu-item in.

    Elk item in de lijst heeft een label (de tekst die in de lijst staat) en een waarde (de waarde die wordt verstuurd naar de verwerkende toepassing als het item wordt geselecteerd). Als geen waarde is opgeven, wordt de label naar de verwerkende toepassing verstuurd.

  3. Gebruik de knoppen pijl-omhoog en -omlaag als u de volgorde van de items in de lijst wilt wijzigen.

    De volgorde van de items in het menu komt overeen met die in het dialoogvenster Lijstwaarden. Het eerste item in de lijst is het item dat is geselecteerd wanneer de pagina in een browser wordt geladen.

Dynamisch

Hiermee laat u de server dynamisch een item in het menu selecteren wanneer het formulier de eerste keer wordt weergegeven.

Klasse

Hiermee kunt u CSS-regels op het object toepassen.

In eerste instantie geselecteerd

Hiermee stelt u de items in die standaard in de lijst zijn geselecteerd. Klik op een of meer items in de lijst.

Velden voor het laden van bestanden invoegen

U kunt een veld voor het laden van bestanden maken waarmee gebruikers een bestand op hun computer (bijvoorbeeld een tekstverwerkingsdocument of grafisch bestand) kunnen selecteren en naar de server kunnen uploaden. Een bestandsveld ziet er net zo uit als andere tekstvelden, maar heeft eveneens een knop Bladeren. De gebruiker voert het pad naar het te laden bestand handmatig in of gebruikt de knop Bladeren om het bestand te zoeken en te selecteren.

Voordat u velden voor het laden van bestanden kunt gebruiken, moet u een script aan serverzijde of een pagina hebben die het verzenden van bestanden kan afhandelen. Raadpleeg de documentatie bij de servertechnologie die u gebruikt voor de verwerking van formuliergegevens. Als u bijvoorbeeld PHP gebruikt, raadpleegt u “Handling files uploads” in de online-PHP-handleiding op http://us2.php.net/features.file-upload.php.

Voor bestandsvelden moet u de methode POST gebruiken om bestanden van de browser naar de server over te brengen. Het bestand wordt gepost naar het adres dat u in het vak Actie van het formulier hebt opgegeven.

Opmerking:

Neem contact op met de serverbeheerder om te vragen of bestanden anoniem geladen mogen worden voordat u het bestandsveld gebruikt.

  1. Voeg een formulier op de pagina in (Invoegen > Formulier).
  2. Selecteer het formulier om de eigenschappencontrole weer te geven.
  3. Stel de formuliermethode in op POST.
  4. Selecteer in het pop-upmenu Enctype de optie multipart/form-data.
  5. Geef in het vak Actie het script of de pagina aan serverzijde op waardoor het geladen bestand wordt afgehandeld.
  6. Plaats de invoegpositie binnen de formulieromtrek en kies Invoegen > Formulier > Bestandsveld.
  7. Stel in de eigenschappencontrole een van de volgende opties in:

    Naam bestandsveld

    Hiermee geeft u de naam voor het bestandsveldobject op.

    Tekenbreedte

    Hiermee geeft u het maximaal aantal tekens op dat in het veld kan worden weergegeven.

    Maximum aantal tekens

    Hiermee geeft u het maximum aantal tekens op dat het veld kan bevatten. Als de gebruiker het bestand met de bladerknop zoekt, kan de bestandsnaam inclusief het pad de waarde van Maximum aantal tekens overschrijden. Als de gebruiker de bestandsnaam en het pad echter probeert in te voeren, accepteert het bestandsveld niet meer tekens dan met de waarde Maximum aantal tekens is opgegeven.

Een afbeeldingsknop invoegen

U kunt afbeeldingen als knoppictogrammen gebruiken. Wanneer u een afbeelding gebruikt om andere taken dan het verzenden van gegevens uit te voeren, moet u een gedrag aan het formulierobject koppelen.

  1. Plaats de invoegpositie binnen de formulieromtrek in het document.
  2. Selecteer Invoegen > Formulier > Afbeeldingsveld.

    Het dialoogvenster Afbeeldingsbron selecteren wordt geopend.

  3. Selecteer de afbeelding voor de knop in het dialoogvenster Afbeeldingsbron selecteren en klik op OK.
  4. Stel in de eigenschappencontrole een van de volgende opties in:

    Afbeeldingsveld

    Hiermee geeft u de knop een naam. Met de twee gereserveerde namen, Verzenden en Beginwaarden, kunt u respectievelijk opgeven dat de formuliergegevens moeten worden verzonden naar de toepassing of het script dat de gegevens verwerkt, of dat alle formuliervelden moeten worden teruggezet op hun beginwaarden.

    Bron

    Hiermee geeft u de afbeelding op die u voor de knop wilt gebruiken.

    Alt

    Hier kunt u beschrijvende tekst invoeren voor het geval de afbeelding niet in de browser kan worden geladen.

    Uitlijnen

    Hiermee stelt u het uitlijningskenmerk van het object in.

    Afbeelding bewerken

    Hiermee start u de standaardafbeeldingseditor en wordt het afbeeldingsbestand voor bewerken geopend.

    Klasse

    Hiermee kunt u CSS-regels op het object toepassen.

  5. Als u een JavaScript-gedrag aan de knop wilt koppelen, selecteert u eerst de afbeelding en vervolgens het gedrag in het deelvenster Gedrag (Venster > Gedrag).

Opties van verborgen-veldobjecten

Verborgen veld

Hiermee geeft u de naam voor het veld op.

Waarde

Hiermee kent u een waarde toe aan het veld. Deze waarde wordt aan de server doorgegeven wanneer het formulier wordt verzonden.

Een groep keuzerondjes invoegen

  1. Plaats de invoegpositie in het formulier.

  2. Selecteer Invoegen > Formulier > Groep keuzerondjes.

  3. Vul het dialoogvenster in en klik op OK.

    a. Voer in het vak Naam een naam voor de groep keuzerondjes in.

     Als u de keuzerondjes instelt om parameters aan de server terug te geven, worden de parameters aan de naam gekoppeld. Als u de groep bijvoorbeeld mijnGroep noemt en de formuliermethode instelt op GET (en dus wilt dat het formulier URL-parameters doorgeeft in plaats van formulierparameters wanneer de gebruiker op de verzendknop klikt), wordt de expressie mijnGroep="CheckedValue" in de URL aan de server doorgegeven.

    b. Klik op de plusknop (+) om een keuzerondje aan de groep toe te voegen. Voer een label en geselecteerde waarde voor de nieuwe knop in.

    c. Klik op de pijl-omhoog of de pijl-omlaag als u de volgorde van de knoppen wilt wijzigen.

    d. Als u wilt dat een bepaald keuzerondje is ingeschakeld wanneer de pagina in een browser wordt geopend, typt u een waarde in het vak Selecteer waarde gelijk aan, die gelijk is aan de waarde van het keuzerondje.

    Voer een statische waarde in of geef een dynamische waarde op door op het pictogram met de bliksemflits naast het vak te klikken en een recordset te selecteren die mogelijke geselecteerde waarden bevat. In beide gevallen moet de waarde die u opgeeft, overeenkomen met de geselecteerde waarde van een van de keuzerondjes in de groep. Als u de ingeschakelde waarden van de keuzerondjes wilt bekijken, schakelt u de keuzerondjes een voor een in en opent u telkens de eigenschappencontrole (Venster > Eigenschappen).

    e. Selecteer het formaat waarin u de knoppen in Dreamweaver wilt indelen. Deel de knoppen in met regeleinden of met een tabel. Als u de tabeloptie kiest, maakt Dreamweaver een tabel met één kolom en worden de keuzerondjes links en de labels rechts geplaatst.

    U kunt de eigenschappen in de eigenschappencontrole of rechtstreeks in de codeweergave instellen.

Een groep selectievakjes invoegen

  1. Plaats de invoegpositie in het formulier.

  2. Selecteer Invoegen > Formulier > Groep Selectievakjes.

  3. Vul het dialoogvenster in en klik op OK.

    a. Voer in het vak Naam een naam voor de groep selectievakjes in.

    Als u de selectievakjes instelt om parameters aan de server terug te geven, worden de parameters aan de naam gekoppeld. Als u de groep bijvoorbeeld mijnGroep noemt en de formuliermethode instelt op GET (en dus wilt dat het formulier URL-parameters doorgeeft in plaats van formulierparameters wanneer de gebruiker op de verzendknop klikt), wordt de expressie mijnGroep="CheckedValue" in de URL aan de server doorgegeven.

    b. Klik op de plusknop (+) om een selectievakje aan de groep toe te voegen. Voer een label en geselecteerde waarde voor het nieuwe selectievakje in.

    c. Klik op de pijl-omhoog of de pijl-omlaag als u de volgorde van de selectievakjes wilt wijzigen.

    d. Als u wilt dat een bepaald selectievakje is ingeschakeld wanneer de pagina in een browser wordt geopend, typt u een waarde in het vak Selecteer waarde gelijk aan, die gelijk is aan de waarde van het selectievakje.

    Voer een statische waarde in of geef een dynamische waarde op door op het pictogram met de bliksemflits naast het vak te klikken en een recordset te selecteren die mogelijke geselecteerde waarden bevat. In beide gevallen moet de waarde die u opgeeft, overeenkomen met de geselecteerde waarde van een van de selectievakjes in de groep. Als u de ingeschakelde waarden van de selectievakjes wilt bekijken, schakelt u de selectievakjes een voor een in en opent u telkens de eigenschappencontrole (Venster > Eigenschappen).

    e. Selecteer het formaat waarin u de selectievakjes in Dreamweaver wilt indelen.

    Deel de selectievakjes in met regeleinden of met een tabel. Als u de tabeloptie kiest, maakt Dreamweaver een tabel met één kolom en worden de selectievakjes links en de labels rechts geplaatst.

    U kunt de eigenschappen in de eigenschappencontrole of rechtstreeks in de codeweergave instellen.

Over dynamische formulierobjecten

Een dynamisch-formulierobject is een formulierobject waarvan de begintoestand door de server wordt bepaald op het moment dat de pagina bij de server wordt aangevraagd. De toestand wordt dus niet in de ontwerpfase door de ontwerper bepaald. Wanneer een gebruiker bijvoorbeeld een PHP-pagina aanvraagt die een formulier met een menu bevat, wordt het menu automatisch door een PHP-script op de pagina gevuld met waarden die in een database zijn opgeslagen. De server verzendt de ingevulde pagina vervolgens naar de browser van de gebruiker.

Het onderhoud van een site kan eenvoudiger worden wanneer formulierobjecten dynamisch zijn. Veel sites gebruiken bijvoorbeeld menu's om gebruikers een reeks opties aan te bieden. Als het menu dynamisch is, kunt u de menu-items op een enkele plaats toevoegen, verwijderen of wijzigen, namelijk in de databasetabel waarin de items zijn opgeslagen, om alle instanties van hetzelfde menu op de site bij te werken.

Een dynamisch HTML-formuliermenu invoegen of wijzigen

U kunt een HTML-formuliermenu of -lijstmenu dynamisch vullen met elementen uit een database. Voor de meeste pagina's kunt u een HTML-menuobject gebruiken.

Voordat u begint, moet u een HTML-formulier op een ColdFusion-, PHP, - of ASP-pagina invoegen, en moet u een recordset of andere bron van dynamische inhoud voor het menu definiëren.

  1. Voeg een HTML-lijst/menu formulierobject op de pagina in:

        a. Klik in het HTML-formulier op de pagina (Invoegen > Formulier > Formulier).

        b. Kies Invoegen > Formulier > Lijst/Menu om het formulierobject in te voegen.

  2. Voer een van de volgende handelingen uit:

    • Selecteer de nieuwe of een bestaande HML-lijst/menu formulierobject en klik dan op de knop Dynamisch eigenschappencontrole.

    • Selecteer Invoegen > Gegevensobjecten > Dynamische gegevens > Dynamische selectielijst

  3. Vul het dialoogvenster Dynamische lijst/menu in en klik op OK.

      a. Selecteer in het pop-upmenu Opties uit recordset de recordset die u als inhoudsbron wilt gebruiken. U moet dit menu ook gebruiken als u de items in zowel het statische als het dynamische menu of in de lijst wilt bewerken.

      b. Voer in het gebied Statische opties een standaarditem in de lijst of het menu in. Gebruik deze optie ook als u de statische vermeldingen in een lijst/menuformulierobject wilt bewerken nadat u dynamische inhoud hebt toegevoegd.

      c. (Optioneel) Gebruik de plus- en minknop (+ en -) om items aan de lijst toe te voegen of uit de lijst te verwijderen. De items staan in dezelfde volgorde als in het dialoogvenster Beginlijstwaarden. Het eerste item in de lijst is het item dat is geselecteerd wanneer de pagina in een browser wordt geladen. Gebruik de knoppen pijl-omhoog en -omlaag als u de volgorde van de items in de lijst wilt wijzigen.

      d. Selecteer in het pop-upmenu Waarden het veld dat de waarden van de menu-items bevat.

      e. Selecteer in het pop-upmenu Labels het veld dat de tags voor de menu-items bevat.

      f. (Optioneel) Als u wilt opgeven dat een bepaald menu-item geselecteerd moet zijn wanneer de pagina in een browser wordt geopend of wanneer een record in het formulier wordt weergegeven, voert u in het vak Selecteer waarde gelijk aan een waarde in die gelijk is aan de waarde van het menu-item.

        U kunt een statische waarde invoeren, of u kunt een dynamische waarde opgeven door op het pictogram met de bliksemflits naast het vak te klikken en een dynamische waarde te selecteren in de lijst met gegevensbronnen. In beide gevallen moet de waarde die u opgeeft, overeenkomen met de waarde van een van de menu-items.

     

Bestaande HTML-formuliermenu's dynamisch maken

  1. Selecteer in de ontwerpweergave het lijst/menuformulierobject.
  2. Klik in de eigenschappencontrole op de knop Dynamisch.
  3. Vul het dialoogvenster in en klik op OK.

Dynamische inhoud weergeven in HTML-tekstvelden

U kunt dynamische inhoud in HTML-tekstvelden weergeven wanneer het formulier in een browser wordt weergegeven.

Voordat u begint, moet u het HTML-formulier maken op een ColdFusion-, PHP, - of ASP-pagina, en moet u een recordset of andere bron van dynamische inhoud voor het tekstveld definiëren.

  1. Selecteer het tekstveld in het HTML-formulier op de pagina.
  2. Klik in de eigenschappencontrole op het pictogram met de bliksemflits naast het vak Beginwaarde om het dialoogvenster Dynamische gegevens weer te geven.
  3. Selecteer de recordsetkolom die een waarde voor het tekstveld levert, en klik op OK.

Opties in het dialoogvenster Dynamisch tekstveld instellen

  1. Selecteer het tekstveld dat u dynamisch wilt maken, in het pop-upmenu Tekstveld.
  2. Klik op het pictogram met de bliksemflits naast het vak Stel waarde in op, selecteer een gegevensbron in de lijst met gegevensbronnen en klik op OK.

    De gegevensbron moet tekstuele informatie bevatten. Als de lijst geen gegevensbronnen bevat of als de beschikbare gegevensbronnen niet geschikt zijn, klikt u op de plusknop (+) om een nieuwe gegevensbron te definiëren.

Een HTML-selectievakje dynamisch vooraf selecteren

U kunt de server laten bepalen of een selectievakje moet worden ingeschakeld wanneer het formulier in een browser wordt weergegeven.

Voordat u begint, moet u het HTML-formulier maken op een ColdFusion-, PHP, - of ASP-pagina, en moet u een recordset of andere bron van dynamische inhoud voor de selectievakjes definiëren. In het beste geval moet de inhoudsbron Booleaanse gegevens bevatten, zoals Ja/Nee of waar/onwaar.

  1. Selecteer een formulierobject van het type selectievakje op de pagina.
  2. Klik in de eigenschappencontrole op de knop Dynamisch.
  3. Vul het dialoogvenster Dynamisch selectievakje in en klik op OK:

    • Klik op het pictogram met de bliksemflits naast het vakje Inschakelen indien, en selecteer het veld in de lijst met gegevensbronnen.

      De gegevensbron moet Booleaanse gegevens bevatten, zoals Yes en No of true en false. Als de lijst geen gegevensbronnen bevat of als de beschikbare gegevensbronnen niet geschikt zijn, klikt u op de plusknop (+) om een nieuwe gegevensbron te definiëren.

    • Voer de waarde in het vak Gelijk aan in, die het veld moet hebben opdat het selectievakje wordt ingeschakeld.

      Als u bijvoorbeeld wilt dat het selectievakje wordt ingeschakeld wanneer een specifiek veld in een record de waarde Ja heeft, moet u Ja in het vak Gelijk aan invullen.

    Opmerking:

    Deze waarde wordt eveneens aan de server geretourneerd als de gebruiker op de verzendknop van het formulier klikt.

Een HTML-keuzerondje dynamisch vooraf inschakelen

Selecteer vooraf dynamisch een HTML-keuzerondje wanneer een record in het HTML-formulier in een browser wordt weergegeven.

Voordat u begint, moet u het formulier op een ColdFusion-, PHP-, - of ASP-pagina maken en minstens één groep HTML-keuzerondjes invoegen (Invoegen > Formulier > Groep keuzerondjes). U moet eveneens een recordset of andere bron van dynamische inhoud voor de keuzerondjes definiëren. In het beste geval moet de inhoudsbron Booleaanse gegevens bevatten, zoals Ja/Nee of waar/onwaar.

  1. Selecteer in de ontwerpweergave een keuzerondje in de groep keuzerondjes.
  2. Klik in de eigenschappencontrole op de knop Dynamisch.
  3. Vul het dialoogvenster Dynamisch keuzerondje in en klik op OK.

Opties in het dialoogvenster Dynamische groep keuzerondjes instellen

  1. Selecteer in het pop-upmenu Groep keuzerondjes een formulier en groep keuzerondjes op de pagina.

    In het vak Waarden voor keuzerondjes worden de waarden van alle keuzerondjes in de groep weergegeven.

  2. Selecteer een waarde om dynamisch vooraf een keuze te maken uit de lijst met waarden. Deze waarde wordt in het vak Waarde weergegeven.
  3. Klik op het pictogram met de bliksemflits naast het vak Selecteer waarde gelijk aan en selecteer een recordset die mogelijke geselecteerde waarden voor de keuzerondjes in de groep bevatten.

    De recordset die u selecteert, bevat waarden die overeenkomen met de geselecteerde waarden van de keuzerondjes. Als u de ingeschakelde waarden van de keuzerondjes wilt bekijken, schakelt u de keuzerondjes een voor een in en opent u telkens de eigenschappencontrole (Venster > Eigenschappen).

  4. Klik op OK.

Opties in het dialoogvenster Dynamische groep keuzerondjes instellen (ColdFusion)

  1. Selecteer een groep keuzerondjes en een formulier in het pop-upmenu Groep keuzerondjes.
  2. Klik op het pictogram met de bliksemflits naast het vak Selecteer waarde gelijk aan.

  3. Vul het dialoogvenster Dynamische gegevens in en klik op OK.

      a. Selecteer een gegevensbron in de lijst met gegevensbronnen.

      b. (Optioneel) Selecteer een gegevensopmaak voor de tekst.

      c. (Optioneel) Wijzig de code die Dreamweaver op de pagina invoegt om de dynamische tekst weer te geven.

  4. Klik op OK om het dialoogvenster Dynamische groep keuzerondjes te sluiten, en voeg de tijdelijke aanduiding voor de dynamische inhoud in de groep keuzerondjes in.

HTML-formuliergegevens valideren

In Dreamweaver kunt u JavaScript-code toevoegen die de inhoud van opgegeven tekstvelden controleert om na te gaan of de gebruiker het juiste type gegevens heeft ingevoerd.

U kan Spry-formulierwidgets gebruiken om uw formulieren te maken en de inhoud van de opgegeven formulierelementen te valideren. Raadpleeg de onderstaande Spry-onderwerpen voor meer informatie.

U kunt in Dreamweaver ook ColdFusion-formulieren maken die de inhoud van opgegeven velden controleren. Raadpleeg het onderstaande ColdFusion-hoofdstuk voor meer informatie.

  1. Maak een HTML-formulier dat minstens één tekstveld en een verzendknop bevat.

    Zorg ervoor dat elk tekstveld dat u wilt controleren, een unieke naam heeft.

  2. Selecteer de verzendknop.
  3. Klik in het deelvenster Gedrag (Venster > Gedrag) op de plusknop (+) en selecteer het gedrag Formulier valideren in de lijst.
  4. Stel de validatieregels voor elk tekstveld in en klik op OK.

    U kunt bijvoorbeeld opgeven dat in een tekstveld voor de leeftijd van een persoon alleen cijfers mogen worden ingevoerd.

    Opmerking:

    Het gedrag Formulier valideren is alleen beschikbaar als het document een tekstveld bevat.

JavaScript-gedrag aan HTML-formulierobjecten koppelen

U kunt JavaScript-gedrag dat is opgeslagen in Dreamweaver, koppelen aan HTML-formulierobjecten, zoals knoppen.

  1. Selecteer het HTML-formulierobject.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de plusknop (+) en selecteer een gedrag in de lijst.

Aangepaste scripts aan HTML-formulierknoppen koppelen

Sommige formulieren gebruiken JavaScript of VBScript om de verwerking van formulieren of andere acties op de client uit te voeren in plaats van de formuliergegevens voor verwerking naar de server te versturen. U kunt Dreamweaver gebruiken om een formulierknop te configureren om een specifiek script op de client uit te voeren wanneer de gebruiker op de knop klikt.

  1. Selecteer een verzendknop in een formulier.
  2. Klik in het deelvenster Gedrag (Venster > Gedrag) op de plusknop (+) en selecteer JavaScript aanroepen in de lijst.
  3. Voer in het vak JavaScript aanroepen de naam in van de JavaScript-functie die u wilt uitvoeren wanneer de gebruiker op de knop klikt, en klik op OK.

    U kunt bijvoorbeeld de naam invoeren van een functie die nog niet bestaat, zoals processMyForm().

  4. Als de JavaScript-functie nog niet in de hoofdsectie van het document bestaat, voegt u deze nu toe.

    U kunt bijvoorbeeld de volgende JavaScript-functie in de hoofdsectie van het document definiëren om een bericht weer te geven wanneer de gebruiker op de verzendknop klikt:

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

Toegankelijke HTML-formulieren maken

Wanneer u een HTML-formulierobject invoegt, kunt u het formulierobject toegankelijk maken en de toegankelijkheidskenmerken later wijzigen.

Een toegankelijk formulierobject toevoegen

  1. Wanneer u de eerste keer toegankelijke formulierobjecten toevoegt, activeert u het dialoogvenster Toegankelijkheid voor formulierobjecten (zie De werkruimte optimaliseren voor visuele ontwikkeling).

    Deze stap hoeft u maar één keer uit te voeren.

  2. Plaats de invoegpositie in het document op de plaats waar u het formulierobject wilt weergeven.
  3. Kies Invoegen > Formulier, en selecteer het formulierobject dat u wilt invoegen.

    Het dialoogvenster Toegankelijkheidskenmerken van de invoertag wordt geopend.

  4. Vul het dialoogvenster in en klik op OK. Dit is een lijst met een aantal opties:
    Opmerking:

    De schermlezer leest de naam die u invoert, als het kenmerk Label voor het object.

    ID

    Hiermee kent u een id toe aan het formulierveld. Deze waarde kan worden gebruikt om vanuit JavaScript naar het veld te verwijzen. De waarde wordt eveneens gebruikt als de waarde van het for-kenmerk als u onder de Stijl-opties de optie Labeltag koppelen met het kenmerk 'for' kiest.

    Terugloop met labeltag

    Hiermee plaatst u als volgt een labeltag rond het formulieritem:

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

    Labeltag koppelen met het kenmerk 'for'

    Als u deze optie kiest, wordt het for-kenmerk gebruikt om een labeltag als volgt rond het formulieritem te plaatsen:

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

    Bij deze keuze geeft de browser tekst die aan een selectievakje of keuzerondje is gekoppeld, weer in een focusrechthoek, en kan de gebruiker het selectievakje of keuzerondje inschakelen door ergens in de desbetreffende tekst te klikken in plaats van precies op het selectievakje of het keuzerondje.

    Opmerking: deze optie heeft de voorkeur wat toegankelijkheid betreft. De functionaliteit kan echter per browser verschillen.

    Geen labeltag

    Bij deze optie wordt geen labeltag gebruikt, zoals hier:

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

    Toegangstoets

    Bij deze optie wordt een toetsenbordequivalent (één letter) en de Alt-toets (Windows) of de Control-toets (Mac) gebruikt om het formulierobject in de browser te selecteren. Als u bijvoorbeeld B als toegangstoets invoert, kunnen Mac-gebruikers in hun browser op Control+B drukken om het formulierobject te selecteren.

    Tabindex

    Hiermee bepaalt u de tabvolgorde voor de formulierobjecten. Als u de tabvolgorde voor één object instelt, moet u de tabvolgorde voor alle objecten instellen.

    Het instellen van een tabvolgorde is handig wanneer de pagina nog andere koppelingen en formulierobjecten bevat en de gebruiker deze in een specifieke volgorde moet doorlopen.

  5. Klik op Ja om een formuliertag in te voegen.

    Het formulierobject wordt in het document weergegeven.

    Opmerking:

    Als u op Annuleren klikt, verschijnt het formulierobject in het document, maar worden er door Dreamweaver geen toegankelijkheidstags of -kenmerken aan gekoppeld.

Toegankelijkheidswaarden voor een formulierobject bewerken

  1. Selecteer het object in het documentvenster.
  2. Voer een van de volgende handelingen uit:

    • Bewerk de desbetreffende kenmerken in de codeweergave.

    • Klik met de rechtermuisknop (Windows), of houd de Command-toets ingedrukt terwijl u klikt, en kies Tag bewerken.

Verwante informatie

Adobe-logo

Aanmelden bij je account

Snelkoppelingen

Je apps bekijken Je lidmaatschappen beheren

Juridische kennisgevingen    |    Online privacybeleid