Javascript-actieformulier

| | | | | | | | | | | | | | | | | | | | | | |

Het HTML-formulieractiekenmerk definieert wat er met de gegevens moet gebeuren wanneer een formulier op een webpagina wordt ingediend. De waarde van het action-attribuut moet de URL zijn van de webresource die de inhoud van het formulier zal verwerken.

Wanneer u formulieren maakt en gegevens opvraagt op uw site of webtoepassing, doet u dat vaak wil je toch iets met je gegevens doen? Dit is waar het shape action-attribuut om de hoek komt kijken.

Je moet de basis kennen van het maken van een formulier in HTML . In principe verpakt u de inhoud van het formulier in de

elementtag . In de openingstag zijn er een paar attributen die we kunnen gebruiken en een daarvan is de action.

Het action attribuut wordt gebruikt om aan te geven waar we de formuliergegevens naartoe willen sturen wanneer het formulier wordt ingediend. De actiewaarde is dus de pagina die het formulier zal verwerken.

HTML-formulieractiekenmerk

Het actiekenmerk van het HTML-formulier geeft de URL aan die de inhoud van een formulier zal verwerken . U moet ervoor zorgen dat de webresource waarnaar wordt verwezen door het actiekenmerk de methode accepteert die u opgeeft in uw "methode" -kenmerk

Laten we eens kijken naar de syntaxis van het actiekenmerk: .

action attribuut verschijnt tussen ons openingslabel . Dit attribuut wordt vaak gebruikt met het method-attribuut .

Standaard is het method-attribuut ingesteld op "get". Dit betekent dat uw formulier gegevens verzendt op een HTTP GET-verzoek wanneer het wordt ingediend. U kunt de methode wijzigen door "method = `post`" op te geven in uw -openingstag

formuliergegevens worden verzonden naar de "actie"-URL wanneer op de verzendknop wordt geklikt

voorbeeldactie van HTML-formulier

Laat een voorbeeld kijken naar:

Hierboven stuurt de actie de gebruikersnaam en e-mailgegevens naar een pagina met de naam process.html. de gebruikersnaam en e-mailgegevens hebben het type d `invoer "tekst.‚" We definiëren een knop met het invoertype "verzenden.‚" Wanneer u erop klikt, markeert deze knop onze gegevens op onze "actie‚" URL.

Voer nu het bovenstaande formuliervoorbeeld in - het in een echt HTML-bestand en maak vervolgens een bestand met de naam process.html in dezelfde map Dit bestand moet de volgende inhoud hebben:

Deze code definieert een eenvoudige webpagina die een alinea met tekst toont wanneer de pagina wordt geladen. Keer terug naar onze online vorm die we eerder gedefinieerd en het compileren:

 screenshot 10 2020/08/02 34 2:00

Met dit voorbeeld, zou je denken dat het niet erg bruikbaar. Wat is waar . in het algemeen wordt het action attribuut gebruikt om de inhoud van het formulier naar de serverpagina`s te sturen. we zouden bijvoorbeeld een php-bestand kunnen gebruiken met de naam process.php.

process.php zal dan alle magie met gegevens doen. deze pagina kan onze gegevens opslaan in een database of registreren voor uw favoriete evenement, noem maar op. PHP is een krachtige scripttaal voor servers, die vaak wordt gebruikt bij webontwikkeling. Als je eerder WordPress hebt gebruikt, worden waarschijnlijk sommige verwerkte gegevens verwerkt door PHP.

Voor meer informatie over PHP, zie onze PHP-leergids .

Is het actiekenmerk vereist?

In HTML4 zou het antwoord ja zijn. van vandaag met HTML5, is het niet nodig om een actiekenmerk op te geven. u een formuliertag zonder actiekenmerk heeft, dan worden de gegevens naar een eigen pagina gestuurd.

Waarom zouden we dit doen? Met de opkomst van Single Page Applications (ZPS) , willen we misschien onze formuliergegevens verwerken met JavaScript. Of misschien willen we onze gegevens verwerken met een ander framework, zoals React / Angular.

Als we Vanilla JavaScript gebruiken, voegen we vaak JavaScript-auditorgebeurtenis

toe. a> wanneer het formulier is ingediend.

Conclusie

Het HTML-formulieractiekenmerk definieert wat er gebeurt met de inhoud van een formulier wanneer het formulier wordt ingediend. Het action attribuut heeft een URL als argument.

Ben je geïnteresseerd om webontwikkelaar te worden? Bekijk onze Volledige gids voor het leren van HTML . U vindt er tips van experts over het leren van HTML, evenals een lijst met de beste online cursussen en leermiddelen.