Webformulieren maken

In de ontwerpweergave worden formulieren aangeduid met een gestippelde rode omtrek. Als deze omtrek niet wordt weergegeven, selecteer je Weergave > Visuele hulpmiddelen > Onzichtbare elementen.

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.

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.

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.

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.

Gebruik regeleinden, alinea-einden, vooraf opgemaakte tekst of tabellen om je formulieren op te maken.Je kunt geen formulier in een ander formulier invoegen (dat wil zeggen, je kunt tags niet overlappen), maar je kunt meer dan één formulier op een pagina opnemen.

Onthoud bij het ontwerpen van formulieren dat je de formuliervelden moet labelen met beschrijvende tekst zodat gebruikers weten waar ze op reageren. Bijvoorbeeld 'Typ je naam' om naamgegevens op te vragen.

Gebruik tabellen om structuur te bieden voor formulierobjecten en veldlabels.Wanneer je tabellen in formulieren gebruikt, zorg er dan voor dat alle table-tags zijn opgenomen tussen de form-tags.

Hiermee geeft u de naam voor het bestandsveldobject op.

Specificeert het maximum aantal tekens dat kan worden weergegeven in het veld.

Specificeert het maximum aantal tekens dat het veld kan bevatten. Als de gebruiker bladert om het bestand te zoeken, kunnen de bestandsnaam en het pad de opgegeven waarde voor Max Chars overschrijden. Als de gebruiker echter probeert de bestandsnaam en het pad in te typen, staat het bestandsveld alleen het aantal tekens toe dat is opgegeven door de waarde Max Chars.

Het dialoogvenster Afbeeldingsbron selecteren wordt geopend.

Hiermee geeft u de knop een naam. Twee gereserveerde namen, Verzenden en Herstellen, geven het formulier de opdracht om de formuliergegevens te verzenden naar de verwerkende applicatie of Script, of om alle formuliervelden te herstellen naar hun oorspronkelijke waarden.

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

Hiermee kun je beschrijvende tekst invoeren voor het geval de afbeelding niet wordt geladen in de browser.

Hiermee stelt u het uitlijningskenmerk van het object in.

Start je standaardeditor voor afbeeldingen en opent het afbeeldingsbestand voor bewerking.

Hiermee kunt u CSS-regels op het object toepassen.

Selecteer Invoegen > Formulier > Groep keuzerondjes.

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 de indeling waarin je wilt dat Dreamweaver de knoppen weergeeft.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 ook instellen in de eigenschappencontrole of rechtstreeks in de codeweergave.

Selecteer Invoegen > Formulier > Groep Selectievakjes.

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 ook instellen in de eigenschappencontrole of rechtstreeks in de codeweergave.

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.

Voer een van de volgende handelingen uit:

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

• Selecteer Invoegen > Gegevensobjecten > Dynamische gegevens > Dynamische selectielijst

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

De gegevensbron moet tekstuele informatie bevatten. Als er geen databronnen worden weergegeven in de lijst of als de beschikbare databronnen niet aan je behoeften voldoen, klik je op de Plus-knop (+) om een nieuwe databron te definiëren.

• 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 Ja en Nee of waar en onwaar. 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.

Het vak Keuzerondjewaarde toont de waarden van alle keuzerondjes in de groep.

De recordset die je selecteert bevat waarden die overeenkomen met de aangevinkte waarden van de keuzerondjes.Om de aangevinkte waarden van de keuzerondjes te bekijken, selecteer je elk keuzerondje en open je het eigenschappenvenster (Venster > Eigenschappen).

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.

Zorg ervoor dat elk tekstveld dat je wilt valideren een unieke naam heeft.

Je kunt bijvoorbeeld opgeven dat een tekstveld voor iemands leeftijd alleen nummers accepteert.

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

Je kunt bijvoorbeeld de volgende JavaScript-functie definiëren in het head-gedeelte van het document om een bericht weer te geven wanneer de gebruiker op de Submit-knop klikt:

function processMyForm(){

alert('Bedankt voor je bestelling!');

}

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

Het dialoogvenster Toegankelijkheidskenmerken van de invoertag wordt geopend.

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.

Hiermee plaatst u als volgt een labeltag rond het formulieritem:

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: Dit is de voorkeuroptie voor toegankelijkheid, maar de functionaliteit kan variëren afhankelijk van de browser.

Bij deze optie wordt geen labeltag gebruikt, zoals hier:

Gebruikt een toetsenbordequivalent (één letter) en de Alt-toets (Windows) of de Control-toets (Macintosh) om het formulierobject in de browser te selecteren.Als je bijvoorbeeld B invoert als toegangstoets, kunnen gebruikers met een Macintosh-browser Control+B typen om het formulierobject te selecteren.

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

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

Het formulierobject wordt in het document weergegeven.

• Bewerk de juiste kenmerken in de codeweergave.

• Klik met de rechtermuisknop (Windows) of Ctrl+klik (Macintosh) en selecteer vervolgens Tag bewerken.