Er zijn vaak momenten waarop u webpagina's aanmaakt waar u de invoer van de gebruiker moet verwerken, zoals een inlogpagina, het maken van nieuwe accounts of het indienen van vragen of opmerkingen. Gebruikersinvoer wordt verzameld en verzonden naar de webserver met behulp van een HTML-formulier. Formulieren zijn eenvoudig toe te voegen met de ingebouwde tools van KompoZer. Alle formulierveldtypen die door HTML 4.0 worden ondersteund, kunnen worden toegevoegd en bewerkt met KompoZer, maar voor deze zelfstudie werken we met de tekst, het tekstgedeelte, de verzend- en de resetknoppen.
Maak een nieuw formulier
KompoZer heeft uitgebreide vormgereedschappen die u kunt gebruiken om formulieren toe te voegen aan uw webpagina's. U krijgt toegang tot de formulierhulpmiddelen door op de knop Formulier of het bijbehorende vervolgkeuzemenu op de werkbalk te klikken. Merk op dat als u niet uw eigen formulierbehandelingsscripts schrijft, u enige informatie voor deze stap nodig heeft uit de documentatie of uit de programmeur die het script heeft geschreven. U kunt ook mailto-formulieren gebruiken, maar deze werken niet altijd.
- Plaats uw cursor op de locatie waar u uw formulier op de pagina wilt plaatsen.
- Klik op de Het formulier knop op de werkbalk. Het dialoogvenster Formuliereigenschappen wordt geopend.
- Voeg een naam toe voor het formulier. De naam wordt gebruikt in de automatisch gegenereerde HTML-code om het formulier te identificeren en is vereist. U moet ook uw pagina opslaan voordat u een formulier kunt toevoegen. Als u met een nieuwe, niet-opgeslagen pagina werkt, vraagt KompoZer u om op te slaan.
- Voeg de URL toe aan het script dat de formuliergegevens verwerkt in het veld Actie-URL. Formulier-handlers zijn meestal scripts geschreven in PHP of soortgelijke taal aan de serverzijde. Zonder deze informatie kan uw webpagina niets doen met de gegevens die door de gebruiker zijn ingevoerd. KompoZer zal u vragen om de URL voor de formulierhandler in te voeren als u deze niet invoert.
- Selecteer de Methode gebruikt om de formuliergegevens naar de server te verzenden. De twee keuzes zijn GET en POST. U moet weten welke methode het script vereist.
- Klik OK en het formulier is toegevoegd aan uw pagina.
Voeg een tekstveld toe aan een formulier
Nadat u een formulier aan een pagina met KompoZer hebt toegevoegd, wordt het formulier op de pagina in een lichtblauwe stippellijn weergegeven. U voegt uw formuliervelden in dit gebied toe. Je kunt ook tekst typen of afbeeldingen toevoegen, net zoals je op een ander deel van de pagina zou doen. Tekst is handig om aanwijzingen of labels toe te voegen om velden te vormen om de gebruiker te begeleiden.
- Kies waar u wilt dat het tekstveld in het geschetste formuliergebied gaat. Als u een label wilt toevoegen, wilt u misschien eerst de tekst typen.
- Klik op de pijl naar beneden naast het Het formulier op de werkbalk en kies Formulierveld in het vervolgkeuzemenu.
- Het venster Eigenschappen formulierveld wordt geopend. Kies om een tekstveld toe te voegen Tekst uit het vervolgkeuzemenu met het label Veld soort.
- Geef een naam aan het tekstveld. De naam wordt gebruikt om het veld in de HTML-code te identificeren en het formulierafhandelingsscript heeft de naam nodig om de gegevens te verwerken. Een aantal andere optionele kenmerken kunnen in dit dialoogvenster worden gewijzigd door de Meer eigenschappen / minder eigenschappen knop of door op de knop Geavanceerd bewerken te drukken, maar voor nu voeren we gewoon de veldnaam in.
- Klik OK en het tekstveld verschijnt op de pagina.
Voeg een tekstgebied toe aan een formulier
Soms moet er veel tekst worden ingevoerd op een formulier, zoals een bericht of een veld voor vragen / opmerkingen. In dit geval is een tekstveld gewoon niet geschikt. U kunt een formulierveld voor een tekstgebied toevoegen met behulp van de formulierhulpmiddelen.
- Plaats uw cursor in de vorm omtrek waar u wilt dat uw tekstgebied is. Als u een label wilt typen, is het vaak een goed idee om de labeltekst in te voeren, op enter te drukken om naar een nieuwe regel te gaan en vervolgens het formulierveld toe te voegen, omdat de grootte van het tekstgebied op de pagina het lastig maakt voor de label aan de linker- of rechterkant.
- Klik op de pijl naar beneden naast het Het formulier op de werkbalk en kies Tekst Gebied uit het vervolgkeuzemenu. Het venster Eigenschappen tekstgebied wordt geopend.
- Voer een naam in voor het tekstgebiedveld. De naam identificeert het veld in de HTML-code en wordt gebruikt door het formulierafhandelingsscript om de door de gebruiker verzonden informatie te verwerken.
- Voer het aantal rijen en kolommen in dat u in het tekstgebied wilt weergeven. Deze dimensies bepalen de grootte van het veld op de pagina en de hoeveelheid tekst die in het veld kan worden ingevoerd voordat er moet worden geschoven.
- Meer geavanceerde opties kunnen worden opgegeven met de andere bedieningselementen in dit venster, maar voor nu zijn de veldnaam en afmetingen voldoende.
- Klik OK en het tekstgebied verschijnt op het formulier.
Voeg een knop Verzenden en opnieuw instellen toe aan een formulier
Nadat de gebruiker het formulier op uw pagina heeft ingevuld, moet er een manier zijn waarop de informatie naar de server kan worden verzonden. Als de gebruiker opnieuw wil beginnen of een fout wil maken, is het bovendien handig om een besturingselement op te nemen dat alle formulierwaarden opnieuw instelt op de standaardwaarde. Speciale formulierbedieningen verwerken deze functies, respectievelijk de Submit- en Reset-knoppen.
- Plaats uw cursor in het geschetste formuliergebied waar u de verzend- of resetknop wilt plaatsen. Meestal bevinden deze zich onder de rest van de velden op een formulier.
- Klik op de pijl naar beneden naast het Het formulier op de werkbalk en kies Definieer knop uit het vervolgkeuzemenu. Het venster Button Properties verschijnt.
- Kies het type knop in het vervolgkeuzemenu met het label Type. Uw keuzes zijn Verzenden, Opnieuw instellen en Knop. In dit geval zullen we de voorleggen type.
- Geef de knop een naam die in de HTML-code en de formulierafhandelingscode wordt gebruikt om de formulieraanvraag te verwerken. Webontwikkelaars noemen dit veld meestal "indienen".
- In het vak met het label Waarde, voer de tekst in die op de knop moet verschijnen. De tekst moet kort maar beschrijvend zijn voor wat er zal gebeuren wanneer op de knop wordt gedrukt. Iets als 'Verzenden', 'Formulier verzenden' of 'Verzenden' zijn goede voorbeelden.
- Klik op OK en de knop verschijnt op het formulier.
De Reset knop kan met hetzelfde proces aan het formulier worden toegevoegd, maar kies Reset van de Type veld in plaats van voorleggen.
Een formulier bewerken met KompoZer
Het bewerken van een formulier- of formulierveld in KompoZer is heel eenvoudig. Dubbelklik eenvoudig op het veld dat u wilt bewerken en het juiste dialoogvenster verschijnt waarin u de veldeigenschappen kunt aanpassen aan uw behoeften. Het bovenstaande diagram toont een eenvoudige vorm met behulp van de componenten die in deze zelfstudie worden behandeld.
